JS-Learning | Ajax的原理和实现

Ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。换句话说，可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。值得注意的是虽然名字中包含XML的成分，但Ajax通信与数据格式无关，取得的数据不一定是XML数据。

XMLHttpRequest对象

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象使用XMLHttpRequest构造函数：

var xhr = new XMLHttpRequest();

XHR的用法

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

xhr.open("get", "example.php", false);

这行代码会启动一个针对example.php的GET请求。其中URL相对于执行代码的当前页面（也可以使用绝对路径），但是调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。
要发送特定的请求，则可以调用send()方法：

xhr.open("get", "example.txt", false);
xhr.send(null);

这里的send()方法接受一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器是必须的。调用send()后，请求就会被分派到服务器。
在收到响应后，响应的数据会自动填充XHR对象的属性，相关属性如下：

• responseText：作为响应主体被返回的文本。
• responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM文档。
• status：响应的HTTP状态。
• statusText：HTTP状态的说明。

在接受到响应后，第一步是检查status属性，以确定响应是否已经成功返回。一般来说，可以将HTTP状态码为200作为成功的标志。此时，responseText属性的内容已经就绪，内容类型正确的情况下，responseXML也可以访问了。如果状态代码为304表示请求的资源并没有修改，可以直接使用浏览器中缓存的版本，响应也是有效的。

xhr.open("get", "example.txt", false);
xhr.send(null);

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
	alert(xhr.responseText);
} else {
	alert("Response was unsuccessful: " + xhr.status);
}

readyState属性

上述情况是发送同步请求，但我们大多数情况下，都是发送异步请求，让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 () {
	if (xhr.readyState == 4) {
		if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
			alert(xhr.responseText);
		} else {
			alert("Request was unsuccessful: " + xhr.status);
		}
	}
};
xhr.open("get", "example.txt", true);
xhr.send(null)

另外，在接受到响应之前可以调用abort()方法来取消异步请求，如下所示：

xhr.abort();

调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求后，还应该对XHR对象进行解引用操作。由于内存原因，不建议重用XHR对象。