JavaScript--20 深入理解 Ajax

Ajax 技术的核心是XMLHttpRequest 对象（简称XHR），XHR能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。
虽然名字中包含XML 的成分，但Ajax 通信与数据格式无关；这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML 数据。

XMLHttpRequest 对象

IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 对象，可以像下面这样使用XMLHttpRequest构造函数（IE7-的版本这里就不写了）

var xhr = new XMLHttpRequest();

XHR的用法

在使用XHR 对象时，要调用的第一个方法是open()，它接受3 个参数：
要发送的请求的类型（"get"、"post"等）、请求的URL 和表示是否异步发送请求的布尔值（值为 false 时为同步请求）。

同步请求

xhr.open("get", "tet.json", false);

有关这行代码，需要说明两点：
一是URL相对于执行代码的当前页面（当然也可以使用绝对路径）；
二是调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。
要发送特定的请求，必须像下面这样调用send()方法：

xhr.open("get", "tet.json", false);
xhr.send(null);

这里的send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必需的。
调用send()之后，请求就会被分派到服务器。
由于这次请求是同步的，JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后，响应
的数据会自动填充XHR 对象的属性，相关的属性简介如下。

responseText：获得字符串形式的响应数据。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将获得 XML 形式的响应数据。对于非XML 数据而言，responseXML 属性的值将为null。
status：响应的HTTP 状态。
statusText：HTTP 状态的说明。

在接收到响应后，第一步是检查status 属性，以确定响应已经成功返回。
一般来说，可以将HTTP状态代码为200作为成功的标志。此时，responseText 属性的内容已经就绪。此外，状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本，也意味着响应是有效的。为确保接收到适当的响应，应该像下面这样检查上述这两种状态代码：

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
   
	console.log(xhr,'\n'+xhr.response);
} else {
   
	console.log("请求错误: " + xhr.status);
}

所以一个完整的同步请求代码如下：

var xhr = new XMLHttpRequest();
xhr.open('get','./test.json',false);
xhr.send(null);

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
   
	console.log(xhr,'\n'+xhr.response);
} else {
   
	console.log("请求错误: " + xhr.status);
}

异步请求 - onreadystatechange 事件

xhr.open("get", "tet.json", true);

open() 方法的第三个参数为 true 时，执行的是异步请求，多数情况下，我们还是要发送异步请求，才能让 JavaScript继续执行而不必等待响应。此时，可以检测XHR 对象的readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。

0：未初始化。尚未调用open()方法。
1：启动。已经调用open()方法，但尚未调用send()方法。
2：发送。已经调用send()方法，但尚未接收到响应。
3：接收。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要readyState 属性的值由一个值变成另一个值，都会触发一次readystatechange 事件。可以利用这个事件来检测每次状态变化后readyState 的值。通常，我们只对readyState 值为4 的阶段感兴趣，因为这时所有数据都已经就绪。不过，必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。下面来看一下异步请求的写法：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
   
	console.log(xhr.readyState);