AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)

港控/mmm° 2022-09-19 00:21 211阅读 0赞

**挑战异步性**  
  
　　本文的后面，我将用很多时间编写和使用异步代码，但是您应该明白为什么 open() 的最后一个参数这么重要。在一般的请求/响应模型中，比如 Web 1.0，客户机（浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，换句话说，客户机等待服务器的响应。当客户机等待的时候，至少会用某种形式通知您在等待：  
  
　　·沙漏（特别是 [ Windows][Windows] 上）。  
  
　　·旋转的皮球（通常在 Mac 机器上）。  
  
　　·应用程序基本上冻结了，然后过一段时间光标变化了。  
  
　　这正是 Web 应用程序让人感到笨拙或缓慢的原因 —— 缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长（至少在这个多处理器、DSL 没有等待的世界中是如此）。  
  
　　而异步请求不 等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在 Web 表单中输入数据，甚至离开表单。没有旋转的皮球或者沙漏，应用程序也没有明显的冻结。服务器悄悄地响应请求，完成后告诉原来的请求者工作已经结束（具体的办法很快就会看到）。结果是，应用程序感觉不 那么迟钝或者缓慢，而是响应迅速、交互性强，感觉快多了。这仅仅是 Web 2.0 的一部分，但它是很重要的一部分。所有老套的 GUI 组件和 Web [设计][Link 1]范型都不能克服缓慢、同步的请求/响应模型。  
  
　　 **发送请求**  
  
　　一旦用 open() 配置好之后，就可以发送请求了。幸运的是，发送请求的方法的名称要比 open() 适当，它就是 send()。  
  
　　send() 只有一个参数，就是要发送的内容。但是在考虑这个方法之前，回想一下前面已经通过 URL 本身发送过数据了：

<table> 
 <tbody> 
  <tr> 
   <td>var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);</td> 
  </tr> 
 </tbody> 
</table>

虽然可以使用 send() 发送数据，但也能通过 URL 本身发送数据。事实上，GET 请求（在典型的 Ajax 应用中大约占 80%）中，用 URL 发送数据要容易得多。如果需要发送安全信息或 XML，可能要考虑使用 send() 发送内容。如果不需要通过 send() 传递数据，则只要传递 null 作为该方法的参数即可。因此您会发现在本文中的例子中只需要这样发送请求（参见 清单 10）。  
  
　　清单 10. 发送请求

<table> 
 <tbody> 
  <tr> 
   <td>function getCustomerInfo() { <br> 　var phone = document.getElementById("phone").value;<br> 　var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);<br> 　request.open("GET", url, true);<br> 　request.send(null);<br> }</td> 
  </tr> 
 </tbody> 
</table>

**指定回调方法**  
  
　　现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认，open() 方法中 “true” 这个小小的关键字建立了异步请求。但是除此之外，这些代码与用 [ Java][Java] servlet 及 [ JSP][JSP]、[PHP][] 或[Perl][] 编程没有什么两样。那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLHttpRequest 的一个简单属性onreadystatechange。  
  
　　首先一定要理解这些代码中的流程（如果需要请回顾 清单 10）。建立其请求然后发出请求。此外，因为是异步请求，所以 [ JavaScript][JavaScript] 方法（例子中的 getCustomerInfo()）不会等待服务器。因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器。  
  
　　这就提出了一个有趣的问题：服务器完成了请求之后会发生什么？答案是什么也不发生，至少对现在的代码而言如此！显然这样不行，因此服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种指示说明怎么做。  
  
　　现在 onreadystatechange 属性该登场了。该属性允许指定一个回调函数。回调允许服务器（猜得到吗？）反向调用 Web 页面中的代码。它也给了服务器一定程度的控制权，当服务器完成请求之后，会查看 XMLHttpRequest 对象，特别是 onreadystatechange 属性。然后调用该属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用，无论网页本身在做什么。比方说，可能在用户坐在椅子上手没有碰键盘的时候调用该方法，但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。 这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发 onreadystatechange 属性指定的回调方法。因此需要像 清单 11 一样在代码中指定该方法。  
  
