掌握 Ajax

lastwinner

用户无法判断问题究竟是认证问题、没找到脚本（此处就是这种情况）、用户错误还是代码中有些地方产生了问题。添加一些简单的代码可以让这个错误更加具体。请参照 清单 8，它负责处理没找到的脚本或认证发生错误的情况，在出现这些错误时都会给出具体的消息。
清单 8. 检查有效状态代码
   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         var response = request.responseText.split("|";
         document.getElementById("order".value = response[0];
         document.getElementById("address".innerHTML =
           response[1].replace(/\n/g, "";
       } else if (request.status == 404) {
         alert ("Requested URL is not found.";
       } else if (request.status == 403) {
         alert("Access denied.";
       } else
         alert("status is " + request.status);
     }
   }

lastwinner

虽然这依然相当简单，但是它的确多提供了一些有用的信息。图 6 给出了与 图 5 相同的错误，但是这一次错误处理代码向用户或程序员更好地说明了究竟发生了什么。
图 6. 特殊错误处理

在我们自己的应用程序中，可以考虑在发生认证失败的情况时清除用户名和密码，并向屏幕上添加一条错误消息。我们可以使用类似的方法来更好地处理找不到脚本或其他 400 类型的错误（例如 405 表示不允许使用诸如发送 HEAD 请求之类不可接受的请求方法，而 407 则表示需要进行代理认证）。然而不管采用哪种选择，都需要从对服务器上返回的状态代码开始入手进行处理。

lastwinner

其他请求类型[/SIZE]

如果您真希望控制 XMLHttpRequest 对象，可以考虑最后实现这种功能 —— 将 HEAD 请求添加到指令中。在前两篇文章中，我们已经介绍了如何生成 GET 请求；在马上就要发表的一篇文章中，您会学习有关使用 POST 请求将数据发送到服务器上的知识。不过本着增强错误处理和信息搜集的精神，您应该学习如何生成 HEAD 请求。

lastwinner

生成请求
实际上生成 HEAD 请求非常简单；您可以使用 "HEAD"（而不是 "GET" 或 "POST"）作为第一个参数来调用 open() 方法，如 清单 9 所示。
清单 9. 使用 Ajax 生成一个 HEAD 请求
   function getSalesData() {
     createRequest();
     var url = "/boards/servlet/UpdateBoardSales";
     request.open("HEAD", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }
当您这样生成一个 HEAD 请求时，服务器并不会像对 GET 或 POST 请求一样返回一个真正的响应。相反，服务器只会返回资源的 头（header），这包括响应中内容最后修改的时间、请求资源是否存在和很多其他有用信息。您可以在服务器处理并返回资源之前使用这些信息来了解有关资源的信息。

lastwinner

对于这种请求您可以做的最简单的事情就是简单地输出所有的响应头的内容。这可以让您了解通过 HEAD 请求可以使用什么。清单 10 提供了一个简单的回调函数，用来输出从 HEAD 请求中获得的响应头的内容。
清单 10. 输出从 HEAD 请求中获得的响应头的内容
   function updatePage() {
     if (request.readyState == 4) {
       alert(request.getAllResponseHeaders());
     }
   }
请参见 图 7，其中显示了从一个向服务器发出的 HEAD 请求的简单 Ajax 应用程序返回的响应头。
图 7. HEAD 请求的响应头

您可以单独使用这些头（从服务器类型到内容类型）在 Ajax 应用程序中提供其他信息或功能。

lastwinner

检查 URL
您已经看到了当 URL 不存在时应该如何检查 404 错误。如果这变成一个常见的问题 —— 可能是缺少了一个特定的脚本或 servlet —— 那么您就可能会希望在生成完整的 GET 或 POST 请求之前来检查这个 URL。要实现这种功能，生成一个 HEAD 请求，然后在回调函数中检查 404 错误；清单 11 给出了一个简单的回调函数。
清单 11. 检查某个 URL 是否存在
   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         alert("URL exists";
       } else if (request.status == 404) {
         alert("URL does not exist.";
       } else {
         alert("Status is: " + request.status);
       }
     }
   }
诚实地说，这段代码的价值并不太大。服务器必须对请求进行响应，并构造一个响应来填充内容长度的响应头，因此并不能节省任何处理时间。另外，这花费的时间与生成请求并使用 HEAD 请求来查看 URL 是否存在所需要的时间一样多，因为它要生成使用 GET 或 POST 的请求，而不仅仅是如 清单 7 所示一样来处理错误代码。不过，有时确切地了解目前什么可用也是非常有用的；您永远不会知道何时创造力就会迸发或者何时需要 HEAD 请求！

lastwinner

有用的 HEAD 请求

您会发现 HEAD 请求非常有用的一个领域是用来查看内容的长度或内容的类型。这样可以确定是否需要发回大量数据来处理请求，和服务器是否试图返回二进制数据，而不是 HTML、文本或 XML（在 JavaScript 中，这 3 种类型的数据都比二进制数据更容易处理）。

在这些情况中，您只使用了适当的头名，并将其传递给 XMLHttpRequest 对象的 getResponseHeader() 方法。因此要获取响应的长度，只需要调用 request.getResponseHeader("Content-Length";。要获取内容类型，请使用 request.getResponseHeader("Content-Type";。

在很多应用程序中，生成 HEAD 请求并没有增加任何功能，甚至可能会导致请求速度变慢（通过强制生成一个 HEAD 请求来获取有关响应的数据，然后在使用一个 GET 或 POST 请求来真正获取响应）。然而，在出现您不确定有关脚本或服务器端组件的情况时，使用 HEAD 请求可以获取一些基本的数据，而不需要对响应数据真正进行处理，也不需要大量的带宽来发送响应。

lastwinner

结束语
对于很多 Ajax 和 Web 程序员来说，本文中介绍的内容似乎是太高级了。生成 HEAD 请求的价值是什么呢？到底在什么情况下需要在 JavaScript 中显式地处理重定向状态代码呢？这些都是很好的问题；对于简单的应用程序来说，答案是这些高级技术的价值并不是非常大。
然而，Web 已经不再是只需实现简单应用程序的地方了；用户已经变得更加高级，客户期望能够获得更好的稳定性、更高级的错误报告，如果应用程序有 1% 的时间停机，那么经理就可能会因此而被解雇。
因此您的工作就不能仅仅局限于简单的应用程序了，而是需要更深入理解 XMLHttpRequest。

• 如果您可以考虑各种就绪状态 —— 并且理解了这些就绪状态在不同浏览器之间的区别 —— 就可以快速调试应用程序了。您甚至可以基于就绪状态而开发一些创造性的功能，并向用户和客户回报请求的状态。
• 如果您要对状态代码进行控制，就可以设置应用程序来处理脚本错误、非预期的响应以及边缘情况。结果是应用程序在所有的时间都可以正常工作，而不仅仅是只能一切都正常的情况下才能运行。
• 增加这种生成 HEAD 请求的能力，检查某个 URL 是否存在，以及确认某个文件是否被修改过，这样就可以确保用户可以获得有效的页面，用户所看到的信息都是最新的，（最重要的是）让他们惊讶这个应用程序是如何健壮和通用。

本文的目的并非是要让您的应用程序显得十分华丽，而是帮助您去掉黄色聚光灯后重点昭显文字的美丽，或者外观更像桌面一样。尽管这些都是 Ajax 的功能（在后续几篇文章中就会介绍），不过它们却像是蛋糕表面的一层奶油。如果您可以使用 Ajax 来构建一个坚实的基础，让应用程序可以很好地处理错误和问题，用户就会返回您的站点和应用程序。在接下来的文章中，我们将添加这种直观的技巧，这会让客户兴奋得发抖。（认真地说，您一定不希望错过下一篇文章！）

lastwinner

下载
描述 Example code for this article
名字 wa-ajaxintro3_ajax-xhr_adv.zip
大小 183KB
下载方法
HTTP



关于下载方法的信息


Get Adobe® Reader®

lastwinner

参考资料 学习

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文。
• “Ajax 简介：理解 Ajax 及其工作原理，构建网站的一种有效方法”（developerWorks，2005 年 12 月）：在本系列的第 1 部分中，介绍了 Ajax 组件技术如何一起工作，并展示了 Ajax 的重要概念，包括 XMLHttpRequest 对象。
• “使用 JavaScript 和 Ajax 发出异步请求：在 Web 请求中使用 XMLHttpRequest”（developerWorks，2006 年 1 月）：在本系列的第 2 部分中，学习如何以一种跨浏览器的方法来创建 XMLHttpRequest 实例，构建并发送请求，以及对服务器进行响应。
• “面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路”（developerWorks，2005 年 9 月）：以 Java 的视角从服务器端来看 Ajax，并寻找一种创新的方法来建立动态 Web 应用程序体验。
• “面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化”（developerWorks，2005 年 10 月）：依次介绍了 5 种进行 Java 对象序列化的方法，并介绍了如何通过网络来发送对象并与 Ajax 进行交互。
• “使用 AJAX 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机”（developerWorks，2005 年 10 月）：在这篇有关使用现有的基于 SOAP 的 Web 服务与 Ajax 进行介绍的高级文章中，我们可以看到如何使用 Ajax 设计模式来实现一个基于 Web 浏览器的 SOAP Web 服务客户机。
• Google GMail：查看这个基于 Ajax 的应用程序修改 Web 工作方式的例子。Google Maps 是另外一个基于 Google 的 Web 2.0 应用程序。
• Flickr：请参见这个使用 Ajax 来为基于 Web 的应用程序创建桌面外观的例子。
• “Ajax: A New Approach to Web Applications”：请阅读这篇有关 Ajax moniker 的文章 —— 这是所有 Ajax 开发人员的必读物。
• HTTP status codes：从 W3C 上获取一个完整的清单。
• Head Rush Ajax，Elisabeth Freeman、Eric Freeman 和 Brett McLaughlin 著（2006 年 2 月，O'Reilly Media, Inc.）：将本文中的思想加入您的大脑中，Head First 风格。
• Java and XML，Second Edition by Brett McLaughlin（2001 年 8 月，O'Reilly Media, Inc.）：查看作者对 XHTML 和 XML 转换的讨论。
• JavaScript: The Definitive Guide，David Flanagan（2001 年 11 月，O'Reilly Media, Inc.）：深入介绍有关使用 JavaScript 和动态 Web 页面的知识。将要出版的版本增加了两章有关 Ajax 的内容。
• Head First HTML with CSS & XHTML，Elizabeth and Eric Freeman（2005 年 12 月，O'Reilly Media, Inc.）：要学习 XHTML、CSS 以及如何配对使用这两种技术的知识，就请仔细阅读这个完整的资源。
• developerWorks Web architecture zone：扩展您构建 Web 的技能。
• developerWorks 技术事件和 Webcasts：随时关注这些为技术开发人员准备的软件情况介绍。
  

获得产品和技术

• 直接从 developerWorks 上 下载 IBM 试用软件。
  

讨论

• 参与论坛讨论。
• 参与 developerWorks blogs，并加入 developerWorks 社区。

回页首
关于作者



Brett McLaughlin 从 Logo 时代就开始使用计算机。（还记得那个小三角吗？）近年来，他已经成为 Java 和 XML 社区最著名的作者和程序员之一。他曾经在 Nextel Communications 实现过复杂的企业系统，在 Lutris Technologies 编写过应用服务器，最近在 O'Reilly Media, Inc. 继续撰写和编辑这方面的图书。Brett 即将出版的新书 Head Rush Ajax，和畅销书作者 Eric 与 Beth Freeman 一起为 Ajax 带来了获奖的革命性 Head First 方法。最近的著作 Java 1.5 Tiger: A Developer's Notebook 是关于 Java 技术最新版本的第一本书，经典的 Java and XML 仍然是在 Java 语言中使用 XML 技术的权威著作。