深入理解JavaScript中Ajax

Ajax不是一种新的编程语言，而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下，与服务器交换数据。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。

XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

在浏览器中创建对象(只支持IE7及更高的版本)：

var xhr = new XMLHttpRequest(); 

XHR的用法

首先要介绍的是open()方法。它接收3个参数：

•要发送的请求的类型(POST、GET等)

•请求的URL

•表示是否异步发送请求的布尔值

调用open()示例：

xhr.open("get", "index.jsp", false);
针对index.jsp的GET请求。URL相对于执行代码的当前页面；调用open()方法并不会真正发送请求，只是启动一个请求以备发送。

调用send()发送请求：

xhr.send(null);

send()接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null。

相应数据会填充到XHR对象的相关属性：

•responseText:作为响应主体被返回的文本

•responseXML:作为响应的内容类型是“text/xml”或“application/xml”

•status:响应的HTTP状态

•statusText:HTTP状态的说明

在接收响应后，首先检查status属性，确定响应已经返回，一般200作为成功的标志。状态码304表示资源没有修改，可以直接使用浏览器中缓存的版本。

为了接收到合适的响应，应该以如下方式检测两种状态码：

xhr.open("get", "index.jsp", false);xhr.send(null);if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {alert(xhr.responseText);} else {alert("Request was unsuccessful: " + xhr.status);}

通过检测readyState属性，可以确定请求/响应过程的当前活动阶段。

•0：未初始化。未调用open()方法

•1：启动。已经调用open()方法，未调用send()方法

•2：发送。已经调用send()方法，未接收到响应

•3：接收。已经接收到部分数据

•4：完成。已经接收到全部数据，可以在客户端使用

readyState属性的值发生变化时，都会触发一次readystatechange事件。在调用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("请求成功：" + xhr.status);}}};xhr.open("get", "index.jsp", true);xhr.send(null);