【Javascript】AJAX发送异步请求总结

AJAX全称Asynchronous Javascript And Xml，异步的JS和XML。通过JS异步的向服务器发送请求并接收响应。

同步和异步的区别：

• 同步：客户端向服务器发送请求，在收到响应之前，客户端一直等待。
• 异步：客户端发送请求时，在收到响应之前，客户端可以做其他操作，无需一直等待。

异步请求常用的场景如下：

• 表单验证登录
• 搜索建议
• …

异步对象XMLHttpRequest是AJAX的核心对象，可以代替浏览器向服务器发送异步请求并接收响应。

1、open(method,url,async)：创建请求
	参数：method请求方式，'get'/'post'；url请求地址；async是否异步，ture异步/false同步
	示例：xhr.open('post','/search',true)

2、send(body)：发送请求
	参数：post请求时，body为请求数据；get请求时，不用带参数

1、readyState：请求状态，标识当前xhr对象处于什么状态，共有如下5个状态：
	0：代理被创建，但尚未初始化，未调用open()方法
	1：已调用open()方法，尚未调用send()方法
	2：已调用send()方法，尚未收到响应数据
	3：接收响应中，已收到部分响应数据
	4：完成，已收到全部响应数据。（常用）
2、responseText：响应数据
3、status：响应状态码
	200：正常响应
	404：请求的资源不存在
	500：服务器内部错误

onreadystatechange：回调函数，当xhr的readyState发生变化时出发的操作

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...

通过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

示例：

前端：

GET请求

后端返回：

{"name": "abc", "age": 18}

点击按钮后结果如下：

name is abc, age is 18

同$.get()，示例如下：

前端：

{% csrf_token %}

    name：


    password：


    提交

$.ajax()参数为对象，对象中的属性说明示例如下：

提交

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