原生AJAX以及JQuery发送AJAX请求的几种方式
JSON&AJAX
文章目录
- JSON&AJAX
- 1. JSON
- 1.1 json概述
- 1.2 Json使用
- 3. 原生AJAX
- 4. JQuery的AJAX
- 4.1 GET请求方式
- 4.2 POST请求方式
- 4.3 ajax请求方式
- 4.4 JQuery3.0 的GET新增签名方式
- 4.5 JQuery3.0 的POST新增签名方式
1. JSON
使用AJAX会用到JSON的相关内容，这里简单介绍一下
1.1 json概述
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，代替了以前的 XML 格式。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
| 类型 | 语法 |
|---|---|
| 对象类型 | {键:值 键:值} |
| 数组/集合类型 | [值1，值2，值3] |
| 混合类型 | [{键:值},{键:值 键:值},{键:值}] { 键: [ 值, 值, 值]} |
1.2 Json使用
- 对象类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script type="text/javascript">
// person 对象的 JSON 对象，属性名：firstname、lastname、age 给三个属性赋值
var person = {
firstname: "孙悟空",
lastname: "齐天大圣",
age: 500
};
//输出对象的每个属性值
document.write("姓：" + person.firstname + "
");
document.write("名：" + person.lastname + "
");
document.write("年龄：" + person.age + "
");
script>
body>
html>
- 数组类型，包含三个对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script type="text/javascript">
//创建一个数组，包含 3 个对象
var persons = [
{
id: 1,
name: "孙悟空",
sex: "男"
},
{
id: 2,
name: "猪八戒",
sex: "妖"
},
{
id: 3,
name: "嫦娥",
sex: "女"
}
];
//遍历输出每个元素
for(var p of persons) {
document.write("编号：" + p.id + "
");
document.write("姓名：" + p.name + "
");
document.write("性别：" + p.sex + "
");
document.write("
");
}
script>
body>
html>
- 混合类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script type="text/javascript">
//创建这种格式： {"param":[{key:value,key:value},{key:value,key:value}]}
var myBabies = {
baobao: [
{
name: "小红",
age: 18
},
{
name: "小泽",
age: 20
},
{
name: "小苍",
age:22
}
]
};
//得到这个对象的 baobao 属性
var baobao = myBabies.baobao; //返回数组
for(var b of baobao) {
document.write(b.name + "
");
}
script>
body>
html>
###2. ajax概述
Asynchronous JavaScript And XML :异步的 JavaScript 和 XML
提交方式：
以前我们表单提交数据给服务器，发送的请求是同步。串行操作方式，如果服务器没有响应回来，浏览器不能进行任何操作，只能等待。AJAX 使用异步的提交方式，后台进行数据的提交给服务器。
应用场景
- 检查用户名是否已经被注册
很多站点的注册页面都具备自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。
- 省市二联下拉框联动
很多站点都存在输入用户地址的操作，在完成地址输入时，用户所在的省份是下拉框，当选择不同的省份时会出现不同的市区的选择，这就是最常见的省市联动效果。
-
自动补全
在百度淘宝京东搜索商品或者其他东西时出现搜索下拉框的提示，这也使用了ajax
3. 原生AJAX
所有的 AJAX 的操作代码都使用纯 JS 去完成，不使用任何框架。开发效率相对低，代码量会更大一些。
demo
使用原生ajax实现判断用户名
前端发送原生ajax请求并接收响应数据
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断用户名title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
head>
<body>
用户名：<input type="text" id="username" name="username">
<span id="info">span>
<script type="text/javascript">
$("#username").blur(function () {
//创建一个xmLRequest对象
var request = new XMLHttpRequest();
//得到返回数据时触发方法
request.onreadystatechange = function () {
//判断返回状态，如果返回状态是200,并且readyState=4时获得返回数据
if(request.readyState == 4 && request.status == 200){
var value = request.responseText;
//返回数据放在id为info的span里面
$("#info").html(value);
}
};
var username = $("#username").val();
//打开一个链接并发送一个请求
request.open("GET","demo1?name=" + username,true);
request.send();
});
script>
body>
html>
后端接收请求并发送响应数据
package com.zmysna.demo;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/demo1")
public class Demo1XHR extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/plain;charset=utf-8");
PrintWriter writer = response.getWriter();
String username = request.getParameter("name");
if(username.equals("zmysna")){
writer.print("用户名已经注册");
}else{
writer.print("注册成功，欢迎" + username);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
4. JQuery的AJAX
| 语法 | 说明 |
|---|---|
| $.get(url,[data],[callback],[type]) | 使用get方式发送请求给服务器 |
| $.post(url,[data],[callback],[type]) | 使用post方式发送请求给服务器 |
| $.ajax([setting]) | 使用原生 AJAX 发送请求给服务器，参数相对比较多一点， 设置更加详细 |
| $.get([settings]) 3.0 新的方法签名方式 |
使用 GET 方法发送请求给服务器，以后会代替上面的写法。 参数与$.ajax 相同，设置参数相对多一些。 |
| $.POST([settings]) 3.0 新的方法签名方式 |
使用 POST 方法发送请求给服务器，以后会代替上面的写法。 参数与$.ajax 相同，设置参数相对多一些。 |
4.1 GET请求方式
$.get(url, [data], [callback], [type])
参数说明
| 参数名称 | 解释 |
|---|---|
| data | 发送给服务器的数据，有以下两种格式 格式 1 ：键 1=值 1&键 2=值 2 |
格式 2 ：使用 JSON 对象
{
键 1:值 1,
键 2:值 2
} |
| url | 访问服务器地址 |
| callback | 数据从服务器返回以后调用的回调函数，一般使用匿名函数
回调函数的参数就是从服务器返回的数据 |
| type | 从服务器返回的数据类型
取值xml , html, script, json, text, _default
默认是字符串文本类型 |
改造前面的demo，使用jquery的ajax，后台代码不变。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断用户名title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
head>
<body>
用户名：<input type="text" id="username" name="username">
<span id="info">span>
<script type="text/javascript">
$("#username").blur(function () {
var username = $("#username").val();
$.get(
"demo1",
"name=" + username,
function(data){
$("#info").html(data);
},
"text"
);
});
script>
body>
html>
4.2 POST请求方式
$.get(url, [data], [callback], [type])
和get请求方式大体一致，区别是请求的方式不同，改请求方法名字就行。
$.post(
"demo1",
"name=" + username,
function(data){
$("#info").html(data);
},
"text"
);
4.3 ajax请求方式
$.ajax([settings])
其中，settings 是一个 JSON 形式的对象，格式是{name:value,name:value… …}，常用的 name 属性名如下:
| 参数名称 | 解释 |
|---|---|
| data | 发送给服务器的数据，使用 JSON 对象 |
{
键 1:值 1,
键 2:值 2
} |
| url | 访问服务器地址 |
| method | 发送请求的方式：GET或POST；默认是GET方式 |
| datatype | 从服务器返回的数据类型
取值可以是xml , html, script, json, text, _default |
| success | 数据从服务器返回以后调用的回调函数，一般使用匿名函数
回调函数的参数就是从服务器返回的数据 |
| error | 如果服务器出现异常调用这个函数 |
| async | 设置后台发送格式，是异步或同步发送 。通常省略
默认值 ：true ，异步发送请求。 |
使用ajax实现判断用户名
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax实现判断用户名title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
head>
<body>
用户名：<input type="text" id="username" name="username">
<span id="info">span>
<script type="text/javascript" >
$("#username").blur(function () {
var username = $(this).val();
$.ajax({
url : "demo1",
method : "GET",
data : {name : username},
dataType : "text",
success : function (data) {
$("#info").html(data);
},
error: function () {
alert("服务器错误");
}
})
});
script>
body>
html>
4.4 JQuery3.0 的GET新增签名方式
$.get([settings])
使用方式和ajax签名方式类似，使用get方式发送ajax请求仅仅需要在上面的例子上修改一个签名名字。
$.get({
url : "demo1",
method : "GET",
data : {name : username},
dataType : "text",
success : function (data) {
$("#info").html(data);
},
error: function () {
alert("服务器错误");
}
});
4.5 JQuery3.0 的POST新增签名方式
$.post([settings])
使用方式和ajax签名方式类似，使用post方式发送ajax请求仅仅需要在上面的例子上修改一个名字。
$.post({
url : "demo1",
method : "GET",
data : {name : username},
dataType : "text",
success : function (data) {
$("#info").html(data);
},
error: function () {
alert("服务器错误");
}
});