掌握Ajax第2部分 使用JavaScript和Ajax发出异步请求.docx

1、掌握Ajax第2部分 使用JavaScript和Ajax发出异步请求掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求在 Web 请求中使用 XMLHttpRequest级别： 中级Brett McLaughlin (brettnewI), 作家，编辑, OReilly Media Inc.2006 年 2 月 16 日多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象，就可以使用不必让用户

2、等待服务器响应的请求/响应模型了。本文中，Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例，建立和发送请求，并响应服务器。本系列的上一期文章（请参阅 参考资料 中的链接），我们介绍了 Ajax 应用程序，考察了推动 Ajax 应用程序的基本概念。其中的核心是很多您可能已经了解的技术：JavaScript、HTML 和 XHTML、一点动态 HTML 以及 DOM（文档对象模型）。本文将放大其中的一点，把目光放到具体的 Ajax 细节上。本文中，您将开始接触最基本和基础性的有关 Ajax 的全部对象和编程方法：XMLHttpRequest

3、对象。该对象实际上仅仅是一个跨越所有 Ajax 应用程序的公共线程，您可能已经预料到，只有彻底理解该对象才能充分发挥编程的潜力。事实上，有时您会发现，要正确地使用 XMLHttpRequest，显然不能 使用 XMLHttpRequest。这到底是怎么回事呢？Web 2.0 一瞥在深入研究代码之前首先看看最近的观点 一定要十分清楚 Web 2.0 这个概念。听到 Web 2.0 这个词的时候，应该首先问一问 “Web 1.0 是什么？” 虽然很少听人提到 Web 1.0，实际上它指的就是具有完全不同的请求和响应模型的传统 Web。比如，到 A 网站上点击一个按钮或者输入搜索项。就会对服务器发送

4、一个请求，然后响应再返回到浏览器。该请求不仅仅是图书和书目列表，而是另一个完整的 HTML 页面。因此当 Web 浏览器用新的 HTML 页面重绘时，可能会看到闪烁或抖动。事实上，通过看到的每个新页面可以清晰地看到请求和响应。Web 2.0（在很大程度上）消除了这种看得见的往复交互。比如访问 Google Maps 或 Flickr 这样的站点（到这些支持 Web 2.0 和 Ajax 站点的链接请参阅 参考资料）。比如在 Google Maps 上，您可以拖动地图，放大和缩小，只有很少的重绘操作。当然这里仍然有请求和响应，只不过都藏到了幕后。作为用户，体验更加舒适，感觉很像桌面应用程序。这种

5、新的感受和范型就是当有人提到 Web 2.0 时您所体会到的。需要关心的是如何使这些新的交互成为可能。显然，仍然需要发出请求和接收响应，但正是针对每次请求/响应交互的 HTML 重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清楚，我们需要一种方法使发送的请求和接收的响应只 包含需要的数据而不是整个 HTML 页面。惟一需要获得整个新 HTML 页面的时候就是希望用户看到 新页面的时候。但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下，Ajax 和 Web 2.0 方法允许在不 更新整个 HTML 页面的情况下发送和接收数据。对于那些经常上网的人，这种能力可以让您

6、的应用程序感觉更快、响应更及时，让他们不时地光顾您的网站。XMLHttpRequest 简介要真正实现这种绚丽的奇迹，必须非常熟悉一个 JavaScript 对象，即 XMLHttpRequest。这个小小的对象实际上已经在几种浏览器中存在一段时间了，它是本专栏今后几个月中要介绍的 Web 2.0、Ajax 和大部分其他内容的核心。为了让您快速地大体了解它，下面给出将要用于该对象的很少的几个 方法和属性。 open()：建立到服务器的新请求。 send()：向服务器发送请求。 abort()：退出当前请求。 readyState：提供当前 HTML 的就绪状态。 responseText：服务

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

8、quest 对象实例。这在 JavaScript 中很简单，只要对该对象名使用 new 关键字即可，如 清单 1 所示。清单 1. 创建新的 XMLHttpRequest 对象var request = new XMLHttpRequest();不难吧？记住，JavaScript 不要求指定变量类型，因此不需要像 清单 2 那样做（在 Java 语言中可能需要这样）。清单 2. 创建 XMLHttpRequest 的 Java 伪代码XMLHttpRequest request = new XMLHttpRequest();因此在 JavaScript 中用 var 创建一个变量，给它一个名字

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

10、e;try request = new XMLHttpRequest(); catch (failed) request = false;if (!request) alert(Error initializing XMLHttpRequest!);一定要理解这些步骤：1. 创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件，它表示还没有创建 XMLHttpRequest 对象。 2. 增加 try/catch 块： 1. 尝试创建 XMLHttpRequest 对象。 2. 如果失败（catch (failed)）则保证 request 的值仍然为 fa

