全面剖析XMLHttpRequest对象

1、.：.；一、 引言异步JavaScript与XML(AJAX)是一个公用术语，用于实如今客户端脚本与效力器之间的数据交互过程。这一技术的优点在于，它向开发者提供了一种从Web效力器检索数据而不用把用户当前正在察看的页面回馈给效力器。与现代阅读器的经过存取阅读器DOM构造的编程代码(JavaScript)动态地改动被显示内容的支持相配合，AJAX让开发者在阅读器端更新被显示的HTML内容而不用刷新页面。换句话说，AJAX可以使基于阅读器的运用程序更具交互性而且更类似传统型桌面运用程序。Google的Gmail和Outlook Express就是两个运用AJAX技术的我们所熟习的例子。而且，AJA

2、X可以用于任何客户端脚本言语中，这包括JavaScript，Jscript和VBScript。AJAX利用一个构建到一切现代阅读器内部的对象-XMLHttpRequest-来实现发送和接纳HTTP恳求与呼应信息。一个经由XMLHttpRequest对象发送的HTTP恳求并不要求页面中拥有或回寄一个form元素。AJAX中的A代表了异步，这意味着XMLHttpRequest对象的send()方法可以立刻前往，从而让Web页面上的其它HTML/JavaScript继续其阅读器端处置而由效力器处置HTTP恳求并发送呼应。虽然缺省情况下恳求是异步进展的，但是，他可以选择发送同步恳求，这将会暂停其它We

3、b页面的处置，直到该页面接纳到效力器的呼应为止。微软在其Internet Explorer(IE) 5中作为一个ActiveX对象方式引入了XMLHttpRequest对象。其他的认识到这一对象重要性的阅读器制造商也都纷纷在他们的阅读器内实现了XMLHttpRequest对象，但是作为一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今，在认识到实现这一类型的价值及平安性特征之后，微软曾经在其IE 7中把XMLHttpRequest实现为一个窗口对象属性。侥幸的是，虽然其实现(因此也影响到调用方式)细节不同，但是，一切的阅读器实现都具有类似的功能，并且本质上是一样方法。

4、目前，W3C组织正在努力进展XMLHttpRequest对象的规范化，并且曾经发行了有关该W3C规范的一个草案。本文将对XMLHttpRequest对象API进展详细讨论，并将解释其一切的属性和方法。二、 XMLHttpRequest对象的属性和事件XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处置和控制HTTP恳求与呼应。下面，我们将对此展开详细的讨论。readyState属性当XMLHttpRequest对象把一个HTTP恳求发送到效力器时将阅历假设干种形状：不断等待直到恳求被处置；然后，它才接纳一个呼应。这样以来，脚本才正确呼应各种形状-XMLHttpRequest对

5、象暴露一个描画对象的当前形状的readyState属性，如表格1所示。表格1.XMLHttpRequest对象的ReadyState属性值列表。ReadyState取值描画0 描画一种未初始化形状；此时，曾经创建一个XMLHttpRequest对象，但是还没有初始化。1 描画一种发送形状；此时，代码曾经调用了XMLHttpRequest open()方法并且XMLHttpRequest曾经预备好把一个恳求发送到效力器。2 描画一种发送形状；此时，曾经经过send()方法把一个恳求发送到效力器端，但是还没有收到一个呼应。3 描画一种正在接纳形状；此时，曾经接纳到HTTP呼应头部信息，但是音讯体部

6、分还没有完全接纳终了。4 描画一种已加载形状；此时，呼应曾经被完全接纳。onreadystatechange事件无论readyState值何时发生改动，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接纳一个EventListener值-向该方法指示无论readyState值何时发生改动，该对象都将激活。responseText属性这个responseText属性包含客户端接纳到的HTTP呼应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(

7、正在接纳)时，呼应中包含客户端还未完成的呼应信息。当readyState为4(已加载)时，该responseText包含完好的呼应信息。responseXML属性此responseXML属性用于当接纳到完好的HTTP呼应时(readyState为4)描画XML呼应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。假设Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只需readyState值不为4，那么该responseXML的值也为null。其实，这个resp