　　*在 JavaScript 中引用函数  
  
　　JavaScript 是一种弱类型的语言，可以用变量引用任何东西。因此如果声明了一个函数 updatePage()，JavaScript 也将该函数名看作是一个变量。换句话说，可用变量名 updatePage 在代码中引用函数。*  
  
　　清单 11. 设置回调方法

<table> 
 <tbody> 
  <tr> 
   <td>function getCustomerInfo() { <br> 　var phone = document.getElementById("phone").value;<br> 　var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);<br> 　request.open("GET", url, true);<br> 　request.onreadystatechange = updatePage;<br> 　request.send(null);<br> }</td> 
  </tr> 
 </tbody> 
</table>

需要特别注意的是该属性在代码中设置的位置 —— 它是在调用 send() 之前 设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后才能查看该属性。现在剩下的就只有编写 updatePage() 方法了，这是本文最后一节要讨论的重点。  
  
　　 **处理服务器响应**  
  
　　发送请求，用户高兴地使用 Web 表单（同时服务器在处理请求），而现在服务器完成了请求处理。服务器查看 onreadystatechange 属性确定要调用的方法。除此以外，可以将您的应用程序看作其他应用程序一样，无论是否异步。换句话说，不一定要采取特殊的动作编写响应服务器的方法，只需要改变表单，让用户访问另一个 URL 或者做响应服务器需要的任何事情。这一节我们重点讨论对服务器的响应和一种典型的动作 —— 即时改变用户看到的表单中的一部分。  
  
　　 **回调和 Ajax**  
  
　　现在我们已经看到如何告诉服务器完成后应该做什么：将 XMLHttpRequest 对象的 onreadystatechange 属性设置为要运行的函数名。这样，当服务器处理完请求后就会自动调用该函数。也不需要担心该函数的任何参数。我们从一个简单的方法开始，如 清单 12 所示。  
  
　　清单 12. 回调方法的代码

<table> 
 <tbody> 
  <tr> 
   <td>＜script language="javascript" type="text/javascript"＞<br> var request = false;<br> try { <br> 　request = new XMLHttpRequest();<br> } catch (trymicrosoft) { <br> 　try { <br> 　　request = new ActiveXObject("Msxml2.XMLHTTP");<br> 　} catch (othermicrosoft) { <br> 　　try { <br> 　　　request = new ActiveXObject("Microsoft.XMLHTTP");<br> 　　} catch (failed) { <br> 　　　request = false;<br> 　　} <br> 　}<br> }<br> <br> if (!request)<br> alert("Error initializing XMLHttpRequest!");<br> <br> function getCustomerInfo() { <br> 　var phone = document.getElementById("phone").value;<br> 　var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);<br> 　request.open("GET", url, true);<br> 　request.onreadystatechange = updatePage;<br> 　request.send(null);<br> }<br> <br> function updatePage() { <br> 　alert("Server is done!");<br> }<br> ＜/script＞</td> 
  </tr> 
 </tbody> 
</table>

它仅仅发出一些简单的警告，告诉您服务器什么时候完成了任务。在自己的网页中试验这些代码，然后在浏览器中打开（如果希望查看该例中的 [ XHTML][XHTML]，请参阅 清单 8）。输入电话号码然后离开该字段，将看到一个弹出的警告窗口（如 图 3 所示），但是点击 OK 又出现了……

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <a href="http://images.cnblogs.com/cnblogs_com/meil/70876/o_rm139_3.jpg" rel="nofollow"><img alt="使用JavaScript和AJAX发出异步请求（图三）" src="http://images.cnblogs.com/cnblogs_com/meil/70876/o_rm139_3.jpg"></a>&nbsp; 
     <br> 图 3. 弹出警告的 Ajax 代码 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

根据浏览器的不同，在表单停止弹出警告之前会看到两次、三次甚至四次警告。这是怎么回事呢？原来我们还没有考虑 HTTP 就绪状态，这是请求/响应循环中的一个重要部分。  
  
**HTTP 就绪状态**  
  
