【Javascript】AJAX发送异步请求总结
1、AJAX定义
AJAX全称Asynchronous Javascript And Xml，异步的JS和XML。通过JS异步的向服务器发送请求并接收响应。
同步和异步的区别：
- 同步：客户端向服务器发送请求，在收到响应之前，客户端一直等待。
- 异步：客户端发送请求时，在收到响应之前，客户端可以做其他操作，无需一直等待。
异步请求常用的场景如下：
- 表单验证登录
- 搜索建议
- …
2、异步对象
异步对象XMLHttpRequest是AJAX的核心对象，可以代替浏览器向服务器发送异步请求并接收响应。
2.1、创建异步对象xhr
<script>
if(window.XMLHttpRequest){
//支持 XMLHttpRequest，高版本的浏览器基本都支持该方法
var xhr = new XMLHttpRequest();
}else{
//不支持XMLHttpRequest,如IE5,IE6,使用ActiveXObject创建异步对象
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
</script>
2.2、xhr的成员
2.2.1、方法
1、open(method,url,async)：创建请求
参数：method请求方式，'get'/'post'；url请求地址；async是否异步，ture异步/false同步
示例：xhr.open('post','/search',true)
2、send(body)：发送请求
参数：post请求时，body为请求数据；get请求时，不用带参数
2.2.2、属性
1、readyState：请求状态，标识当前xhr对象处于什么状态，共有如下5个状态：
0：代理被创建，但尚未初始化，未调用open()方法
1：已调用open()方法，尚未调用send()方法
2：已调用send()方法，尚未收到响应数据
3：接收响应中，已收到部分响应数据
4：完成，已收到全部响应数据。（常用）
2、responseText：响应数据
3、status：响应状态码
200：正常响应
404：请求的资源不存在
500：服务器内部错误
2.2.3、回调函数
onreadystatechange：回调函数，当xhr的readyState发生变化时出发的操作
2.3、xhr请求步骤
1、创建xhr对象
2、创建请求
3、设置回调函数
4、发送请求
示例如下：
GET请求：
var xhr = new XMLHttpRequest(); // 创建xhr对象
xhr.open('get', '/search?name=a&type=b', true); // 创建请求
xhr.onreadystatechange = function(){ // 设置回调函数
if(xhr.readyState == 4 && xhr.status == 200){
var res = xhr.responseText // 接收响应
}
}
xhr.send(); // 发送请求
POST请求：
var xhr = new XMLHttpRequest(); // 创建xhr对象
xhr.open('post', '/search', true); // 创建请求
xhr.onreadystatechange = function(){ // 设置回调函数
if(xhr.readyState == 4 && xhr.status == 200){
var res = xhr.responseText // 接收响应
}
}
xhr.setRequestHeader('content-Type', 'application/x-www-form-urlencoded');
// 设置请求头为form类型，ajax默认为"text/plain;charset=utf-8"
xhr.send(body); // 发送请求，数据格式：k1=v1&k2=v2...
3、JQuery支持AJAX
3.1、$.get()
通过get方式发送异步请求
语法如下：
$.get( URL [, data ] [, callback ] [, dataType ] )
// URL:请求地址
// data：可选，发给服务器的字符串或key/value键值对。如："name=abc&age=18"或{name:"abc","age":18}
// callback：可选，请求成功后执行的回调函数。
// dataType：可选，从服务器返回的数据类型。xml/json/script/text/html
示例：
前端：
<button id="btn">GET请求button>
<div id="show">div>
<script>
$(function() { // 文档加载完毕
var data = {name: "xxx", age:20};
// 也可以是var data = "name=xxx&age=20"
$("#btn").click(function() {
$.get('/index/get', data, function(params) { // ajax发get请求
console.log(params); // params为服务器返回的数据，json串自动转为对象
// {name: 'abc', age: 18}
msg = 'name is ' + params.name;
msg += ', age is ' + params.age;
$("#show").html(msg);
}, 'json')
})
})
script>
后端返回：
{"name": "abc", "age": 18}
点击按钮后结果如下：
name is abc, age is 18
3.2、$.post()
同$.get()，示例如下：
前端：
{% csrf_token %}
<div>
name：<input type="text" id="name">
div>
<div>
password：<input type="password" id="pwd">
div>
<div>
<button id="btn">提交button>
div>
<script>
$(function() {
$("#btn").click(function() {
var data = {
name: $("#name").val(),
password: $("#pwd").val(),
csrftoken: $("[name=csrfmiddlewaretoken]").val()
};
$.post("/index/post", data, function(params) { // 将data通过post发给服务器
console.log(params); // 返回的json串会自动转为json对象
}, 'json');
})
})
script>
3.3、$.ajax()
$.ajax()参数为对象，对象中的属性说明示例如下：
<button id="btn">提交</button>
<div id="wait" hidden><span>请等待...</span></div>
$(function() {
$("#btn").click(function() {
$.ajax({
url: '/index/ajax', // 1、请求url地址
type: 'get', // 2、请求方式
data: null, // 3、传递到服务器端的参数
dataType: 'json', // 4、服务器返回的数据类型
async: true, // 5、是否为异步请求
success: function(params) {
console.log(params);
$("#btn").removeAttr('disabled'); // 请求成功，恢复按钮可用
$("#wait").css("display", "none"); // 隐藏等待标签
}, // 6、回调函数，请求和响应成功后执行的操作
error: function() {
alert("服务器异常！");
$("#btn").removeAttr('disabled');
$('#wait').hide();
}, // 7、回调函数，请求响应失败执行的操作
beforeSend: function() {
$("#btn").attr('disabled', 'disabled'); // 避免重复点提交
$('#wait').show(); // 加载等待标签
} // 8、回调函数，发送ajax请求之前执行的操作，如果return false，则终止请求
})
})
})