全面剖析XMLHttpRequest对象

前端之家收集整理的这篇文章主要介绍了全面剖析XMLHttpRequest对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_404_223@

全面剖析XMLHttpRequest@H_404_223@对象@H_404_223@ @H_404_223@

XMLHttpRequest@H_404_223@对象是当今所有AJAX@H_404_223@和Web 2.0@H_404_223@应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX@H_404_223@框架以进一步简化XMLHttpRequest@H_404_223@对象的使用;但是,我们仍然很有必要理解这个对象的详细工作机制。

@H_404_223@  @H_404_223@一、 引言@H_404_223@

@H_404_223@   异步JavaScript@H_404_223@与XML(AJAX)@H_404_223@是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程。这一技术的优点在于,它向开发者提供 了一种从Web@H_404_223@服务器检索数据而不必把用户当前正在观察的页面回馈给服务器。与现代浏览器的通过存取浏览器DOM@H_404_223@结构的编程代码(JavaScript) @H_404_223@动态地改变被显示内容支持相配合,AJAX@H_404_223@让开发者在浏览器端更新被显示HTML@H_404_223@内容而不必刷新页面。换句话说,AJAX@H_404_223@可以使基于浏览器的应用程序 更具交互性而且更类似传统型桌面应用程序。

@H_404_223@  Google@H_404_223@的Gmail@H_404_223@和Outlook Express@H_404_223@就是两个使用AJAX@H_404_223@技术的我们所熟悉的例子。而且,AJAX@H_404_223@可以用于任何客户端脚本语言中,这包括JavaScript@H_404_223@,Jscript@H_404_223@和VBScript@H_404_223@。

@H_404_223@   AJAX@H_404_223@利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-@H_404_223@来实现发送和接收HTTP@H_404_223@请求与响应信息。一个经由 XMLHttpRequest@H_404_223@对象发送的HTTP@H_404_223@请求并不要求页面中拥有或回寄一个<form@H_404_223@>元素。AJAX@H_404_223@中的"A"@H_404_223@代表了"@H_404_223@异步"@H_404_223@,这意味着 XMLHttpRequest@H_404_223@对象的send()@H_404_223@方法可以立即返回,从而让Web@H_404_223@页面上的其它HTML/JavaScript@H_404_223@继续其浏览器端处理而由服务 器处理HTTP@H_404_223@请求并发送响应。尽管缺省情况下请求是异步进行的,但是,你可以选择发送同步请求,这将会暂停其它Web@H_404_223@页面的处理,直到该页面接收到服务 器的响应为止。

@H_404_223@  微软在其Internet Explorer(IE) 5@H_404_223@中作为一个ActiveX@H_404_223@对象形式引入了XMLHttpRequest@H_404_223@对象。其他的认识到这一对象重要性的浏览器制造商也都纷纷在他们的浏览器内实现了 XMLHttpRequest@H_404_223@对象,但是作为一个本地JavaScript@H_404_223@对象而不是作为一个ActiveX@H_404_223@对象实现。而如今,在认识到实现这一类型的价 值及安全性特征之后,微软已经在其IE 7@H_404_223@中把XMLHttpRequest@H_404_223@实现为一个窗口对象属性。幸运的是,尽管其实现(@H_404_223@因而也影响到调用方式)@H_404_223@细节不同,但是,所有的浏览器实现都具有类似 的功能,并且实质上是相同方法。目前,W3C@H_404_223@组织正在努力进行XMLHttpRequest@H_404_223@对象的标准化,并且已经发行了有关该W3C@H_404_223@规范的一个草案。

@H_404_223@  本文将对XMLHttpRequest@H_404_223@对象API@H_404_223@进行详细讨论,并将解释其所有的属性方法

@H_404_223@  @H_404_223@二、 XMLHttpRequest@H_404_223@对象的属性和事件@H_404_223@

