总之，Ajax不需要刷新页面就可以从服务器获取数据。注意，虽然Ajax被翻译成异步JavaScript和XML，但是得到的数据肯定是XML数据，现在服务器返回的文件都是JSON模式。

完整的Ajax请求历史

完整的Ajax请求历史

建立XMLHttpRequest实例
发出HTTP请求
吸收服务器传回的数据
更新网页数据

让我们看一下红宝书中给出的一个提议的Ajax请求的例子，API的用法在下一章给出。

var xhr = new XMLHttpRequest(); // 建立XMLHttpRequest实例xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ // 判断请求响应历程阶段，4 阶段代表已吸收到数据 if (xhr.status gt;=200 amp;amp; xhr.status lt; 300 || xhr.status == 304) { // 校验HTTP状态码 console.log(xhr.responseText); // 输出响应的文本 } else { console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码 } }};xhr.open(‘get’, ‘example.txt’, true); // 初始化xhr实例，或者说启动请求xhr.send(null); // 设置HTTP请求携带参数，null为不带参数

Ajax请求过程的详细说明

1.建立XMLHttpRequest的实例

从上面的代码可以看出，创建XHR实例的方法如下:

var xhr = new XMLHttpRequest();

2.发送HTTP请求

建立实例后，首先需要使用XHR的open()模式启动一个HTTP请求，该模式接受三个参数。

XMLHttpRequest.open(method, url, isAsync)// 例如xhr.open(‘get’, ‘http://www.baidu.com’, true)

第一个参数是http请求的使用方式，比如(‘ get ‘，’ post ‘等。)，第二个参数是请求的url，第三个参数表示是否异步发送请求(可选)。盗用open()模式后，会启动一个http请求，但不会立即发送请求，处于待机状态。需要注意的是，请求的url必须与请求的发起方在同一个域内，即协议、域名、端口号要一致，跨域请求要使用其他方法。那么盗用send()方法就会发送这个http请求。

xhr.open(‘get’, ‘http://www.baidu.com’, true)xhr.send(null)

Send()模式接受一个参数，这个参数是http请求发送的数据(通常用在’ post ‘模式)。如果为空，则表示不会发送任何数据。此时，一个异步http请求被发送到服务器。

3.吸收服务器发回的数据

3.1发送同步请求

如果open模式的第三个参数设置为false，则这是一个同步请求。收到服务器的响应后，响应数据会自动填充到XHR工具的属性中，主要包括以下四项:

关键词网站排名技巧，看网站如何提高关键词排名。

responseText:作为响应体返回的文本。
responseXML:如果响应的Content-Type字段的值为
text/xml或application/xml，则可以吸收响应返回的XML文档。
status: HTTP状态代码。
statusText: HTTP状态代码描述。

客户端收到上述信息时，首先要判断HTTP状态码，确认响应是否成功。状态码在200到300之间，表示请求成功，304表示请求的资源没有被修改，可以使用浏览器内陆缓存。如果成功，您可以在响应消息的正文中获得数据。

xhr.open(‘get’, ‘http://www.baidu.com’, false)xhr.send(null)if (xhr.status gt;=200 amp;amp; xhr.status lt; 300 || xhr.status == 304) { // 校验HTTP状态码 console.log(xhr.responseText); // 输出响应的文本} else { console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码}

3.2发送异步请求

如果open模式的第三个参数设置为true，则是异步请求。然后需要通知程序异步请求的效果是否返回。XHR工具中的readyState属性表示整个请求/响应过程的阶段，它有五个值，分为五个相应的阶段:

0：未初始化。未挪用open()方式。
1：启动。已经挪用open()方式，但未挪用send()方式。
2：发送。已挪用send()方式，但未收到响应。
3： 吸收。已经吸收到部门响应数据。
4：完成。已经接受到所有响应数据。

每次readyState的值发生变化时，city都会触发一个readStatechange事件。我们在readStatechange()上定义了一个事件处理函数，监听readyState == 4状态，这样就可以知道所有的响应数据都已经收到了，进行下一步操作。然后是文章开头给出的代码:

var xhr = new XMLHttpRequest(); // 建立XMLHttpRequest实例xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ // 判断请求响应历程阶段，4 阶段代表已吸收到数据 if (xhr.status gt;=200 amp;amp; xhr.status lt; 300 || xhr.status == 304) { // 校验HTTP状态码 console.log(xhr.responseText); // 输出响应的文本 } else { console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码 } }};xhr.open(‘get’, ‘example.txt’, true); // 初始化xhr实例，或者说启动请求xhr.send(null); // 设置HTTP请求携带参数，null为不带参数

在XHR补三件有用的事

超时很重要

当在设定的时间后没有收到响应，就会触发超时事件，然后ontimeout事件处理程序就会被盗用。同时，超时也是XHR的一个属性，用来设置这个时间阈值。以下是用法:

xhr.ontimeout = function() { alert(‘timeout!’)}xhr.open(‘get’, ‘http://www.baidu.com’, true)xhr.timeout = 1000 // 时间阈值设为1秒xhr.send(null)

负载很重要

load事件用于简化readState值的判断。当所有的响应数据都被吸收后(即readState == 4)，将触发load事件，onload事件处理程序将用于后续操作。onload将吸收一个事件工具，它的目标属性是XHR工具。虽然我们可以在不传入该参数的情况下定义该事件处理函数，但是让我们来看看下面的用法:

var xhr = new XMLHttpRequest()xhr.onload = function () { if(xhr.status gt;=200 amp;amp; xhr.status lt; 300 || xhr.status == 304) { console.log(xhr.responseText); // 输出响应的文本 } else { console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码 }}xhr.open(‘get’, ‘http://www.baidu.com’, true)xhr.send(null)

所以不用担心readyState值的转换。虽然如果要对特定的readyState值做一些逻辑处理，还是要用前面的方法。

进步很重要

这是一个非常有用的事件。在浏览器吸收数据的时代会周期性触发progress事件，代表整个请求过程的进度。它的事件处理程序onprogress吸收了一个事件工具，event.target是一个XHR工具，event还有另外三个属性:

lengthComputable：Boolean值，进度信息是否可用。
position：已经吸收到的字节数。
totalSize：总共要吸收的字节数，被界说在响应报文的Content-Length字段中。

如果响应消息中有一个Content-Length字段，那么我们就可以计算出当前时刻响应数据的加载进度，这也是我们之前看到的一道面试题。请看下面的代码:

xhr.onprogress = function(event) { if(event.lengthComputable) { console.log(`Received: ${(event.position/event.totalSize).toFixed(4)*100}%`); }}

还有很多其他有用的API，比如FormData表单序列化，overrideMimeType()重写XHR响应的MIME类型等。，后面会逐步更新。