【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，则终止请求
        })
    })
})