1. Ajax 请求简介
ajax（Asynchronous JavaScript and XML）：是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新。这就意味着可以在 不重新加载整个网页的情况下，对网页的局部进行更新
2. 原生 JS 中的 Ajax 请求流程
2.1. 创建异步对象
var xhr = new XMLHttpRequest();
2.2. 调用open() 方法设置请求行
设置请求行 open，也就是设置请求方式及请求 URL
// get 请求如果有参数，就需要在 url 后面拼接参数
xhr.open('GET', "xxxxxx?username="+name);
// post 如果有参数，就在请求体中传递
xhr.open('POST', URL);
// post 方式发送数据，需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
2.2.1. open() 方法参数
语法：open(method, url, async)，方法有 3 个参数
method请求类型：对应的取值是GET和POSTurl：文件在服务器上的位置即接口路径async：默认值true异步，false为同步async为true时，服务器的请求是异步的，也就是脚本执行send()方法后不等待服务器的执行结果，继续执行脚本代码async为false时，服务器的请求是同步的， 也就是脚本执行send()方法后等待服务器的执行结果，若在等待过程中超时，则不再等待，继续执行后面的脚本代码
2.3. 调用 send() 方法发送数据
// get的参数在 url 拼接了，所以不需要在这个函数中设置
xhr.send(null);
// post 必须有参数
xhr.send('a=100&b=200&c=300');
send(string)：请求发送到服务器，仅用于POST请求
2.4. 设置回调函数
xhr.onreadystatechange = callback；
2.5. 完整的请求案例
2.5.1. ajax-get 方式请求案例
var xhr = new XMLHttpRequest();
xhr.open("get","xxxxxx?username="+name);
xhr.send(null);
// 回调函数
xhr.onreadystatechange = function() {
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
document.querySelector(".showmsg").innerHTML = xhr.responseText;;
}
}
2.5.2. ajax-post 方式请求案例
var xhr = new XMLHttpRequest();
xhr.open("post","xxxxxx");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
// 回调函数
xhr.onreadystatechange = function() {
// 判断服务器是否响应，判断异步对象的响应状态
if(xhr.status == 200 && xhr.readyState == 4){
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}
2.5.3. Ajax 中的 readyState 属性
0：未初始化，尚未调用open()方法1：启动，已经调用open()方法，但尚未调用send()方法2：发送，已经调用send()方法，但尚未接收到响应3：接收，已经接收到部分响应数据4：完成，已经接收到全部响应数据，而且已经可以在客户端使用了
2.5.4. Ajax 中的状态码 status 属性
200-300：表示响应成功400：请求参数错误401：无权限访问404：访问的资源不存在
3. jQuery 中的 Ajax 请求
3.1. $.get() 请求
$.get() 是以 GET 方式实现 Ajax 请求的，在提交短数据（数据量不能太多，最大 4KB）时可用
$.get(
url, // 必需：将请求发送到哪里的URL链接
data, // 可选：连同请求发送到服务器的数据【俗称：参数】
success( // 可选：当请求成功时运行的函数
response, // 包含来自请求的结果数据
status, // 包含请求的状态
xhr // 包含 XMLHttpRequest 对象
),
dataType // 可选：预计的服务器响应的数据类型
// 默认jQuery 将智能判断。可能的类型有："xml"、"html"、"text"、"script"、"json"和"jsonp"
)
3.1.1. 常用示例
// 1、只有路径
$.get("XXX/XXXXXX");
// 2、路径+参数【两个参数：姓名和年龄】
$.get("XXX/XXXXXX", {name: "John",age: "20"});
// 3、路径+参数+回调方法
$.get("XXX/XXXXXX", {name: "John",age: "20"},function(data){
alert("返回的数据是："+data);
});
// 4、路径+参数+回调方法+返回值类型【json】
$.get("XXX/XXXXXX", {name: "John",age: "20"},function(data){
alert("返回的数据是："+data);
},"json"));
3.2. $.post() 请求
$.post() 是以 POST 方式实现 Ajax 异步请求的
$.post(
url, //必需：将请求发送到哪里的URL链接
data, //可选：连同请求发送到服务器的数据【俗称：参数】
success( //可选：当请求成功时运行的函数
response, //包含来自请求的结果数据
status, // 包含请求的状态
xhr //包含 XMLHttpRequest 对象
),
dataType //可选：预计的服务器响应的数据类型
//默认jQuery 将智能判断。可能的类型有："xml"、"html"、"text"、"script"、"json"和"jsonp"
)
3.2.1. 常用示例
// 1、只有路径
$.post("XXX/XXXXXX");
// 2、路径+参数【两个参数：姓名和年龄】
$.post("XXX/XXXXXX", {name: "John",age: "20"});
// 3、路径+参数+回调方法
$.post("XXX/XXXXXX", {name: "John",age: "20"},function(data){
alert("返回的数据是："+data);
});
// 4、路径+参数+回调方法+返回值类型【json】
$.post("XXX/XXXXXX", {name: "John",age: "20"},function(data){
alert("返回的数据是："+data);
},"json"));
3.3. $.ajax() 请求
$.ajax() 方法用于执行 Ajax 的请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求
$.ajax({
url : 'XXXXXX/XXXXXXXX',// 请求链接
type:"POST", // 请求方式POST或GET
async:true, // 请求是否异步：默认为异步
data : { // 参数
id : $("#id").val(),
name: $("#name").val()
},
dataType : 'json', // 返回值的数据类型
success : function(map) {
alert("执行成功后的回调函数");
}
});