8、onseXML属性值是一个文档接口类型的对象，用来描画被分析的文档。假设文档不能被分析(例如，假设文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。status属性这个status属性描画了HTTP形状代码，而且其类型为short。而且，仅当readyState值为3(正在接纳中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。statusText属性这个statusText属性描画了HTTP形状代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试

9、图存取statusText属性将引发一个异常。abort()方法他可以运用这个abort()方法来暂停与一个XMLHttpRequest对象相联络的HTTP恳求，从而把该对象复位到未初始化形状。open()方法他需求调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必需提供的-用于指定他想用来发送恳求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到效力器，应该

10、运用POST方法；为了从效力器端检索数据，应该运用GET方法。另外，uri参数用于指定XMLHttpRequest对象把恳求发送到的效力器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，他可以运用相对的URI-它将运用与阅读器解析相对的URI一样的方式被解析。async参数指定能否恳求是异步的-缺省值为true。为了发送一个同步恳求，需求把这个参数设置为false。对于要求认证的效力器，他可以提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(翻开)并且

11、把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位恳求头部。留意，假设他调用open()方法并且此时readyState为4，那么XMLHttpRequest对象将复位这些值。send()方法在经过调用open()方法预备好一个恳求之后，他需求把该恳求发送到效力器。仅当readyState值为1时，他才可以调用send()方法；否那么的话，XMLHttpRequest对象将引发一个异常。该恳求被运用提供应open()方法的参数发送到效力器。当async参数为true时，send()方法立刻前往，从而允许其它客户端脚本处置

12、继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当效力器呼应时，在接纳音讯体之前，假设存在任何音讯体的话，XMLHttpRequest对象将把readyState设置为3(正在接纳中)。当恳求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的恳求，它将在把readyState值设置为3后再立刻把它设置为4。send()方法运用一个可选的参数-该参数可以包含可变类型的数据。典型地，他运用它并经过POST方法把数据发送到效力器。另外，他可以显式地运用null参数调用send()方法，这与不用参数调用它一样。对于

13、大多数其它的数据类型，在调用send()方法之前，应该运用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。假设在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。假设数据是Document类型，那么将运用由data.xmlEncoding指定的编码串行化该数据。setRequestHeader()方法该setRequestHeader(DOMString header，DOMString value)方法用来设置恳求的头部信息。当readyState值为1时，他可以在调用open()方法后调用这个方法

14、；否那么，他将得到一个异常。getResponseHeader()方法getResponseHeader(DOMString header，value)方法用于检索呼应的头部值。仅当readyState值是3或4(换句话说，在呼应头部可用以后)时，才可以调用这个方法；否那么，该方法前往一个空字符串。getAllResponseHeaders()方法该getAllResponseHeaders()方法以一个字符串方式前往一切的呼应头部每一个头部占单独的一行。假设readyState的值不是3或4，那么该方法前往null。在AJAX中，许多运用XMLHttpRequest的恳求都是从一个HTML事

15、件例如一个调用JavaScript函数的按钮点击(onclick)或一个按键(onkeypress)中被初始化的。AJAX支持包括表单校验在内的各种运用程序。有时，在填充表单的其它内容之前要求校验一个独一的表单域。例如要求运用一个独一的UserID来注册表单。假设不是运用AJAX技术来校验这个UserID域，那么整个表单都必需被填充和提交。假设该UserID不是有效的，这个表单必需被重新提交。例如，一个相应于一个要求必需在效力器端进展校验的Catalog ID的表单域能够按以下方式指定：form name=validationForm action=validateForm method=po

16、sttabletrtdCatalog Id:/tdtdinput type=text size=20 id=catalogId name=catalogId autocomplete=off onkeyup=sendRequest()/tdtddiv id=validationMessage/div/td/tr/table/form前面的HTML运用validationMessage div来显示相应于这个输入域Catalog Id的一个校验音讯。onkeyup事件调用一个JavaScript sendRequest()函数。这个sendRequest()函数创建一个XMLHttpReques

17、t对象。创建一个XMLHttpRequest对象的过程因阅读器实现的不同而有所区别。假设阅读器支持XMLHttpRequest对象作为一个窗口属性(一切普通的阅读器都是这样的，除了IE 5和IE 6之外)，那么，代码可以调用XMLHttpRequest的构造器。假设阅读器把XMLHttpRequest对象实现为一个ActiveXObject对象(就象在IE 5和IE 6中一样)，那么，代码可以运用ActiveXObject的构造器。下面的函数将调用一个init()函数，它担任检查并决议要运用的适当的创建方法-在创建和前往对象之前。script type=text/javascriptfunct

18、ion sendRequest()var xmlHttpReq=init();function init()if (window.XMLHttpRequest) return new XMLHttpRequest(); else if (window.ActiveXObject) return new ActiveXObject(Microsoft.XMLHTTP);/script接下来，他需求运用Open()方法初始化XMLHttpRequest对象-指定HTTP方法和要运用的效力器URL。var catalogId=encodeURIComponent(document.getElemen

19、tById(catalogId).value);xmlHttpReq.open(GET， validateForm?catalogId= + catalogId， true);默许情况下，运用XMLHttpRequest发送的HTTP恳求是异步进展的，但是他可以显式地把async参数设置为true，如上面所展现的。在这种情况下，对URL validateForm的调用将激活效力器端的一个servlet，但是他应该可以留意到效力器端技术不是根本性的；实践上，该URL能够是一个ASP，ASP.NET或PHP页面或一个Web效力-这无关紧要，只需该页面可以前往一个呼应-指示CatalogID值能否是

20、有效的-即可。由于他在作一个异步伐用，所以他需求注册一个XMLHttpRequest对象将调用的回调事件处置器-当它的readyState值改动时调用。记住，readyState值的改动将会激发一个readystatechange事件。他可以运用onreadystatechange属性来注册该回调事件处置器。xmlHttpReq.onreadystatechange=processRequest;然后，我们需求运用send()方法发送该恳求。由于这个恳求运用的是HTTP GET方法，所以，他可以在不指定参数或运用null参数的情况下调用send()方法。xmlHttpReq.send(null

21、);在这个例如中，由于HTTP方法是GET，所以在效力器端的接纳servlet将调用一个doGet()方法，该方法将检索在URL中指定的catalogId参数值，并且从一个数据库中检查它的有效性。本文例如中的这个servlet需求构造一个发送到客户端的呼应；而且，这个例如前往的是XML类型，因此，它把呼应的HTTP内容类型设置为text/xml并且把Cache-Control头部设置为no-cache。设置Cache-Control头部可以阻止阅读器简单地从缓存中重载页面。public void doGet(HttpServletRequest request， HttpServletResp

22、onse response)throws ServletException， IOException .response.setContentType(text/xml);response.setHeader(Cache-Control， no-cache);于效力器端的呼应是一个XML DOM对象，此对象将创建一个XML字符串-其中包含要在客户端进展处置的指令。另外，该XML字符串必需有一个根元素。out.println(catalogIdvalid/catalogId);【留意】XMLHttpRequest对象的设计目的是为了处置由普通文本或XML组成的呼应；但是，一个呼应也能够是另外一种

23、类型，假设用户代理(UA)支持这种内容类型的话。当恳求形状改动时，XMLHttpRequest对象调用运用onreadystatechange注册的事件处置器。因此，在处置该呼应之前，他的事件处置器应该首先检查readyState的值和HTTP形状。当恳求完成加载readyState值为4并且呼应曾经完成HTTP形状为OK时，他就可以调用一个JavaScript函数来处置该呼应内容。以下脚本担任在呼应完成时检查相应的值并调用一个processResponse()方法。function processRequest()if(xmlHttpReq.readyState=4)if(xmlHttpReq.status=200)processResponse();该processResponse()方法运用XMLHttpRequest对象的responseXML和responseText属性来检索