@H_404_223@  XMLHttpRequest@H_404_223@对象暴露各种属性方法和事件以便于脚本处理和控制HTTP@H_404_223@请求与响应。下面,我们将对此展开详细的讨论。
readyState@H_404_223@属性

@H_404_223@   当XMLHttpRequest@H_404_223@对象把一个HTTP@H_404_223@请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来, 脚本才正确响应各种状态-XMLHttpRequest@H_404_223@对象暴露一个描述对象的当前状态的readyState@H_404_223@属性,如表格1@H_404_223@所示。

@H_404_223@  表格1.XMLHttpRequest@H_404_223@对象的ReadyState@H_404_223@属性值列表。@H_404_223@

ReadyState@H_404_223@取值@H_404_223@

描述@H_404_223@

0@H_404_223@

描述一种"@H_404_223@未初始化"@H_404_223@状态;此时,已经创建一个XMLHttpRequest@H_404_223@对象,但是还没有初始化。@H_404_223@

1@H_404_223@

描述一种"@H_404_223@发送"@H_404_223@状态;此时,代码已经调用XMLHttpRequest open()@H_404_223@方法并且XMLHttpRequest@H_404_223@已经准备好把一个请求发送到服务器。@H_404_223@

2@H_404_223@

描述一种"@H_404_223@发送"@H_404_223@状态;此时,已经通过send()@H_404_223@方法把一个请求发送到服务器端,但是还没有收到一个响应。@H_404_223@

3@H_404_223@

描述一种"@H_404_223@正在接收"@H_404_223@状态;此时,已经接收到HTTP@H_404_223@响应头部信息,但是消息体部分还没有完全接收结束。@H_404_223@

4@H_404_223@

描述一种"@H_404_223@已加载"@H_404_223@状态;此时,响应已经被完全接收。@H_404_223@


@H_404_223@  onreadystatechange@H_404_223@事件

@H_404_223@   无论readyState@H_404_223@值何时发生改变,XMLHttpRequest@H_404_223@对象都会激发一个readystatechange@H_404_223@事件。其 中,onreadystatechange@H_404_223@属性接收一个EventListener@H_404_223@值-@H_404_223@向该方法指示无论readyState@H_404_223@值何时发生改变,该对象都将 激活。

@H_404_223@  responseText@H_404_223@属性

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

@H_404_223@  responseXML@H_404_223@属性

@H_404_223@   此responseXML@H_404_223@属性用于当接收到完整的HTTP@H_404_223@响应时(readyState@H_404_223@为4)@H_404_223@描述XML@H_404_223@响应;此时,Content-Type@H_404_223@头部指定 MIME(@H_404_223@媒体)@H_404_223@类型为text/xml@H_404_223@,application/xml@H_404_223@或以+xml@H_404_223@结尾。如果Content-Type@H_404_223@头部并不包含这些媒体类型之 一,那么responseXML@H_404_223@的值为null@H_404_223@。无论何时,只要readyState@H_404_223@值不为4@H_404_223@,那么该responseXML@H_404_223@的值也为null@H_404_223@。

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

@H_404_223@  status@H_404_223@属性

@H_404_223@  这个status@H_404_223@属性描述了HTTP@H_404_223@状态代码,而且其类型为short@H_404_223@。而且,仅当readyState@H_404_223@值为3(@H_404_223@正在接收中)@H_404_223@或4(@H_404_223@已加载)@H_404_223@时,这个status@H_404_223@属性才可用。当readyState@H_404_223@的值小于3@H_404_223@时试图存取status@H_404_223@的值将引发一个异常。

@H_404_223@  statusText@H_404_223@属性

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

@H_404_223@三、 XMLHttpRequest@H_404_223@对象的方法@H_404_223@

@H_404_223@
  XMLHttpRequest@H_404_223@对象提供了各种方法用于初始化和处理HTTP@H_404_223@请求,下列将逐个展开详细讨论。

@H_404_223@  abort()@H_404_223@方法

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

@H_404_223@  open()@H_404_223@方法

