Ajax

一、XMLHttpRequest 对象
在了解 AJAX 之前先来简单了解一下什么是 XMLHttpRequest 对象。

1、什么是 XMLHttpRequest 对象？
XMLHttpRequest 对象用于在后台与服务器交换数据，使用 XMLHttpRequest 对象可以：

在不重新加载页面的情况下更新网页。
在页面已加载后从服务器请求数据。
在页面已加载后从服务器接收数据。
在后台向服务器发送数据。
所有现代的浏览器都支持 XMLHttpRequest 对象。

2、创建 XMLHttpRequest 对象。
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

var xmlhttp = new XMLHttpRequest();
console.log(xmlhttp);

可以直接在浏览器中打印一下这个对象，可以看到它有很多属性和方法。

对于上面的分析：response,responseText等是请求过来的数据；

3、向服务器发送请求
向服务器发送请求，可以使用 XMLHttpRequest 对象的 open() 和 send() 方法，比如我们要请求 test.txt 中的数据：

3.1、open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST。
url：文件在服务器上的位置。
async：true（异步）或 false（同步）。

3.2、send(string)
将请求发送到服务器。
string：仅用于 POST 请求。

xmlhttp.open("GET", "test.txt", true);
xmlhttp.send();

二、AJAX

AJAX：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

async 属性是用 true（异步）还是 false（同步）？上边说了，AJAX 就是异步的 JavaScript 和 XML，如果要使用 AJAX，那就是 true。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本。
当响应就绪后对响应进行处理。

1、async = true
当使用 async = true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数，例：

```python

```handlebars
// 创建 XMLHttpRequest 对象
var xmlhttp;
if (window.XMLHttpRequest) {
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
} else {
    // IE6, IE5 浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
};
// 请求被发到服务器时，执行一些基于响应的任务
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log(xmlhttp.responseText); // 这是请求过来的数据。
    };
};
// 向服务器发送请求
xmlhttp.open("GET", "test.txt", true);
xmlhttp.send();

2、async = false
将 open() 中的第三个参数改为 false，并且去掉 onreadystatechange 方法，将代码放到 send() 方法后边即可：

// 创建 XMLHttpRequest 对象
var xmlhttp;
if (window.XMLHttpRequest) {
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
} else {
    // IE6, IE5 浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
};
// 向服务器发送请求
xmlhttp.open("GET", "test.txt", false);
xmlhttp.send();
console.log(xmlhttp.responseText); // 这是请求过来的数据。

3、onreadystatechange
接下来看一下 onreadystatechange 事件的更多内容。

每当 readyState 改变时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息，下面是 readyState 从 0 到 4 的状态信息：

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status：

200: “OK”
404: 未找到页面

例子：

var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
};
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 0) {
        console.log("请求未初始化");
    };
    if (xmlhttp.readyState == 1) {
        console.log("服务器连接已建立");
    };
    if (xmlhttp.readyState == 2) {
        console.log("请求已接收");
    };
    if (xmlhttp.readyState == 3) {
        console.log("请求处理中");
    };
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log("请求已完成，且响应已就绪");
        console.log(xmlhttp.responseText);
    };
    if (xmlhttp.status == 404) {
        console.log("未找到页面");
    };
};
xmlhttp.open("GET", "test.txt", true);
xmlhttp.send();

4、使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数，我们可以将 AJAX 封装起来以便多个地方使用：

三、jQuery AJAX

1、jQuery AJAX load() 方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

例子格式：
$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$("#box").load('test.txt');

回调函数
可选的== callback ==参数规定当 load() 方法完成后所要允许的回调函数，回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
我们先来打印一下这三个参数：

$("#box").load('test.txt', function(responseTxt, statusTxt, xhr) {
    console.log(responseTxt); // 这是请求过来的数据。
    console.log(statusTxt);  // success
    console.log(xhr);
});

2、GET
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

GET：从指定的资源请求数据。
例子格式：
$.get(URL,callback);

3、POST

POST：向指定的资源提交要处理的数据。
例子格式：
$.post(URL,data,callback);

4、jQuery AJAX 模板

$.ajax({
    url: '',
    type: 'GET',
    async: true,
    // timeout: 5000,
    dataType: '',
    beforeSend: function(xhr) {
        console.log('发送前。');
    },
    success: function(data, textStatus, jqXHR) {
        console.log('发送成功。');
        console.log(data);
    },
    error: function(xhr, textStatus) {
        console.log('发送失败。');
    }
});

只用于方便学习，别无它用！
作者：LK30265
链接：https://www.jianshu.com/p/1b2341df6f50
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。