掌握Ajax--第3部分Ajax中的高级请求和响应

掌握Ajax,第3部分:Ajax中的高级请求和响应 全面理解HTTP的状态代码、就绪状态和XMLHttpRequest对象级别：初级Brett McLaughlin （[email protected]）,作家，编辑，O'Reilly Media Inc.2006年3月23日对于很多Web开发人员来说，只需要生成简单的请求并接收简单的响应即可；但是对于希 望常握Ajax的开发人员来说，必须要全面理解HTTP状态代码、就绪状态和 XMLHttpRequest对象。在本文中，Brett McLaughlin将向您介绍各种状态代码，并展示浏 览器如何对其进行处理，本文还给出了在Ajax中使用的比较少见的HTTP请求。在本系列的 上篇文章屮，我们将详细介绍XMLHttpRequest对象，它是Ajax应用程序 的屮心，负责处理服务器端应用程序和脚本的请求，并处理从服务器端组件返冋的数据。由 于所有的Ajax应用程序?#23478;?#20351;用XMLHttpRequest对象，因此您可能会希望熟悉这个对 象，从而能够让Ajax执行得更好。在本文中，?#21307;?#22312;上一篇文章的基础上重点介绍这个请求对象的3个关键部分的内容：? HTTP就绪状态? HTTP状态代码?可以生成的请求类型 这三部分内容都是在构造一个请求时所要考虑的因素；但是介绍这些主题的内容太少了。然 而，如果您不仅仅是想了解Ajax编程的常识，而是希望了解更多内容，就需要熟悉就绪状 态、状态代码和请求本身的内容。当应用程序出现问题时 —— 这种问题总是存在一一那 么如果能够正确理解就绪状态、如何生成一个HEAD请求或者400的状态代码的确切含 义，就可以在5分钟内调试出问题，而不是在各种挫折和困惑屮度过5个小时。下面让我们首先來看一下HTTP就绪状态。深入了解HTTP就绪状态您应该还记得在上一篇文章屮XMLHttpRequest对象有一个名为readyState的属性。这个 属性确保服务器已经完成了一个请求，通常会使用一个冋调函数从服务器川读出数据来更新 Web表单或页面的内容。清单1给出了一个简单的例子（这也是本系列的上一篇文章屮的 一个例子——请参见参考资?#24076;?#27880;：XMLHttpRequest 或 XMLHttp：换名玫瑰Microsoft和Internet Explorer使用了一个名为XMLHttp的对象，而不是 XMLHttpRequest 对象，而 Mozilla、OperaSafari 和大部分非 Microsoft 浏览器都使用 的是后者。为了简单性起见，?#21307;?#36825;两个对象都简单地称为XMLHttpRequesto这?#30830;?#21512;我 们在 Web上看到的情况，又符合Microsoft在Internet Explorer 7.0中使用 XMLHttpRequest作为请求对象的意图。（有关这个问题的更多内容，请参见 第2部分。） 清单1.在冋调函数中处理服务器的响应function updatePage() {if (request.readyState == 4) {if (request.status == 200) {var response = request.responseText.split('T')；document.getElementById(Horder").value = response[0];document.getElementById("address").innerHTML = response] 1].replace(八n/g、H<br />M);} elsealert(nstatus is u + request.status);}}这显然是就绪状态最常见(也是最简单)的用法。正如您从数字”4“中可以看出的一样， 还有其他几个就绪状态(您在上一篇文章中?#37096;?#21040;过这个清单一一请参见参考资料)：? 0：请求未初始化(还没?#26800;?#29992;open())。? 1：请求已经建立，但是还没有发送(还没?#26800;?#29992;send())0? 2：请求已发送，正在处理中(通常现在可?#28304;?#21709;应中获取内容头)。? 3：请求在处理中；通常响应中己有部分数据可用了，但是服务器还没有完成响应的 生成。? 4：响应已完成；您可以获取并使用服务器的响应了。如果您希望不仅仅是了解Ajax编程的基本知识，那么就不但需要知道这些状态，了解这些 状态是何时出现的，以及如何来使用这些状态。首先，您需要学习在每种就绪状态下可能碰 到的是哪种请求状态。不幸的是，这一点并不直观，而且会涉及儿种特殊的情况。隐秘就绪状态第一种就绪状态的特点是readyState属性为0 (readyState二二0),表示未初始化状态。一旦 対请求对象调用open()之后，这个属性就被设置为1。由于您通常都是在一对请求进行初 始化之后就立即调用open(),因此很少会看到readyState == 0的状态。另外，未初始化的 就绪状态在?#23548;?#30340;应用程序中是没有真正的用处的。?#36824;?#20026;了满足我们的兴趣，请参见清单2的内容，其中显示了如何在readyState被设置 为0吋来获取这种就绪状态。清单2.获取0就绪状态function getSalesData() {// Create a request objectcreateRequest();alert(nReady state is: '* + request.readyState);// Setup (initialize) the requestvar url = "/boards/servlet/UpdateBoardSales";request.open("GET", url, true);request.onreadystatechange = updatePage;request.send(null);I在这个简单的例子屮，getSalesData()是Web页面调用来启动请求(例如点击一个按钮时) 所使用的函数。注意您必须在调用open()之前来查看就绪状态。图1给出了运行这个应 用程序的结果。图1.就绪状态0显然，这并不能为您带来多少好处；需要确保尚未调用open()函数的情况很少。在大部 分Ajax编程的真实情况中，这种就绪状态的唯一用法就是使用相同的XMLHttpRequest 対象在多个函数之间生成多个请求。在这种(不常见的)情况中，您可能会在生成新请求之 前希望确保请求对象是处于未初始化状态(readyState = 0)o这?#23548;?#19978;是要确保另外一个函 数没有同时使用这个对象。查看正在处理的请求的就绪状态除了 0就绪状态之外，请求对象还需要?#26469;?#32463;历典型的请求和响应的其他几种就绪状态， 最后才以就绪状态4的?#38382;?#32467;束。这就是为什么您在大部分回调函数中都可以看到if (request.readyState == 4)这行代码；它确保服务器己经完成对请求的处理，现在可以安全地 更新Web页面或根据从服务器返回来的数据来进行操作了。要查看这种状