多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML
页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLHttpRequest
对象，就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中，Brett McLaughlin 介绍了如何创建能够适应不同浏览器的
XMLHttpRequest 实例，建立和发送请求，并响应服务器。
本文中，您将开始接触最基本和基础性的有关 Ajax
的全部对象和编程方法：XMLHttpRequest 对象。该对象实际上仅仅是一个跨越所有 Ajax
应用程序的公共线程，您可能已经预料到，只有彻底理解该对象才能充分发挥编程的潜力。事实上，有时您会发现，要正确地使用 XMLHttpRequest，显然不能 使用
XMLHttpRequest。这到底是怎么回事呢？
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 页面的情况下发送和接收数据。对于那些经常上网的人，这种能力可以让您的应用程序感觉更快、响应更及时，让他们不时地光顾您的网站。
XMLHttpRequest 简介
要真正实现这种绚丽的奇迹，必须非常熟悉一个 JavaScript
对象，即 XMLHttpRequest。这个小小的对象实际上已经在几种浏览器中存在一段时间了，它是本专栏今后几个月中要介绍的 Web 2.0、Ajax
和大部分其他内容的核心。为了让您快速地大体了解它，下面给出将要用于该对象的很少的几个 方法和属性。
·open()：建立到服务器的新请求。
·send()：向服务器发送请求。
·abort()：退出当前请求。
·readyState：提供当前 HTML 的就绪状态。
·responseText：服务器返回的请求响应文本。
如果不了解这些（或者其中的任何 一个），您也不用担心，后面几篇文章中我们将介绍每个方法和属性。现在应该 了解的是，明确用
XMLHttpRequest 做什么。要注意这些方法和属性都与发送请求及处理响应有关。事实上，如果看到 XMLHttpRequest
的所有方法和属性，就会发现它们都 与非常简单的请求/响应模型有关。显然，我们不会遇到特别新的 GUI
对象或者创建用户交互的某种超极神秘的方法，我们将使用非常简单的请求和非常简单的响应。听起来似乎没有多少吸引力，但是用好该对象可以彻底改变您的应用程序。
简单的
new
首先需要创建一个新变量并赋给它一个 XMLHttpRequest 对象实例。这在 JavaScript
中很简单，只要对该对象名使用 new 关键字即可，如 清单 1 所示。
清单 1. 创建新的 XMLHttpRequest
对象
＜script language="javascript" type="text/javascript"＞
var request
= new
XMLHttpRequest();
＜/script＞
不难吧？记住，JavaScript
不要求指定变量类型，因此不需要像 清单 2 那样做（在 Java 语言中可能需要这样）。
清单 2. 创建 XMLHttpRequest 的
Java 伪代码
XMLHttpRequest request = new
XMLHttpRequest();
因此在 JavaScript 中用 var
创建一个变量，给它一个名字（如 “request”），然后赋给它一个新的 XMLHttpRequest
实例。此后就可以在函数中使用该对象了。
错误处理
在实际上各种事情都可能出错，而上面的代码没有提供任何错误处理。较好的办法是创建该对象，并在出现问题时优雅地退出。比如，任何较早的浏览器（不论您是否相信，仍然有人在使用老版本的
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 对象。
1、如果失败（catch
(failed)）则保证 request 的值仍然为 false。
2、检查 request 是否仍为 false（如果一切正常就不会是
false）。
·如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。
代码非常简单，对大多数 JavaScript 和 Web 开发人员来说，真正理解它要比读写代码花更长的时间。现在已经得到了一段带有错误检查的
XMLHttpRequest 对象创建代码，还可以告诉您哪儿出了问题。
|