　　前面提到，服务器在完成请求之后会在 XMLHttpRequest 的 onreadystatechange 属性中查找要调用的方法。这是真的，但还不完整。事实上，每当 HTTP 就绪状态改变时它都会调用该方法。这意味着什么呢？首先必须理解 HTTP 就绪状态。  
  
　　HTTP 就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在 Ajax 应用程序中需要了解五种就绪状态：  
  
　　0：请求没有发出（在调用 open() 之前）。  
  
　　1：请求已经建立但还没有发出（调用 send() 之前）。  
  
　　2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。  
  
　　3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。  
  
　　4：响应已完成，可以访问服务器响应并使用它。   
  
　　与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致。您也许期望任务就绪状态从 0 到 1、2、3 再到 4，但实际上很少是这种情况。一些浏览器从不报告 0 或 1 而直接从 2 开始，然后是 3 和 4。其他浏览器则报告所有的状态。还有一些则多次报告就绪状态 1。在上一节中看到，服务器多次调用 updatePage()，每次调用都会弹出警告框 —— 可能和预期的不同！  
  
　　对于 Ajax 编程，需要直接处理的惟一状态就是就绪状态 4，它表示服务器响应已经完成，可以安全地使用响应数据了。基于此，回调方法中的第一行应该如 清单 13 所示。  
  
　　 清单 13. 检查就绪状态

<table> 
 <tbody> 
  <tr> 
   <td>function updatePage() { <br> 　if (request.readyState == 4)<br> 　　alert("Server is done!");<br> }</td> 
  </tr> 
 </tbody> 
</table>

修改后就可以保证服务器的处理已经完成。尝试运行新版本的 Ajax 代码，现在就会看到与预期的一样，只显示一次警告信息了。  
  
　　 **HTTP 状态码**  
  
　　虽然 清单 13 中的代码看起来似乎不错，但是还有一个问题 —— 如果服务器响应请求并完成了处理但是报告了一个错误怎么办？要知道，服务器端代码应该明白它是由 Ajax、 [JSP][]、普通 HTML 表单或其他类型的代码调用的，但只能使用传统的 Web 专用方法报告信息。而在 Web 世界中，HTTP 代码可以处理请求中可能发生的各种问题。  
  
　　比方说，您肯定遇到过输入了错误的 URL 请求而得到 404 错误码的情形，它表示该页面不存在。这仅仅是 HTTP 请求能够收到的众多错误码中的一种（完整的状态码列表请参阅 参考资料 中的链接）。表示所访问数据受到保护或者禁止访问的 403 和 401 也很常见。无论哪种情况，这些错误码都是从完成的响应 得到的。换句话说，服务器履行了请求（即 HTTP 就绪状态是 4）但是没有返回客户机预期的数据。  
  
　　因此除了就绪状态外，还需要检查 HTTP 状态。我们期望的状态码是 200，它表示一切顺利。如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）。因此还要在回调方法中增加状态检查，如 清单 14 所示。  
  
　　清单 14. 检查 HTTP 状态码

<table> 
 <tbody> 
  <tr> 
   <td>function updatePage() { <br> 　if (request.readyState == 4)<br> 　&nbsp;&nbsp;&nbsp; if (request.status == 200)<br> 　　&nbsp;&nbsp;&nbsp; alert("Server is done!");<br> }</td> 
  </tr> 
 </tbody> 
</table>

为了增加更健壮的错误处理并尽量避免过于复杂，可以增加一两个状态码检查，请看一看 清单 15 中修改后的 updatePage() 版本。  
  
　　清单 15. 增加一点错误检查

<table> 
 <tbody> 
  <tr> 
   <td>function updatePage() { <br> 　if (request.readyState == 4)<br> 　　if (request.status == 200)<br> 　　　alert("Server is done!");<br> 　　else if (request.status == 404)<br> 　　　alert("Request URL does not exist");<br> 　　else<br> 　　　alert("Error: status code is " + request.status);<br> }</td> 
  </tr> 
 </tbody> 
</table>

现在将 getCustomerInfo() 中的 URL 改为不存在的 URL 看看会发生什么。应该会看到警告信息说明要求的 URL 不存在 —— 好极了！很难处理所有的错误条件，但是这一小小的改变能够涵盖典型 Web 应用程序中 80% 的问题。  
  