@H_404_223@   你需要调用open(DOMString method@H_404_223@,DOMString uri@H_404_223@,boolean async@H_404_223@,DOMString username@H_404_223@,DOMString password)@H_404_223@方法初始化一个XMLHttpRequest@H_404_223@对象。其中,method@H_404_223@参数是必须提供的-@H_404_223@用于指定你想用来发送请求的HTTP@H_404_223@方法 (GET@H_404_223@,POST@H_404_223@,PUT@H_404_223@,DELETE@H_404_223@或HEAD)@H_404_223@。为了把数据发送到服务器,应该使用POST@H_404_223@方法;为了从服务器端检索数据,应该使用GET@H_404_223@方法。 另外,uri@H_404_223@参数用于指定XMLHttpRequest@H_404_223@对象把请求发送到的服务器相应的URI@H_404_223@。借助于window.document.baseURI@H_404_223@属 性,该uri@H_404_223@被解析为一个绝对的URI-@H_404_223@换句话说,你可以使用相对的URI-@H_404_223@它将使用与浏览器解析相对的URI@H_404_223@一样的方式被解析。async@H_404_223@参数指定是否 请求是异步的-@H_404_223@缺省值为true@H_404_223@。为了发送一个同步请求,需要把这个参数设置为false@H_404_223@。对于要求认证的服务器,你可以提供可选的用户名和口令参数。在 调用open()@H_404_223@方法后,XMLHttpRequest@H_404_223@对象把它的readyState@H_404_223@属性设置为1(@H_404_223@打开)@H_404_223@并且把responseText@H_404_223@、 responseXML@H_404_223@、status@H_404_223@和statusText@H_404_223@属性复位到它们的初始值。另外,它还复位请求头部。注意,如果你调用open()@H_404_223@方法并且此 时readyState@H_404_223@为4@H_404_223@,则XMLHttpRequest@H_404_223@对象将复位这些值。

@H_404_223@  send()@H_404_223@方法

@H_404_223@  在通过调用 open()@H_404_223@方法准备好一个请求之后,你需要把该请求发送到服务器。仅当readyState@H_404_223@值为1@H_404_223@时,你才可以调用send()@H_404_223@方法;否则的 话,XMLHttpRequest@H_404_223@对象将引发一个异常。该请求被使用提供给open()@H_404_223@方法的参数发送到服务器。当async@H_404_223@参数为true @H_404_223@时,send()@H_404_223@方法立即返回,从而允许其它客户端脚本处理继续。在调用send()@H_404_223@方法后,XMLHttpRequest@H_404_223@对象把readyState@H_404_223@的 值设置为2(@H_404_223@发送)@H_404_223@。当服务器响应时,在接收消息体之前,如果存在任何消息体的话,XMLHttpRequest@H_404_223@对象将把readyState@H_404_223@设置为 3(@H_404_223@正在接收中)@H_404_223@。当请求完成加载时,它把readyState@H_404_223@设置为4(@H_404_223@已加载)@H_404_223@。对于一个HEAD@H_404_223@类型的请求,它将在把readyState@H_404_223@值设置为 3@H_404_223@后再立即把它设置为4@H_404_223@。

@H_404_223@  send()@H_404_223@方法使用一个可选的参数-@H_404_223@该参数可以包含可变类型的数据。典型地,你使用它并通过POST@H_404_223@方法 把数据发送到服务器。另外,你可以显式地使用null@H_404_223@参数调用send()@H_404_223@方法,这与不用参数调用它一样。对于大多数其它的数据类型,在调用send() @H_404_223@方法之前,应该使用setRequestHeader()@H_404_223@方法(@H_404_223@见后面的解释)@H_404_223@先设置Content-Type@H_404_223@头部。如果在send(data)@H_404_223@方法中的 data@H_404_223@参数的类型为DOMString@H_404_223@,那么,数据将被编码为UTF-8@H_404_223@。如果数据是Document@H_404_223@类型,那么将使用由 data.xmlEncoding@H_404_223@指定的编码串行化该数据。

