Ajax中的XMLHttpRequest对象详解

   XMLHttpRequest对象是Ajax技术的核心。在Internet Explorer 5中，XMLHttpRequest对象以ActiveX对象引入，被称之为XMLHTTP，它是一种支持异步请求的技术。后来Mozilla、Netscape、Safari、Firefox和其余浏览器也提供了XMLHttpRequest类，虽然这些浏览器都提供了XMLHttpRequest类，但它们建立XMLHttpRequest类的方法并不相同。XMLHttpRequest使咱们可使用JavaScript向服务器提出请求并处理响应，而不阻塞用户的其余操做。

   不刷新页面就和服务器进行交互是Ajax最大的特色。这个重要的特色主要归功于XMLHttpRequest对象。使用XMLHttpRequest对象使得网页应用程序像windows应用程序同样，可以及时响应用户与服务器之间的交互，没必要进行页面刷新或者跳转，而且可以进行一系列的数据处理，这些功能可使用户的等待时间缩短，同时也减轻了服务器端的负载。

   目前XMLHttpRequest对象已经获得了大部分浏览器的支持，所以使用Ajax技术开发Web应用程序的时候通常状况下不会出现问题。不过，当开发人员肯定使用Ajax技术来开发时，仍然须要考虑用户会使用什么样的浏览器来对网站进行访问，虽然不支持XMLHttpRequest对象的浏览器占少数。

   在使用XMLHttpRequest对象向服务器发送请求和处理响应以前，必修先用JavaScript建立一个XMLHttpRequest对象，而后经过这个对象来和服务器创建请求并接收服务器返回的数据。因为XMLHttpRequest不是一个W3C标准，因此能够采用多种方法使用JavaScript来建立XMLHttpRequest的实例。Internet Explorer把XMLHttpRequest实现为一个ActiveX对象，其余浏览器（如Firefox、Safari和Opera等）把它实现为一个本地JavaScript对象。因为存在这些差异，JavaScript代码中必须包含有关的逻辑，从而使用ActiveX技术或者使用本地JavaScript对象技术来建立XMLHttpRequest的一个实例。

   正由于在不一样的浏览器中，XMLHttpRequest对象的建立方式不一样，所以在程序中建立XMLHttpRequest对象以前须要对浏览器进行判断。使用详细编写代码方式来区别浏览器类型的方式不只代码量大，并且很不方便也不灵活。在这里咱们能够换一种思路来解决，只须要检查浏览器是否提供对ActiveX对象的支持便可。若是浏览器支持ActiveX对象，就可使用ActiveX来建立XMLHttpRequest对象。不然，就须要在程序中使用本地JavaScript对象技术来建立。下面的代码展现了在不一样的浏览器中使用JavaScript代码来建立XMLHttpRequest对象的编程方法。

        function createXMLHttpRequest() { var xmlreq = false; if (window.ActiveXObject) { xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } return xmlreq; }

   咱们从上面代码中看出，建立XMLHttpRequest对象的过程比较简单。首先在createXMLHttpRequest()方法中建立了一个变量xmlreq来保存对这个对象的引用，并将其默认值设置为false。而后在这个方法中经过简单的判断，肯定究竟使用什么方法来建立对象。因为用户使用的浏览器类型不一样，代码window.ActiveXObject可能返回一个对象，也可能返回null。If条件语句根据返回的结果来判断浏览器是否能支持ActiveX控件，相应地得知浏览器是IE仍是其余浏览器类型。若是断定用户使用的是IE浏览器，则经过实例化ActiveXObject的一个实例的方法来建立XMLHttpRequest对象。使用这种方法时，参数字符串指明要建立何种类型的ActiveX对象。在本例子中，参数是Microsoft.XMLHTTP，这说明须要建立的是XMLHttpRequest的一个实例。

   若是window.ActiveXObject返回null，表示用户使用的浏览器不支持ActiveX对象，那么程序会执行else语句所指定的操做。首先判断浏览器是否把XMLHttpRequest实现为本地JavaScript对象。若是存在window.XMLHttpRequest，那么就建立XMLHttpRequest对象。最后将这个xmlreq变量返回，完成了XMLHttpRequest对象的建立过程。

因为JavaScript具备动态类型的特性，并且XMLHttpRequest对象在不一样浏览器上的实现是兼容的，全部能够用一样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例建立的方法是什么。这就大大简化了开发过程，并且在JavaScript中也没必要编写特定于浏览器的逻辑。

XMLHttpRequest对象的属性

XMLHttpRequest对象提供了许多属性，处理XMLHttpRequest时须要频繁用到这些属性，以下表所示：

属性	描述
onreadystatechange	每一个状态改变时都会触发这个事件处理程序，一般会调用一个JavaScript函数
readyState	请求的状态
responseText	服务器的响应，表示为一个串
responseXML	服务器的响应，表示为XML，这个对象能够解析为一个DOM对象
status	服务器的HTTP状态
statusText	HTTP状态的对应文本

 

下面咱们来看看这些属性和事件的详细说明。

1. readyState属性

    当XMLHttpRequest对象吧一个HTTP请求发送到服务器时将经历若干种状态。一直等待直到请求被处理，而后，它才接收一个响应。这样以来，脚本才正确响应各类状态，XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，以下表所示：

