掌握 Ajax

lastwinner

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

dtlpabc

讲得不错，赞

lastwinner

最初由 dtlpabc 发布
[B]讲得不错，赞 [/B]

还没完，继续

lastwinner

因此除了就绪状态外，还需要检查 HTTP 状态。我们期望的状态码是 200，它表示一切顺利。如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）。因此还要在回调方法中增加状态检查，如 清单 14 所示。
清单 14. 检查 HTTP 状态码
   function updatePage() {
     if (request.readyState == 4)
       if (request.status == 200)
         alert("Server is done!";
   }
为了增加更健壮的错误处理并尽量避免过于复杂，可以增加一两个状态码检查，请看一看 清单 15 中修改后的 updatePage() 版本。

lastwinner

清单 15. 增加一点错误检查
   function updatePage() {
     if (request.readyState == 4)
       if (request.status == 200)
         alert("Server is done!";
       else if (request.status == 404)
         alert("Request URL does not exist";
       else
         alert("Error: status code is " + request.status);
   }
现在将 getCustomerInfo() 中的 URL 改为不存在的 URL 看看会发生什么。应该会看到警告信息说明要求的 URL 不存在 —— 好极了！很难处理所有的错误条件，但是这一小小的改变能够涵盖典型 Web 应用程序中 80% 的问题。

lastwinner

读取响应文本

现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后我们可以处理服务器返回的数据了。返回的数据保存在 XMLHttpRequest 对象的 responseText 属性中。

关于 responseText 中的文本内容，比如格式和长度，有意保持含糊。这样服务器就可以将文本设置成任何内容。比方说，一种脚本可能返回逗号分隔的值，另一种则使用管道符（即 | 字符）分隔的值，还有一种则返回长文本字符串。何去何从由服务器决定。

lastwinner

在本文使用的例子中，服务器返回客户的上一个订单和客户地址，中间用管道符分开。然后使用订单和地址设置表单中的元素值，清单 16 给出了更新显示内容的代码。
清单 16. 处理服务器响应
   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
         alert("status is " + request.status);
     }
   }

lastwinner

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


图 4. 收到客户数据后的 Break Neck 表单


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

lastwinner

结束语

您可能对 XMLHttpRequest 感到有点厌倦了，我很少看到一整篇文章讨论一个对象，特别是这种简单的对象。但是您将在使用 Ajax 编写的每个页面和应用程序中反复使用该对象。坦白地说，关于 XMLHttpRequest 还真有一些可说的内容。下一期文章中将介绍如何在请求中使用 POST 及 GET，来设置请求中的内容头部和从服务器响应读取内容头部，理解如何在请求/响应模型中编码请求和处理 XML。

再往后我们将介绍常见 Ajax 工具箱。这些工具箱实际上隐藏了本文所述的很多细节，使得 Ajax 编程更容易。您也许会想，既然有这么多工具箱为何还要对底层的细节编码。答案是，如果不知道应用程序在做什么，就很难发现应用程序中的问题。

因此不要忽略这些细节或者简单地浏览一下，如果便捷华丽的工具箱出现了错误，您就不必挠头或者发送邮件请求支持了。如果了解如何直接使用 XMLHttpRequest，就会发现很容易调试和解决最奇怪的问题。只有让其解决您的问题，工具箱才是好东西。

因此请熟悉 XMLHttpRequest 吧。事实上，如果您有使用工具箱的 Ajax 代码，可以尝试使用 XMLHttpRequest 对象及其属性和方法重新改写。这是一种不错的练习，可以帮助您更好地理解其中的原理。

下一期文章中将进一步讨论该对象，探讨它的一些更有趣的属性（如 responseXML），以及如何使用 POST 请求和以不同的格式发送数据。请开始编写代码吧，一个月后我们再继续讨论。

lastwinner

参考资料
学习
您可以参阅本文在 developerWorks 全球站点上的 英文原文。
掌握 Ajax，第 1 部分: Ajax 简介（developerWorks，2005 年 12 月）帮助您了解 Ajax，这是一种构建网站的高生产率方法。（本文中的参考资料列表都值得访问！）
面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序（developerWorks，2005 年 9 月）从 Java 的角度考察了 Ajax 服务器端。
面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化（developerWorks，2005 年 10 月）从 Java 的角度分析了如何通过网络发送对象以及与 Ajax 交互。
使用 AJAX 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机（developerWorks，2005 年 10 月）是关于集成 Ajax 和现有基于 SOAP 的 web 服务的相当高级的文章。
Google GMail 是一个很好的例子，说明了基于 Ajax 的应用程序如何改变 Web 的工作方式。
Google Maps 是另一种基于 Google 的 Web 2.0 应用程序。
Flickr 是一个很好的例子，说明如何使用 Ajax 创建类似桌面的 Web 应用程序。
Ajax: A New Approach to Web Applications 发明了 Ajax 一词，所有 Ajax 开发人员都应该读一读。
Why Ajax Matters Now 告诉您为什么 Ajax 很重要。
如果使用的是 Microsoft 浏览器 Internet Explorer，请访问 Microsoft Developer Network's XML Developer Center。
请通过 在线文档 进一步了解 MSXML，Microsoft XML 解析器。
看一看响应中包含的所有 HTTP 状态码 列表。
developerWorks Web Architecture 专区 专门发表各种基于 Web 的解决方案的文章。
获得产品和技术
Elisabeth Freeman、Eric Freeman 和 Brett McLaughlin 合著的 Head Rush Ajax（2005 年 2 月，O'Reilly Media, Inc.）以 Head First 风格将本文中所述的内容灌输到您的头脑中。
Java and XML, Second Edition（Brett McLaughlin，2001 年 8 月，O'Reilly Media, Inc.）包括作者关于 XHTML 和 XML 转换的讨论。
JavaScript: The Definitive Guide（David Flanagan，2001 年 11 月，O'Reilly Media, Inc.）详细介绍了如何使用 JavaScript、动态网页，第二版增加了关于 Ajax 的两章。
Head First HTML with CSS & XHTML（Elizabeth 和Eric Freeman，2005 年 12 月，O'Reilly Media, Inc.）是学习 XHTML、CSS 以及如何将两者结合起来的完整参考。
讨论
参与论坛讨论。
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 技术的权威著作。