1.AJAX简介

AJAX是访问网页的常规方法，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。

具体来说，AJAX 包括以下几个步骤。

1. 创建 XMLHttpRequest 实例

2. 发出 HTTP 请求

3. 接收服务器传回的数据

4. 更新网页数据

AJAX可以利用JS自动发送http的get及post请求，然后将服务端发送的请求接收，然后更新页面数据。（特点：页面无刷新）

概括起来，就是一句话，AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。

XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

2.AJAX访问页面的操作

2.1创建XMLHttpRequest实例

MLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

var xhr = new XMLHttpRequest();

2.1.1open（）的使用

一旦新建实例，就可以使用open()方法指定建立 HTTP 连接的一些细节。

xhr.open('GET', 'http://www.example.com/page.php', true);
#GET字段：表示请求方法（一般为GET或post）， 后面跟你请求的网址，选择传输方式是否为异步传输一般情况下均为true。
#若为GET请求AJAX可以不用发送请求体，POST请求需要发送请求体

上面代码指定使用 GET 方法，跟指定的服务器网址建立连接。第三个参数true，表示请求是异步的。

2.1.2指定回调函数，监听通信状态的变化

xhr.onreadystatechange = handleStateChange;function handleStateChange() {// ...
}

上面代码中，一旦XMLHttpRequest实例的状态发生变化，就会调用监听函数handleStateChange

2.1.3send（）的使用

最后使用send()方法，实际发出请求。

xhr.send(null);

上面代码中，send()的参数为null，表示发送请求的时候，请求方法为GET不带有数据体。如果发送的是 POST 请求，这里就需要指定数据体。

AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

注意，AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错

下面是XMLHttpRequest对象简单用法的完整例子。

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){ //onreadystatechang在你进行open通信时，若open请求成功即XMLHttpRequest实例的状态发生变化，监听函数handleStateChange将被触发// 通信成功时，状态值为4if (xhr.readyState === 4){         //状态码4表示：表示服务器返回的数据已经完全接收，或者本次接收已经失败。if (xhr.status === 200){         //此为http服务端返回的响应码200（表示http请求成功）console.log(xhr.responseText);} else {console.error(xhr.statusText);}}
};xhr.onerror = function (e) {         //访问出错进行报错console.error(xhr.statusText);
};xhr.open('GET', 'https://127.0.0.1/www/css/form.html', true);
#GET字段：表示请求方法（一般为GET或post）， 后面跟你请求的网址，选择传输方式是否为异步传输一般情况下均为true。
xhr.send(null);

2.2调用XMLHttpRequest 实例

   #其中./xml.js为实例文件

请求结果

直接请求到所请求网址的源码

2.3如果将网址写成不存在的网页则会报错

结果：

3.XMLHttpRequest 的实例属性

3.1 XMLHttpRequest.readyState

• 0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。

• 1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。

• 2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。

• 3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。

• 4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

3.2 XMLHttpRequest.onreadystatechange

XMLHttpRequest.onreadystatechange属性指向一个监听函数。readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

另外，如果使用实例的abort()方法，终止 XMLHttpRequest 请求，也会造成readyState属性变化，导致调用XMLHttpRequest.onreadystatechange属性。

3.3 XMLHttpRequest.responseType

XMLHttpRequest.responseType属性是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用open()方法之后、调用send()方法之前，设置这个属性的值，告诉浏览器如何解读返回的数据。如果responseType设为空字符串，就等同于默认值text。

XMLHttpRequest.responseType属性可以等于以下值。

• "（空字符串)“：等同于text，表示服务器返回文本数据。

• "arraybuffer"：ArrayBuffer 对象，表示服务器返回二进制数组。

• "blob"：Blob 对象，表示服务器返回二进制对象。（一般用来发送给图片）

• "document"：Document 对象，表示服务器返回一个文档对象。

• "json"：JSON 对象。

• "text"：字符串。

上面几种类型之中，text类型适合大多数情况，而且直接处理文本也比较方便。document类型适合返回 HTML / XML 文档的情况，这意味着，对于那些打开 CORS 的网站，可以直接用 Ajax 抓取网页，然后不用解析 HTML 字符串，直接对抓取回来的数据进行 DOM 操作。blob类型适合读取二进制数据，比如图片文件。

3.4 XMLHttpRequest.responseURL

XMLHttpRequest.responseURL属性是字符串，表示发送数据的服务器的网址。

注意，这个属性的值与open()方法指定的请求网址不一定相同。如果服务器端发生跳转，这个属性返回最后实际返回数据的网址。另外，如果原始 URL 包括锚点（fragment），该属性会把锚点剥离。

首先使用 header("location: 跳转网址")设置一个form.php网页跳转的地址。

使用XMLHttpRequest.responseURL属性，打印form.php跳转地址

var xhr = new XMLHttpRequest();
xhr.open('GET', './form.php', true);
xhr.onload = function () {// 返回 http://example.com/testconsole.log(xhr.responseURL);
};
xhr.send(null);

成功打印出跳转的地址

3.5 XMLHttpRequest.status，XMLHttpRequest.statusText（状态码）

XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。

• 200, OK，访问正常

• 301, Moved Permanently，永久移动

• 302, Moved temporarily，暂时移动

• 304, Not Modified，未修改

• 307, Temporary Redirect，暂时重定向

• 401, Unauthorized，未授权

• 403, Forbidden，禁止访问

• 404, Not Found，未发现指定网址

• 500, Internal Server Error，服务器发生错误

基本上，只有2xx和304的状态码，表示服务器返回是正常状态。

3.6 XMLHttpRequest.timeout，XMLHttpRequestEventTarget.ontimeout

XMLHttpRequest.timeout属性返回一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。如果该属性等于0，就表示没有时间限制。

XMLHttpRequestEventTarget.ontimeout属性用于设置一个监听函数，如果发生 timeout 事件，就会执行这个监听函数0。（返回请求超时。）

一般用于检测服务器产生的访问问题。

实例：

var xhr = new XMLHttpRequest();
var url = 'https://www.google.com';xhr.ontimeout = function () {console.error('The request for ' + url + ' timed out.');
};xhr.onload = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {// 处理服务器返回的数据} else {console.error(xhr.statusText);}}
};xhr.open('GET', url, true);
// 指定 10 秒钟超时
xhr.timeout = 10 * 1000;
xhr.send(null);

返回请求超时

3.7 事件监听属性

XMLHttpRequest 对象可以对以下事件指定监听函数。

• XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数

• XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数

• XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数

• XMLHttpRequest.onerror：error 事件（请求失败）的监听函数

• XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数

• XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数

• XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

3.8 XMLHttpRequest.open()

XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。

• method：表示 HTTP 动词方法，比如GET、POST、PUT、DELETE、HEAD等。

• url: 表示请求发送目标 URL。

• async: 布尔值，表示请求是否为异步，默认为true。如果设为false，则send()方法只有等到收到服务器返回了结果，才会进行下一步操作。该参数可选。由于同步 AJAX 请求会造成浏览器失去响应，许多浏览器已经禁止在主线程使用，只允许 Worker 里面使用。所以，这个参数轻易不应该设为false。

• user：表示用于认证的用户名，默认为空字符串。该参数可选。

• password：表示用于认证的密码，默认为空字符串。该参数可选。

注意，如果对使用过open()方法的 AJAX 请求，再次使用这个方法，等同于调用abort()，即终止请求。

下面发送 POST 请求的例子。

3.9 XMLHttpRequest.send()

XMLHttpRequest.send()方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。