获取 Request 对象
有了上面的基础知识后,我们来看看一些具体的例子。XMLHttpRequest Ajax 应用程序的核心,而且对很多读者来说可能还比较陌生,我们就从这里开始吧。从 清单 1 可以看出,创建和使用这个对象非常简单,不是吗?等一等。
还记得几年前的那些讨厌的浏览器战争吗?没有一样东西在不同的浏览器上得到同样的结果。不管您是否相信,这些战争仍然在继续,虽然规模较小。但令人奇怪的是,XMLHttpRequest成了这场战争的牺牲品之一。因此获得XMLHttpRequest对象可能需要采用不同的方法。下面我将详细地进行解释。
使用 Microsoft 浏览器
Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML(可以通过 参考资料 进一步了解 MSXML)。因此如果编写的 Ajax 应用程序要和 Internet Explorer 打交道,那么必须用一种特殊的方式创建对象。
但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技术版本不同,MSXML 实际上有两种不同的版本,因此必须对这两种情况分别编写代码。请参阅 清单 3,其中的代码在 Microsoft 浏览器上创建了一个XMLHttpRequest

清单 3. Microsoft 浏览器上创建 XMLHttpRequest 对象
 
var xmlHttp = false;
try {
 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
 try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e2) {
    xmlHttp = false;
 }
}
 
您对这些代码可能还不完全理解,但没有关系。当本系列文章结束的时候,您将对 JavaScript 编程、错误处理、条件编译等有更深的了解。现在只要牢牢记住其中的两行代码:
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
这两行代码基本上就是尝试使用一个版本的 MSXML 创建对象,如果失败则使用另一个版本创建该对象。不错吧?如果都不成功,则将xmlHttp变量设为 false,告诉您的代码出现了问题。如果出现这种情况,可能是因为安装了非 Microsoft 浏览器,需要使用不同的代码。
处理 Mozilla 和非 Microsoft 浏览器
如果选择的浏览器不是 Internet Explorer,或者为非 Microsoft 浏览器编写代码,就需要使用不同的代码。事实上就是 清单 1 所示的一行简单代码:
var xmlHttp = new XMLHttpRequest object;
这行简单得多的代码在 MozillaFirefoxSafariOpera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中,创建了XMLHttpRequest对象。
关键是要支持所有浏览器。谁愿意编写一个只能用于 Internet Explorer 或者非 Microsoft 浏览器的应用程序呢?或者更糟,要编写一个应用程序两次?当然不!因此代码要同时支持 Internet Explorer 和非 Microsoft 浏览器。清单 4 显示了这样的代码。

清单 4. 以支持多种浏览器的方式创建 XMLHttpRequest 对象
 
-- Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
--@cc_on @*/
--@if (@_jscript_version >= 5)
try {
 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
 try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e2) {
    xmlHttp = false;
 }
}
@end @*/
 
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
 xmlHttp = new XMLHttpRequest();
}
 
现在先不管那些注释掉的奇怪符号,如@cc_on,这是特殊的 JavaScript 编译器命令,将在下一期针对XMLHttpRequest的文章中详细讨论。这段代码的核心分为三步:
1.       建立一个变量xmlHttp来引用即将创建的XMLHttpRequest对象。
2.       尝试在 Microsoft 浏览器中创建该对象:
o        尝试使用Msxml2.XMLHTTP对象创建它。
o        如果失败,再尝试Microsoft.XMLHTTP对象。
3.       如果仍然没有建立xmlHttp,则以非 Microsoft 的方式创建该对象。
最后,xmlHttp应该引用一个有效的XMLHttpRequest对象,无论运行什么样的浏览器。
安全性如何呢?现在浏览器允许用户提高他们的安全等级,关闭 JavaScript 技术,禁用浏览器中的任何选项。在这种情况下,代码无论如何都不会工作。此时必须适当地处理问题,这需要单独的一篇文章来讨论,要放到以后了(这个系列够长了吧?不用担心,读完之前也许您就掌握了)。现在要编写一段健壮但不够完美的代码,对于掌握 Ajax 来说就很好了。以后我们还将讨论更多的细节。
 
 
Ajax 世界中的请求/响应
现在我们介绍了 Ajax,对XMLHttpRequest对象以及如何创建它也有了基本的了解。如果阅读得很仔细,您可能已经知道与服务器上的 Web 应用程序打交道的是 JavaScript 技术,而不是直接提交给那个应用程序的 HTML 表单。
还缺少什么呢?到底如何使用XMLHttpRequest。因为这段代码非常重要,您编写的每个 Ajax 应用程序都要以某种形式使用它,先看看 Ajax 的基本请求/响应模型是什么样吧。
您已经有了一个崭新的XMLHttpRequest对象,现在让它干点活儿吧。首先需要一个 Web 页面能够调用的 JavaScript 方法(比如当用户输入文本或者从菜单中选择一项时)。接下来就是在所有 Ajax 应用程序中基本都雷同的流程:
1.       Web 表单中获取需要的数据。
2.       建立要连接的 URL
3.       打开到服务器的连接。
4.       设置服务器在完成后要运行的函数。
5.       发送请求。
清单 5 中的示例 Ajax 方法就是按照这个顺序组织的:

清单 5. 发出 Ajax 请求
 
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);
}
 
其中大部分代码意义都很明确。开始的代码使用基本 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 工具库。
现在要面对服务器的响应了。现在只要知道两点:
  • 什么也不要做,直到xmlHttp.readyState属性的值等于 4
  • 服务器将把响应填充到xmlHttp.responseText属性中。
其中的第一点,即就绪状态,将在下一篇文章中详细讨论,您将进一步了解 HTTP 请求的阶段,可能比您设想的还多。现在只要检查一个特定的值(4)就可以了(下一期文章中还有更多的值要介绍)。第二点,使用xmlHttp.responseText属性获得服务器的响应,这很简单。清单 6 中的示例方法可供服务器根据 清单 5 中发送的数据调用。

清单 6. 处理服务器响应
 
function updatePage() {
 if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
 }
}
 
这些代码同样既不难也不复杂。它等待服务器调用,如果是就绪状态,则使用服务器返回的值(这里是用户输入的城市和州的 ZIP 编码)设置另一个表单字段的值。于是包含 ZIP 编码的zipCode字段突然出现了,而用户没有按任何按钮!这就是前面所说的桌面应用程序的感觉。快速响应、动态感受等等,这些都只因为有了小小的一段 Ajax 代码。
细心的读者可能注意到zipCode是一个普通的文本字段。一旦服务器返回 ZIP 编码,updatePage()方法就用城市/州的 ZIP 编码设置那个字段的值,用户就可以改写该值。这样做有两个原因:保持例子简单,说明有时候可能希望用户能够修改服务器返回的数据。要记住这两点,它们对于好的用户界面设计来说很重要。