ajax技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。

 

XMLHttpRequest 对象

 

Ajax 技术的核心是 XMLHttpRequest 对象（简称 XHR ）

 

创建 XHR 对象

 

var xhr = new XMLHttpRequest（）;

 

XHR的用法 

 

要调用的第一个方法是 open（） ，它接受 3 个参数：要发送的请求的类型（"get" 、 "post" 等）、请求的 URL 和表示是否异步发送请求的布尔值。

 

xhr.open（"get", "example.php", false）;

 

xhr.send（null）;

 

这里的 send（） 方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null ，因为这个参数对有些浏览器来说是必需的。调用 send（） 之后，请求就会被分派到服务器。

 

在收到响应后，响应的数据会自动填充 XHR 对象的属性，相关的属性简介如下。

 

responseText：作为响应主体被返回的文本。

 

responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的 XML DOM 文档。

 

status：响应的 HTTP 状态。

 

statusText：HTTP 状态的说明。

 

xhr.open（"get", "example.txt", false）; 

 

xhr.send（null）; 

 

if （（xhr.status >= 200 && xhr.status < 300） || xhr.status == 304）{ 

 

 alert（xhr.responseText）; 

 

} else { 

 

 alert（"Request was unsuccessful: " + xhr.status）; 

 

}

 

像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让 JavaScript 继续执行而不必等待响应。此时，可以检测 XHR 对象的 readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。

 

0：未初始化。尚未调用 open（）方法。

 

1：启动。已经调用 open（）方法，但尚未调用 send（）方法。

 

2：发送。已经调用 send（）方法，但尚未接收到响应。

 

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

 

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

 

var xhr = createXHR（）; 

 

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）;

 

function createXHR（）{ 

 

 if （typeof XMLHttpRequest != "undefined"）{ 

 

 return new XMLHttpRequest（）; 

 

 } else if （typeof ActiveXObject != "undefined"）{ 

 

 if （typeof arguments.callee.activeXString != "string"）{ 

 

 var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", 

 

 "MSXML2.XMLHttp"], 

 

 i, len; 

 

 for （i=0,len=versions.length; i < len; i++）{ 

 

 try { 

 

 new ActiveXObject（versions[i]）; 

 

 arguments.callee.activeXString = versions[i]; 

 

 break; 

 

 } catch （ex）{ 

 

 //跳过

 

 } 

 

 } 

 

 } 

 

 return new ActiveXObject（arguments.callee.activeXString）; 

 

 } else { 

 

 throw new Error（"No XHR object available."）; 

 

 } 

 

}