　　 **读取响应文本**  
  
　　现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后我们可以处理服务器返回的数据了。返回的数据保存在 XMLHttpRequest 对象的 responseText 属性中。  
  
　　关于 responseText 中的文本内容，比如格式和长度，有意保持含糊。这样服务器就可以将文本设置成任何内容。比方说，一种脚本可能返回逗号分隔的值，另一种则使用管道符（即 | 字符）分隔的值，还有一种则返回长文本字符串。何去何从由服务器决定。  
  
　　在本文使用的例子中，服务器返回客户的上一个订单和客户地址，中间用管道符分开。然后使用订单和地址设置表单中的元素值，清单 16 给出了更新显示内容的代码。  
  
　　清单 16. 处理服务器响应

<table> 
 <tbody> 
  <tr> 
   <td>function updatePage() { <br> 　if (request.readyState == 4) { <br> 　　if (request.status == 200) { <br> 　　　var response = request.responseText.split("|");<br> 　　　document.getElementById("order").value = response[0];<br> 　　　document.getElementById("address").innerHTML = response[1].replace(/\n/g, "");<br> 　　} else<br> 　　　alert("status is " + request.status);<br> 　}<br> }</td> 
  </tr> 
 </tbody> 
</table>

首先，得到 responseText 并使用 [ JavaScript][JavaScript] split() 方法从管道符分开。得到的数组放到 response 中。数组中的第一个值 —— 上一个订单 —— 用 response\[0\] 访问，被设置为 ID 为 “order” 的字段的值。第二个值 response\[1\]，即客户地址，则需要更多一点处理。因为地址中的行用一般的行分隔符（“\\n”字符）分隔，代码中需要用 [XHTML][] 风格的行分隔符 ＜br /＞ 来代替。替换过程使用 replace() 函数和正则表达式完成。最后，修改后的文本作为 HTML 表单 div 中的内部 HTML。结果就是表单突然用客户信息更新了，如图 4 所示。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <a href="http://images.cnblogs.com/cnblogs_com/meil/70876/o_rm139_4.jpg" rel="nofollow"><img alt="使用JavaScript和AJAX发出异步请求（图四）" src="http://images.cnblogs.com/cnblogs_com/meil/70876/o_rm139_4.jpg"></a>&nbsp; 
     <br> 图 4. 收到客户数据后的 Break Neck 表单 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

结束本文之前，我还要介绍 XMLHttpRequest 的另一个重要属性 responseXML。如果服务器选择使用 XML 响应则该属性包含（也许您已经猜到）XML 响应。处理 XML 响应和处理普通文本有很大不同，涉及到解析、文档对象模型（DOM）和其他一些问题。后面的文章中将进一步介绍 XML。但是因为 responseXML 通常和 responseText 一起讨论，这里有必要提一提。对于很多简单的 Ajax 应用程序 responseText 就够了，但是您很快就会看到通过 Ajax 应用程序也能很好地处理 XML。  
  
　　 **结束语**

您可能对 XMLHttpRequest 感到有点厌倦了，我很少看到一整篇文章讨论一个对象，特别是这种简单的对象。但是您将在使用 Ajax 编写的每个页面和应用程序中反复使用该对象。坦白地说，关于 XMLHttpRequest 还真有一些可说的内容。

此文转载至：[AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)][AJAX_-- XMLHttpRequest _]

[Windows]: http://www.qqread.com/keywords/windows.html
[Link 1]: http://www.qqread.com/keywords/photoshop_e.html
[Java]: http://www.qqread.com/keywords/java.html
[JSP]: http://www.qqread.com/keywords/jsp.html
[PHP]: http://www.qqread.com/keywords/php.html
[Perl]: http://www.qqread.com/keywords/perl.html
[JavaScript]: http://www.qqread.com/keywords/javascript.html
[XHTML]: http://www.qqread.com/keywords/xhtml.html
[AJAX_-- XMLHttpRequest _]: http://www.cnblogs.com/meil/archive/2006/09/21/510799.html