11、lse。 3. 检查 request 是否仍为 false（如果一切正常就不会是 false）。 4. 如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。 代码非常简单，对大多数 JavaScript 和 Web 开发人员来说，真正理解它要比读写代码花更长的时间。现在已经得到了一段带有错误检查的 XMLHttpRequest 对象创建代码，还可以告诉您哪儿出了问题。应付 Microsoft看起来似乎一切良好，至少在用 Internet Explorer 试验这些代码之前是这样的。如果这样试验的话，就会看到 图 1 所示的糟糕情形。图 1. In

12、ternet Explorer 报告错误显然有什么地方不对劲，而 Internet Explorer 很难说是一种过时的浏览器，因为全世界有 70% 在使用 Internet Explorer。换句话说，如果不支持 Microsoft 和 Internet Explorer 就不会受到 Web 世界的欢迎！因此我们需要采用不同的方法处理 Microsoft 浏览器。经验证发现 Microsoft 支持 Ajax，但是其 XMLHttpRequest 版本有不同的称呼。事实上，它将其称为几种 不同的东西。如果使用较新版本的 Internet Explorer，则需要使用对象 Msxml2.XML

13、HTTP，而较老版本的 Internet Explorer 则使用 Microsoft.XMLHTTP。我们需要支持这两种对象类型（同时还要支持非 Microsoft 浏览器）。请看看 清单 4，它在前述代码的基础上增加了对 Microsoft 的支持。Microsoft 参与了吗？关于 Ajax 和 Microsoft 对该领域不断增长的兴趣和参与已经有很多文章进行了介绍。事实上，据说 Microsoft 最新版本的 Internet Explorer version 7.0，将在 2006 年下半年推出 将开始直接支持 XMLHttpRequest，让您使用 new 关键字代替所有的 Ms

14、xml2.XMLHTTP 创建代码。但不要太激动，仍然需要支持旧的浏览器，因此跨浏览器代码不会很快消失。清单 4. 增加对 Microsoft 浏览器的支持var request = false;try request = new XMLHttpRequest(); catch (trymicrosoft) try request = new ActiveXObject(Msxml2.XMLHTTP); catch (othermicrosoft) try request = new ActiveXObject(Microsoft.XMLHTTP); catch (failed) reques

15、t = false; if (!request) alert(Error initializing XMLHttpRequest!);很容易被这些花括号迷住了眼睛，因此下面分别介绍每一步：1. 创建一个新变量 request 并赋值 false。使用 false 作为判断条件，它表示还没有创建 XMLHttpRequest 对象。 2. 增加 try/catch 块： 1. 尝试创建 XMLHttpRequest 对象。 2. 如果失败（catch (trymicrosoft)）： 1. 尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象（Msxml2.XMLH

16、TTP）。 2. 如果失败（catch (othermicrosoft)）尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象（Microsoft.XMLHTTP）。 3. 如果失败（catch (failed)）则保证 request 的值仍然为 false。 3. 检查 request 是否仍然为 false（如果一切顺利就不会是 false）。 4. 如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。 这样修改代码之后再使用 Internet Explorer 试验，就应该看到已经创建的表单（没有错误消息）。

17、我实验的结果如 图 2 所示。图 2. Internet Explorer 正常工作静态与动态再看一看清单 1、3 和 4，注意，所有这些代码都直接嵌套在 script 标记中。像这种不放到方法或函数体中的 JavaScript 代码称为静态 JavaScript。就是说代码是在页面显示给用户之前的某个时候运行。（虽然根据规范不能完全精确地 知道这些代码何时运行对浏览器有什么影响，但是可以保证这些代码在用户能够与页面交互之前运行。）这也是多数 Ajax 程序员创建 XMLHttpRequest 对象的一般方式。就是说，也可以像 清单 5 那样将这些代码放在一个方法中。清单 5. 将 XMLHt

18、tpRequest 创建代码移动到方法中var request;function createRequest() try request = new XMLHttpRequest(); catch (trymicrosoft) try request = new ActiveXObject(Msxml2.XMLHTTP); catch (othermicrosoft) try request = new ActiveXObject(Microsoft.XMLHTTP); catch (failed) request = false; if (!request) alert(Error init

19、ializing XMLHttpRequest!);如果按照这种方式编写代码，那么在处理 Ajax 之前需要调用该方法。因此还需要 清单 6 这样的代码。清单 6. 使用 XMLHttpRequest 的创建方法var request;function createRequest() try request = new XMLHttpRequest(); catch (trymicrosoft) try request = new ActiveXObject(Msxml2.XMLHTTP); catch (othermicrosoft) try request = new ActiveXObj