@H_404_223@  setRequestHeader()@H_404_223@方法

@H_404_223@  该setRequestHeader(DOMString header@H_404_223@,DOMString value)@H_404_223@方法用来设置请求的头部信息。当readyState@H_404_223@值为1@H_404_223@时,你可以在调用open()@H_404_223@方法调用这个方法;否则,你将得到一个异常。

@H_404_223@  getResponseHeader()@H_404_223@方法

@H_404_223@  getResponseHeader(DOMString header@H_404_223@,value)@H_404_223@方法用于检索响应的头部值。仅当readyState@H_404_223@值是3@H_404_223@或4(@H_404_223@换句话说,在响应头部可用以后)@H_404_223@时,才可以调用这个方法;否则,该方法返回一个空字符串。

@H_404_223@  getAllResponseHeaders()@H_404_223@方法

@H_404_223@  该getAllResponseHeaders()@H_404_223@方法以一个字符串形式返回所有的响应头部(每一个头部占单独的一行)。如果readyState@H_404_223@的值不是3@H_404_223@或4@H_404_223@,则该方法返回null@H_404_223@。@H_404_223@

@H_404_223@四、 发送请求@H_404_223@

@H_404_223@   在AJAX@H_404_223@中,许多使用XMLHttpRequest@H_404_223@的请求都是从一个HTML@H_404_223@事件(例如一个调用JavaScript@H_404_223@函数的按钮点击 (onclick)@H_404_223@或一个按键(onkeypress)@H_404_223@)中被初始化的。AJAX@H_404_223@支持包括表单校验在内的各种应用程序。有时,在填充表单的其它内容之前要 求校验一个唯一的表单域。例如要求使用一个唯一的UserID@H_404_223@来注册表单。如果不是使用AJAX@H_404_223@技术来校验这个UserID@H_404_223@域,那么整个表单都必须被填充 和提交。如果该UserID@H_404_223@不是有效的,这个表单必须被重新提交。例如,一个相应于一个要求必须在服务器端进行校验的Catalog ID@H_404_223@的表单域可能按下列形式指定:@H_404_223@

form name="validationForm" action="validateForm" method="post"@H_404_223@>
@H_404_223@<table@H_404_223@>
@H_404_223@ <tr@H_404_223@><td@H_404_223@>Catalog Id:@H_404_223@</td@H_404_223@>
@H_404_223@  <td@H_404_223@>
@H_404_223@   <input type="text" size="20" id="catalogId" name="catalogId" autocomplete="off" onkeyup="sendRequest()"@H_404_223@>
@H_404_223@  </td@H_404_223@>
@H_404_223@  <td@H_404_223@><div id="validationMessage"@H_404_223@></div@H_404_223@></td@H_404_223@>
@H_404_223@ </tr@H_404_223@>
@H_404_223@</table@H_404_223@></form@H_404_223@>@H_404_223@


@H_404_223@   前面的HTML@H_404_223@使用validationMessage div@H_404_223@来显示相应于这个输入域Catalog Id@H_404_223@的一个校验消息。onkeyup@H_404_223@事件调用一个JavaScript sendRequest()@H_404_223@函数。这个sendRequest()@H_404_223@函数创建一个XMLHttpRequest@H_404_223@对象。创建一个XMLHttpRequest @H_404_223@对象的过程因浏览器实现的不同而有所区别。如果浏览器支持XMLHttpRequest@H_404_223@对象作为一个窗口属性(@H_404_223@所有普通的浏览器都是这样的,除了IE 5@H_404_223@和IE 6@H_404_223@之外)@H_404_223@,那么,代码可以调用XMLHttpRequest@H_404_223@的构造器。如果浏览器把XMLHttpRequest@H_404_223@对象实现为一个 ActiveXObject@H_404_223@对象(@H_404_223@就象在IE 5@H_404_223@和IE 6@H_404_223@中一样)@H_404_223@,那么,代码可以使用ActiveXObject@H_404_223@的构造器。下面的函数调用一个init()@H_404_223@函数,它负责检查并决定要使用的适当的创建方法- @H_404_223@在创建和返回对象之前。@H_404_223@

