掌握 Ajax

lastwinner

Ajax 世界中的请求/响应
现在我们介绍了 Ajax，对 XMLHttpRequest 对象以及如何创建它也有了基本的了解。如果阅读得很仔细，您可能已经知道与服务器上的 Web 应用程序打交道的是 JavaScript 技术，而不是直接提交给那个应用程序的 HTML 表单。
还缺少什么呢？到底如何使用 XMLHttpRequest。因为这段代码非常重要，您编写的每个 Ajax 应用程序都要以某种形式使用它，先看看 Ajax 的基本请求/响应模型是什么样吧。
发出请求
您已经有了一个崭新的 XMLHttpRequest 对象，现在让它干点活儿吧。首先需要一个 Web 页面能够调用的 JavaScript 方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是在所有 Ajax 应用程序中基本都雷同的流程：

• 从 Web 表单中获取需要的数据。
• 建立要连接的 URL。
• 打开到服务器的连接。
• 设置服务器在完成后要运行的函数。
• 发送请求。

清单 5 中的示例 Ajax 方法就是按照这个顺序组织的：
清单 5. 发出 Ajax 请求
[php]
function callServer() {
  // Get the city and state from the web form
  var city = document.getElementById("city".value;
  var state = document.getElementById("state".value;
  // Only go on if there are values for both fields
  if ((city == null) || (city == "") return;
  if ((state == null) || (state == "") return;
  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
  // Open a connection to the server
  xmlHttp.open("GET", url, true);
  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;
  // Send the request
  xmlHttp.send(null);
}
[/php]
其中大部分代码意义都很明确。开始的代码使用基本 JavaScript 代码获取几个表单字段的值。然后设置一个 PHP 脚本作为链接的目标。要注意脚本 URL 的指定方式，city 和 state（来自表单）使用简单的 GET 参数附加在 URL 之后。
然后打开一个连接，这是您第一次看到使用 XMLHttpRequest。其中指定了连接方法（GET）和要连接的 URL。最后一个参数如果设为 true，那么将请求一个异步连接（这就是 Ajax 的由来）。如果使用 false，那么代码发出请求后将等待服务器返回的响应。如果设为 true，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他 JavaScript 方法）。
xmlHttp（要记住，这是 XMLHttpRequest 对象实例）的 onreadystatechange 属性可以告诉服务器在运行完成 后（可能要用五分钟或者五个小时）做什么。因为代码没有等待服务器，必须让服务器知道怎么做以便您能作出响应。在这个示例中，如果服务器处理完了请求，一个特殊的名为 updatePage() 的方法将被触发。
最后，使用值 null 调用 send()。因为已经在请求 URL 中添加了要发送给服务器的数据（city 和 state），所以请求中不需要发送任何数据。这样就发出了请求，服务器按照您的要求工作。
如果没有发现任何新鲜的东西，您应该体会到这是多么简单明了！除了牢牢记住 Ajax 的异步特性外，这些内容都相当简单。应该感激 Ajax 使您能够专心编写漂亮的应用程序和界面，而不用担心复杂的 HTTP 请求/响应代码。
清单 5 中的代码说明了 Ajax 的易用性。数据是简单的文本，可以作为请求 URL 的一部分。用 GET 而不是更复杂的 POST 发送请求。没有 XML 和要添加的内容头部，请求体中没有要发送的数据；换句话说，这就是 Ajax 的乌托邦。
不用担心，随着本系列文章的展开，事情会变得越来越复杂。您将看到如何发送 POST 请求、如何设置请求头部和内容类型、如何在消息中编码 XML、如何增加请求的安全性，可以做的工作还有很多！暂时先不用管那些难点，掌握好基本的东西就行了，很快我们就会建立一整套的 Ajax 工具库。

lastwinner

处理响应

现在要面对服务器的响应了。现在只要知道两点：

·什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。
·服务器将把响应填充到 xmlHttp.responseText 属性中。
其中的第一点，即就绪状态，将在下一篇文章中详细讨论，您将进一步了解 HTTP 请求的阶段，可能比您设想的还多。现在只要检查一个特定的值（4）就可以了（下一期文章中还有更多的值要介绍）。第二点，使用 xmlHttp.responseText 属性获得服务器的响应，这很简单。清单 6 中的示例方法可供服务器根据 清单 5 中发送的数据调用。


清单 6. 处理服务器响应

[php]
function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode".value = response;
  }
}
[/php]


这些代码同样既不难也不复杂。它等待服务器调用，如果是就绪状态，则使用服务器返回的值（这里是用户输入的城市和州的 ZIP 编码）设置另一个表单字段的值。于是包含 ZIP 编码的 zipCode 字段突然出现了，而用户没有按任何按钮！这就是前面所说的桌面应用程序的感觉。快速响应、动态感受等等，这些都只因为有了小小的一段 Ajax 代码。

细心的读者可能注意到 zipCode 是一个普通的文本字段。一旦服务器返回 ZIP 编码，updatePage() 方法就用城市/州的 ZIP 编码设置那个字段的值，用户就可以改写该值。这样做有两个原因：保持例子简单，说明有时候可能希望 用户能够修改服务器返回的数据。要记住这两点，它们对于好的用户界面设计来说很重要。

lastwinner

连接 Web 表单

还有什么呢？实际上没有多少了。一个 JavaScript 方法捕捉用户输入表单的信息并将其发送到服务器，另一个 JavaScript 方法监听和处理响应，并在响应返回时设置字段的值。所有这些实际上都依赖于调用 第一个 JavaScript 方法，它启动了整个过程。最明显的办法是在 HTML 表单中增加一个按钮，但这是 2001 年的办法，您不这样认为吗？还是像 清单 7 这样利用 JavaScript 技术吧。


清单 7. 启动一个 Ajax 过程

[php]
<form>
<p>City: <input type="text" name="city" id="city" size="25"
       onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
       onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>
[/php]


如果感觉这像是一段相当普通的代码，那就对了，正是如此！当用户在 city 或 state 字段中输入新的值时，callServer() 方法就被触发，于是 Ajax 开始运行了。有点儿明白怎么回事了吧？好，就是如此！

lastwinner

结束语

现在您可能已经准备开始编写第一个 Ajax 应用程序了，至少也希望认真读一下 参考资料 中的那些文章了吧？但可以首先从这些应用程序如何工作的基本概念开始，对 XMLHttpRequest 对象有基本的了解。在下一期文章中，您将掌握这个对象，学会如何处理 JavaScript 和服务器的通信、如何使用 HTML 表单以及如何获得 DOM 句柄。

现在先花点儿时间考虑考虑 Ajax 应用程序有多么强大。设想一下，当单击按钮、输入一个字段、从组合框中选择一个选项或者用鼠标在屏幕上拖动时，Web 表单能够立刻作出响应会是什么情形。想一想异步 究竟意味着什么，想一想 JavaScript 代码运行而且不等待 服务器对它的请求作出响应。会遇到什么样的问题？会进入什么样的领域？考虑到这种新的方法，编程的时候应如何改变表单的设计？

如果在这些问题上花一点儿时间，与简单地剪切/粘贴某些代码到您根本不理解的应用程序中相比，收益会更多。在下一期文章中，我们将把这些概念付诸实践，详细介绍使应用程序按照这种方式工作所需要的代码。因此，现在先享受一下 Ajax 所带来的可能性吧。

lastwinner

参考资料
学习

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文。
• Adaptive Path 是一家领先的用户界面设计公司，仔细阅读他们的网站可以更多地了解 Ajax。
• 如果关心 Ajax 一词的来历，请看一看 Jesse James Garrett 和他的 Ajax 文章（比如 这一篇）。
• 可以先了解下一期文章的主题 XMLHttpRequest 对象，请阅读 关于 XMLHttpRequest 对象的这篇文章。
• 如果使用 Internet Explorer，可以访问 Microsoft Developer Network 的 XML Developer Center。
• 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序（developerWorks，2005 年 9 月）介绍了这种革新方法，它解决了页面重新加载难题，可以创建动态的 Web 应用程序体验。
• 面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化（developerWorks，2005 年 10 月）介绍了在 Ajax 应用程序中对数据进行序列化的五种方法。
• Using Ajax with PHP and Sajax（developerWorks，2005 年 10 月），这篇教程针对那些对开发丰富 Web 应用程序感兴趣的人，介绍了使用 Ajax 和 PHP 动态更新内容。
• Call SOAP Web services with AJAX, Part 1: Build the Web services client（developerWorks，2005 年 10 月）介绍了如何使用 Ajax 设计模式实现基于 Web 浏览器的 SOAP Web 服务客户机。
• XML 问题: 超越 DOM（developerWorks，2005 年 5 月）详细阐述了如何使用文档对象模型来构建动态 Web 应用程序。
• Build apps with Asynchronous JavaScript with XML, or AJAX（developerWorks，2005 年 11 月）演示了如何使用 Ajax 构造支持实时检验的 Web 应用程序。
• 面向 Java 开发人员的 Ajax: 结合 Direct Web Remoting 使用 Ajax （developerWorks，2005 年 11 月）演示了如何实现 Ajax 的繁琐细节的自动化处理。
• OSA Foundation 有一个 wiki 调查了 AJAX/JavaScript 库。
• XUL Planet 的 对象参考部分 详细介绍了 XMLHttpRequest 对象（更不用说其他各种 XML 对象了，如 DOM、CSS、HTML、Web Service 以及 Windows 和 Navigation 对象）。
• 关于 AJax 的基本原理，请阅读 策略白皮书。
• 请看看 Flickr.com 上展示的一些很棒的 Ajax 应用程序。
• Google 的 GMail 是另一个利用 Ajax 的革命性 Web 应用程序的例子。
• Head Rush Ajax （O'Reilly Media, Inc.，2006 年 2 月）包含了本文以及本系列文章所述的内容（还有更多），并采用了创新的获奖格式 Head First。
• JavaScript: The Definitive Guide，第 4 版（O'Reilly Media, Inc.，2001 年 11 月）是关于 JavaScript 语言和使用动态网页的好资料。
• developerWorks Web 体系结构专区 专门发表关于各种基于 Web 的解决方案的文章。

讨论

• 参与论坛讨论。
• Ajax.NET Professional 是关于 Ajax 各个方面的很好的 blog。
• 通过参与 developerWorks blog 加入 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 技术的权威著作。

lastwinner

第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
在 Web 请求中使用 XMLHttpRequest


级别: 中级
Brett McLaughlin, 作家，编辑, O'Reilly Media Inc.
2006 年 2 月 16 日
多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象，就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中，Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例，建立和发送请求，并响应服务器。
本系列的上一期文章（请参阅 参考资料 中的链接），我们介绍了 Ajax 应用程序，考察了推动 Ajax 应用程序的基本概念。其中的核心是很多您可能已经了解的技术：JavaScript、HTML 和 XHTML、一点动态 HTML 以及 DOM（文档对象模型）。本文将放大其中的一点，把目光放到具体的 Ajax 细节上。
本文中，您将开始接触最基本和基础性的有关 Ajax 的全部对象和编程方法：XMLHttpRequest 对象。该对象实际上仅仅是一个跨越所有 Ajax 应用程序的公共线程，您可能已经预料到，只有彻底理解该对象才能充分发挥编程的潜力。事实上，有时您会发现，要正确地使用 XMLHttpRequest，显然不能 使用 XMLHttpRequest。这到底是怎么回事呢？

lastwinner

Web 2.0 一瞥
在深入研究代码之前首先看看最近的观点 —— 一定要十分清楚 Web 2.0 这个概念。听到 Web 2.0 这个词的时候，应该首先问一问 “Web 1.0 是什么？” 虽然很少听人提到 Web 1.0，实际上它指的就是具有完全不同的请求和响应模型的传统 Web。比如，到 Amazon.com 网站上点击一个按钮或者输入搜索项。就会对服务器发送一个请求，然后响应再返回到浏览器。该请求不仅仅是图书和书目列表，而是另一个完整的 HTML 页面。因此当 Web 浏览器用新的 HTML 页面重绘时，可能会看到闪烁或抖动。事实上，通过看到的每个新页面可以清晰地看到请求和响应。
Web 2.0（在很大程度上）消除了这种看得见的往复交互。比如访问 Google Maps 或 Flickr 这样的站点（到这些支持 Web 2.0 和 Ajax 站点的链接请参阅 参考资料）。比如在 Google Maps 上，您可以拖动地图，放大和缩小，只有很少的重绘操作。当然这里仍然有请求和响应，只不过都藏到了幕后。作为用户，体验更加舒适，感觉很像桌面应用程序。这种新的感受和范型就是当有人提到 Web 2.0 时您所体会到的。
需要关心的是如何使这些新的交互成为可能。显然，仍然需要发出请求和接收响应，但正是针对每次请求/响应交互的 HTML 重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清楚，我们需要一种方法使发送的请求和接收的响应只 包含需要的数据而不是整个 HTML 页面。惟一需要获得整个新 HTML 页面的时候就是希望用户看到 新页面的时候。
但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下，Ajax 和 Web 2.0 方法允许在不 更新整个 HTML 页面的情况下发送和接收数据。对于那些经常上网的人，这种能力可以让您的应用程序感觉更快、响应更及时，让他们不时地光顾您的网站。

lastwinner

XMLHttpRequest 简介
要真正实现这种绚丽的奇迹，必须非常熟悉一个 JavaScript 对象，即 XMLHttpRequest。这个小小的对象实际上已经在几种浏览器中存在一段时间了，它是本专栏今后几个月中要介绍的 Web 2.0、Ajax 和大部分其他内容的核心。为了让您快速地大体了解它，下面给出将要用于该对象的很少的几个 方法和属性。

• open()：建立到服务器的新请求。
• send()：向服务器发送请求。
• abort()：退出当前请求。
• readyState：提供当前 HTML 的就绪状态。
• responseText：服务器返回的请求响应文本。

如果不了解这些（或者其中的任何 一个），您也不用担心，后面几篇文章中我们将介绍每个方法和属性。现在应该 了解的是，明确用 XMLHttpRequest 做什么。要注意这些方法和属性都与发送请求及处理响应有关。事实上，如果看到 XMLHttpRequest 的所有方法和属性，就会发现它们都 与非常简单的请求/响应模型有关。显然，我们不会遇到特别新的 GUI 对象或者创建用户交互的某种超极神秘的方法，我们将使用非常简单的请求和非常简单的响应。听起来似乎没有多少吸引力，但是用好该对象可以彻底改变您的应用程序。

lastwinner

简单的 new
首先需要创建一个新变量并赋给它一个 XMLHttpRequest 对象实例。这在 JavaScript 中很简单，只要对该对象名使用 new 关键字即可，如 清单 1 所示。
清单 1. 创建新的 XMLHttpRequest 对象
[php]
<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>
..........
[/php]
不难吧？记住，JavaScript 不要求指定变量类型，因此不需要像 清单 2 那样做（在 Java 语言中可能需要这样）。
清单 2. 创建 XMLHttpRequest 的 Java 伪代码
[php]
XMLHttpRequest request = new XMLHttpRequest();
[/php]
因此在 JavaScript 中用 var 创建一个变量，给它一个名字（如 “request”），然后赋给它一个新的 XMLHttpRequest 实例。此后就可以在函数中使用该对象了。

lastwinner

错误处理
在实际上各种事情都可能出错，而上面的代码没有提供任何错误处理。较好的办法是创建该对象，并在出现问题时优雅地退出。比如，任何较早的浏览器（不论您是否相信，仍然有人在使用老版本的 Netscape Navigator）都不支持 XMLHttpRequest，您需要让这些用户知道有些地方出了问题。清单 3 说明如何创建该对象，以便在出现问题的时候发出 JavaScript 警告。
清单 3. 创建具有错误处理能力的 XMLHttpRequest

<script language="javascript" type="text/javascript">
var request = false;
try {
  request = new XMLHttpRequest();
} catch (failed) {
  request = false;
}
if (!request)
  alert("Error initializing XMLHttpRequest!";
</script>

一定要理解这些步骤：

• 创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件，它表示还没有创建XMLHttpRequest 对象。
• 增加 try/catch 块：
       ·尝试创建 XMLHttpRequest 对象。
       ·如果失败（catch (failed)）则保证 request 的值仍然为 false。
• 检查 request 是否仍为 false（如果一切正常就不会是 false）。
• 如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。
  

代码非常简单，对大多数 JavaScript 和 Web 开发人员来说，真正理解它要比读写代码花更长的时间。现在已经得到了一段带有错误检查的 XMLHttpRequest 对象创建代码，还可以告诉您哪儿出了问题。