readyState取值	描述
0	描述一种“未初始化”状态。此时，已经建立了一个XMLHttpRequest对象，可是尚未初始化。
1	描述一种“发送”状态。此时，代码已经调用了XMLHttpRequest open()方法而且XMLHttpRequest已经准备好把一个请求发送到服务器。
2	描述一种“发送”状态。此时，已经经过send()方法把一个请求发送到服务器端，可是尚未收到一个响应。
3	描述一种“正在接收”状态。此时，已经接收到HTTP响应头部信息，可是消息体部分尚未彻底接收结束。
4	描述一种“已加载”状态。此时，响应已经被彻底接收。

 

2. onreadystatechange属性

不管readyState值什么时候发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值，向该方法指示不管readyState值什么时候发生改变，该对象都将激活。

3. responseText属性

这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3（正在接收）时，响应中包含客户端还未完成的响应信息。当readyState为4（已加载）时，该responseText包含完整的响应信息。

4. responseXML属性

此属性用于当接收到完整的HTTP响应时（readyState为4）描述XML响应；此时，Content-Type头部指定MIME（媒体）类型为text/xml，application/xml或以+xml结尾。若是Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。不管什么时候，只要readyState值不为4，那么该responseXML的值也为null。

其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。若是文档不能被分析（例如，若是文档不是良构的或不支持文档相应的字符编码），那么responseXML的值将为null。

5. status属性

这个属性描述了HTTP状态代码，并且其类型为short。并且，仅当readyState值为3（正在接收中）或4（已加载）时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引起一个异常。例如：status等于200表示成功，404表示未找到资源。

6. statusText属性

这个属性描述了HTTP状态代码文本，而且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引起一个异常。

XMLHttpRequest对象的方法

下表显示了XMLHttpRequest对象的一些经常使用的方法，其中描述部分介绍了这些方法的做用和意义。

方法	描述
abort()	中止当前请求
getAllResponseHeaders()	把HTTP请求的全部相应首部做为键/值对返回。
getResponseHeader("header")	返回指定首部的串值。
open("method","url")	创建对服务器的调用。method参数能够是GET、POST或PUT等；url参数能够是相对URL或绝对URL。这个方法还包括3个可选参数。
send(content)	向服务器发送请求。
setRequestHeader("header","value")	把指定首部设置为所提供的值，在设置任何首部以前必须先调用open()方法。

 

下面咱们来更详细的看看这些方法的使用。

1. abort()方法

   可使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

2. open()方法

   此方法用来和服务器之间创建链接。其完整的方法参数是

open(string method，
　　string uri，
　　boolean asynch，
　　string username，
　　string password)，

 

其中前两个参数是必要的，后面三个为可选参数。

  method参数是必须提供的，用于指定用来发送请求的HTTP方法（GET，POST，PUT，DELETE或HEAD）。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。

  uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI。换句话说，若是使用相对的URI，它将使用与浏览器解析相对的URI同样的方式被解析。

  Asynch参数指定是否请求是异步的，缺省值为true。为了发送一个同步请求，须要把这个参数设置为false。但Ajax技术的最大优势是 调用，所以若是这个参数设置为false，则将失去使用XMLHttpRequest对象的意义。对于要求认证的服务器，能够提供可选的用户名和口令参数。

 在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1（打开）而且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，若是调用open()方法而且此时readyState为4，则XMLHttpRequest对象将复位这些值。

3. send()方法

   在经过调用open()方法准备好一个请求以后，须要把该请求发送到服务器。仅当readyState值为1时，才能够调用send()方法。不然的话，XMLHttpRequest对象将引起一个异常。该请求被使用提供给open()方法的参数发送到服务器。当asynch参数为true时，send()方法当即返回，从而容许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2（发送）。当服务器响应时，在接收消息体以前，若是存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3（正在接收中）。当请求完成加载时，它把readyState设置为4（已加载）。对于一个HEAD类型的请求，它将在把readyState值设置为3后再当即把它设置为4。

   send()方法使用一个可选的参数，该参数能够包含可变类型的数据。典型地，使用它并经过POST方法把数据发送到服务器。另外，能够显式地使用null参数调用send()方法，这与不用参数调用它同样。对于大多数其它的数据类型，在调用send()方法以前，应该使用setRequestHeader()方法（见后面的解释）先设置Content-Type头部。

若是在send(content)方法中的content参数的类型为string，那么，数据将被编码为UTF-8。

若是数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。

   注意，因为调用这个方法后就把请求发出去了，因此对于XMLHttpRequest对象的设置须要在调用这个方法以前来完成。另外，对于send()方法中的那个参数，虽然是可选的，可是最好在不须要发送数据的时候也不能省略这个参数，应该将其设置成null，不然将会在Firefox中有错误。

 

4. setRequestHeader("header","value")方法

该方法用来设置请求的头部信息。当readyState值为1时，能够在调用open()方法后调用这个方法。不然，将获得一个异常。

5. getResponseHeader("header")方法

该方法用于检索响应的头部值。仅当readyState值是3或4（换句话说，在响应头部可用之后）时，才能够调用这个方法；不然，该方法返回一个空字符串。

6. getAllResponseHeaders()方法

该方法以一个字符串形式返回全部的响应头部（每个头部占单独的一行）。若是readyState的值不是3或4，则该方法返回null。