20、ect(Microsoft.XMLHTTP); catch (failed) request = false; if (!request) alert(Error initializing XMLHttpRequest!);function getCustomerInfo() createRequest(); / Do something with the request variable此代码惟一的问题是推迟了错误通知，这也是多数 Ajax 程序员不采用这一方法的原因。假设一个复杂的表单有 10 或 15 个字段、选择框等，当用户在第 14 个字段（按照表单顺序从上到下）输入文本时要激活某些

21、 Ajax 代码。这时候运行 getCustomerInfo() 尝试创建一个 XMLHttpRequest 对象，但（对于本例来说）失败了。然后向用户显示一条警告，明确地告诉他们不能使用该应用程序。但用户已经花费了很多时间在表单中输入数据！这是非常令人讨厌的，而讨厌显然不会吸引用户再次访问您的网站。如果使用静态 JavaScript，用户在点击页面的时候很快就会看到错误信息。这样也很烦人，是不是？可能令用户错误地认为您的 Web 应用程序不能在他的浏览器上运行。不过，当然要比他们花费了 10 分钟输入信息之后再显示同样的错误要好。因此，我建议编写静态的代码，让用户尽可能早地发现问题。用 XM

22、LHttpRequest 发送请求得到请求对象之后就可以进入请求/响应循环了。记住，XMLHttpRequest 惟一的目的是让您发送请求和接收响应。其他一切都是 JavaScript、CSS 或页面中其他代码的工作：改变用户界面、切换图像、解释服务器返回的数据。准备好 XMLHttpRequest 之后，就可以向服务器发送请求了。欢迎使用沙箱Ajax 采用一种沙箱安全模型。因此，Ajax 代码（具体来说就是 XMLHttpRequest 对象）只能对所在的同一个域发送请求。以后的文章中将进一步介绍安全和 Ajax，现在只要知道在本地机器上运行的代码只能对本地机器上的服务器端脚本发送请求。如果

23、让 Ajax 代码在 上运行，则必须 中运行的脚本发送请求。设置服务器 URL首先要确定连接的服务器的 URL。这并不是 Ajax 的特殊要求，但仍然是建立连接所必需的，显然现在您应该知道如何构造 URL 了。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该 URL。比如，清单 7 中的 JavaScript 代码获取电话号码字段的值并用其构造 URL。清单 7. 建立请求 URL var request = false; try request = new XMLHttpRequest(); catch (trymicrosoft) try request = new Ac

24、tiveXObject(Msxml2.XMLHTTP); catch (othermicrosoft) try request = new ActiveXObject(Microsoft.XMLHTTP); catch (failed) request = false; if (!request) alert(Error initializing XMLHttpRequest!); function getCustomerInfo() var phone = document.getElementById(phone).value; var url = /cgi-local/lookupCus

25、tomer.php?phone= + escape(phone); 这里没有难懂的地方。首先，代码创建了一个新变量 phone，并把 ID 为 “phone” 的表单字段的值赋给它。清单 8 展示了这个表单的 XHTML，其中可以看到 phone 字段及其 id 属性。清单 8. Break Neck Pizza 表单 Enter your phone number: Your order will be delivered to: Type your order in here: 还要注意，当用户输入电话号码或者改变电话号码时，将触发 清单 8 所示的 getCustomerInfo() 方

26、法。该方法取得电话号码并构造存储在 url 变量中的 URL 字符串。记住，由于 Ajax 代码是沙箱型的，因而只能连接到同一个域，实际上 URL 中不需要域名。该例中的脚本名为 /cgi-local/lookupCustomer.php。最后，电话号码作为 GET 参数附加到该脚本中：phone= + escape(phone)。如果以前没用见过 escape() 方法，它用于转义不能用明文正确发送的任何字符。比如，电话号码中的空格将被转换成字符 %20，从而能够在 URL 中传递这些字符。可以根据需要添加任意多个参数。比如，如果需要增加另一个参数，只需要将其附加到 URL 中并用 “与”（

27、&）字符分开 第一个参数用问号（?）和脚本名分开。打开请求有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数： request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。 url：要连接的 URL。 asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。 username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。 password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。 通常

28、使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。将这些结合起来，通常会得到 清单 9 所示的一行代码。open() 是打开吗？Internet 开发人员对 open() 方法到底做什么没有达成一致。但它实际上并不是 打开一个请求。如果监控 XHTML/Ajax 页面及其连接脚本之间的网络和数据传递，当调用 open() 方法时将看不到任何通信。不清楚为何选用了这个名字，但显然不是一个好的选择。清单 9. 打开请求function getCustomerInfo() var phone = document.getElementById(phone).value; var url = /cgi-local/lookupCustomer.php?phone= + escape(phone); request.open(GET, url, true); 一旦设置好了 URL，其他就简单了。多数请求使用 GET 就够了（后面的文章中将看到需要使用 POST 的情况），