script type="text/javascript"@H_404_223@>
function sendRequest(){
@H_404_223@ var xmlHttpReq=init();
@H_404_223@ function init(){
@H_404_223@  if (window.XMLHttpRequest) {
@H_404_223@   return new XMLHttpRequest();
@H_404_223@  }
@H_404_223@ else if (window.ActiveXObject) {
@H_404_223@  return new ActiveXObject("Microsoft.XMLHTTP");
@H_404_223@ }
}
@H_404_223@</script@H_404_223@>@H_404_223@


@H_404_223@  接下来,你需要使用Open()@H_404_223@方法初始化XMLHttpRequest@H_404_223@对象-@H_404_223@指定HTTP@H_404_223@方法和要使用的服务器URL@H_404_223@。@H_404_223@

var catalogId=encodeURIComponent(document.getElementById("catalogId").value);
xmlHttpReq.open("GET"@H_404_223@ "validateForm?catalogId=" + catalogId@H_404_223@, true);@H_404_223@@H_404_223@


@H_404_223@  默认情况下,使用XMLHttpRequest@H_404_223@发送的HTTP@H_404_223@请求是异步进行的,但是你可以显式地把async@H_404_223@参数设置为true@H_404_223@,如上面所展示的。
@H_404_223@在 这种情况下,对URL validateForm@H_404_223@的调用将激活服务器端的一个servlet@H_404_223@,但是你应该能够注意到服务器端技术不是根本性的;实际上,该URL@H_404_223@可能是一个 ASP@H_404_223@,ASP.NET@H_404_223@或PHP@H_404_223@页面或一个Web@H_404_223@服务-@H_404_223@这无关紧要,只要该页面能够返回一个响应-@H_404_223@指示CatalogID@H_404_223@值是否是有效的-@H_404_223@即可。因为你在 作一个异步调用,所以你需要注册一个XMLHttpRequest@H_404_223@对象将调用的回调事件处理器-@H_404_223@当它的readyState@H_404_223@值改变时调用。记 住,readyState@H_404_223@值的改变将会激发一个readystatechange@H_404_223@事件。你可以使用onreadystatechange@H_404_223@属性注册该回调 事件处理器。@H_404_223@

xmlHttpReq.onreadystatechange=processRequest;@H_404_223@


@H_404_223@  然后,我们需要使用send()@H_404_223@方法发送该请求。因为这个请求使用的是HTTP GET@H_404_223@方法,所以,你可以在不指定参数或使用null@H_404_223@参数的情况下调用send()@H_404_223@方法。@H_404_223@

xmlHttpReq.send(null);@H_404_223@

@H_404_223@五、 处理请求@H_404_223@

@H_404_223@
  在这个示例中,因为HTTP@H_404_223@方法GET@H_404_223@,所以在服务器端的接收servlet@H_404_223@将调用一个doGet()@H_404_223@方法,该方法将检索在URL@H_404_223@中指定的catalogId@H_404_223@参数值,并且从一个数据库中检查它的有效性。

@H_404_223@   本文示例中的这个servlet@H_404_223@需要构造一个发送到客户端的响应;而且,这个示例返回的是XML@H_404_223@类型,因此,它把响应的HTTP@H_404_223@内容类型设置为 text/xml@H_404_223@并且把Cache-Control@H_404_223@头部设置为no-cache@H_404_223@。设置Cache-Control@H_404_223@头部可以阻止浏览器简单地从缓存中重载页 面。@H_404_223@

public void doGet(HttpServletRequest request@H_404_223@
HttpServletResponse response)
throws ServletException@H_404_223@, IOException {
@H_404_223@ ...
@H_404_223@ ...
@H_404_223@ response.setContentType("text/xml");
@H_404_223@ response.setHeader("Cache-Control"@H_404_223@, "no-cache");
}@H_404_223@@H_404_223@


@H_404_223@  来自于服务器端的响应是一个XML DOM@H_404_223@对象,此对象将创建一个XML@H_404_223@字符串-@H_404_223@其中包含要在客户端进行处理的指令。另外,该XML@H_404_223@字符串必须有一个根元素。@H_404_223@

out.println("@H_404_223@catalogId@H_404_223@>valid@H_404_223@</catalogId@H_404_223@>");@H_404_223@@H_404_223@


@H_404_223@  【注意】XMLHttpRequest@H_404_223@对象的设计目的是为了处理由普通文本或XML@H_404_223@组成的响应;但是,一个响应也可能是另外一种类型,如果用户代理(UA)@H_404_223@支持这种内容类型的话。

@H_404_223@   当请求状态改变时,XMLHttpRequest@H_404_223@对象调用使用onreadystatechange@H_404_223@注册的事件处理器。因此,在处理该响应之前,你的事 件处理器应该首先检查readyState@H_404_223@的值和HTTP@H_404_223@状态。当请求完成加载(readyState@H_404_223@值为4@H_404_223@)并且响应已经完成(HTTP@H_404_223@状态 为"OK"@H_404_223@)时,你就可以调用一个JavaScript@H_404_223@函数来处理该响应内容。下列脚本负责在响应完成时检查相应的值并调用一个 processResponse()@H_404_223@方法。@H_404_223@

function processRequest(){
@H_404_223@ if(xmlHttpReq.readyState==4){
@H_404_223@  if(xmlHttpReq.status==200){
@H_404_223@   processResponse();
@H_404_223@  }
@H_404_223@ }
}@H_404_223@@H_404_223@


@H_404_223@   该processResponse()@H_404_223@方法使用XMLHttpRequest@H_404_223@对象的responseXML@H_404_223@和responseText@H_404_223@属性来检索 HTTP@H_404_223@响应。如上面所解释的,仅当在响应的媒体类型是text/xml@H_404_223@,application/xml@H_404_223@或以+xml@H_404_223@结尾时,这个 responseXML@H_404_223@才可用。这个responseText@H_404_223@属性将以普通文本形式返回响应。对于一个XML@H_404_223@响应,你将按如下方式检索内容:@H_404_223@

var msg=xmlHttpReq.responseXML;@H_404_223@


@H_404_223@  借助于存储在msg@H_404_223@变量中的XML@H_404_223@,你可以使用DOM@H_404_223@方法getElementsByTagName()@H_404_223@来检索该元素的值:@H_404_223@

var catalogId=msg.getElementsByTagName("catalogId")[0].firstChild.nodeValue;@H_404_223@


@H_404_223@  最后,通过更新Web@H_404_223@页面validationMessage div@H_404_223@中的HTML@H_404_223@内容并借助于innerHTML@H_404_223@属性,你可以测试该元素值以创建一个要显示的消息:@H_404_223@

if(catalogId=="valid"){
@H_404_223@ var validationMessage = document.getElementById("validationMessage");
@H_404_223@ validationMessage.innerHTML = "Catalog Id is Valid";
}
else
{
@H_404_223@ var validationMessage = document.getElementById("validationMessage");
@H_404_223@ validationMessage.innerHTML = "Catalog Id is not Valid";
}@H_404_223@@H_404_223@


@H_404_223@  @H_404_223@六、 小结@H_404_223@

@H_404_223@   上面就是XMLHttpRequest@H_404_223@对象使用的所有细节实现。通过不必把Web@H_404_223@页面寄送到服务器而实现数据传送,XMLHttpRequest@H_404_223@对象为 客户端与服务器之间提供了一种动态的交互能力。你可以使用JavaScript@H_404_223@启动一个请求并处理相应的返回值,然后使用浏览器的DOM@H_404_223@方法更新页面中的 数据。@H_404_223@

猜你在找的Ajax相关文章