使用JavaScript和AJAX发出异步请求

来源：IBM 作者：Brett McLaughlin 出处：巧巧读书 2006-05-30 进入讨论组

应付 Microsoft

　　看起来似乎一切良好，至少在用 Internet Explorer 试验这些代码之前是这样的。如果这样试验的话，就会看到图 1 所示的糟糕情形。

图 1. Internet Explorer 报告错误

　　显然有什么地方不对劲，而 Internet Explorer 很难说是一种过时的浏览器，因为全世界有 70% 在使用 Internet Explorer。换句话说，如果不支持 Microsoft 和 Internet Explorer 就不会受到 Web 世界的欢迎！因此我们需要采用不同的方法处理 Microsoft 浏览器。

　　经验证发现 Microsoft 支持 Ajax，但是其 XMLHttpRequest 版本有不同的称呼。事实上，它将其称为几种不同的东西。如果使用较新版本的 Internet Explorer，则需要使用对象 Msxml2.XMLHTTP，而较老版本的 Internet Explorer 则使用 Microsoft.XMLHTTP。我们需要支持这两种对象类型（同时还要支持非 Microsoft 浏览器）。请看看清单 4，它在前述代码的基础上增加了对 Microsoft 的支持。

　　Microsoft 参与了吗？

　　关于 Ajax 和 Microsoft 对该领域不断增长的兴趣和参与已经有很多文章进行了介绍。事实上，据说 Microsoft 最新版本的 Internet Explorer —— version 7.0，将在 2006 年下半年推出 —— 将开始直接支持 XMLHttpRequest，让您使用 new 关键字代替所有的 Msxml2.XMLHTTP 创建代码。但不要太激动，仍然需要支持旧的浏览器，因此跨浏览器代码不会很快消失。

　　清单 4. 增加对 Microsoft 浏览器的支持

＜script language="javascript" type="text/javascript"＞
　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) {
　　　　request = false;
　　　}
　　}
　}

　if (!request)
　　alert("Error initializing XMLHttpRequest!");
＜/script＞

　　很容易被这些花括号迷住了眼睛，因此下面分别介绍每一步：

　　·创建一个新变量 request 并赋值 false。使用 false 作为判断条件，它表示还没有创建 XMLHttpRequest 对象。

　　·增加 try/catch 块：

　　　1、尝试创建 XMLHttpRequest 对象。

　　　2、如果失败（catch (trymicrosoft)）：

　　　　1) 尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象（Msxml2.XMLHTTP）。

　　　　2) 如果失败（catch (othermicrosoft)）尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象（Microsoft.XMLHTTP）。

　　　　3) 如果失败（catch (failed)）则保证 request 的值仍然为 false。

　　·检查 request 是否仍然为 false（如果一切顺利就不会是 false）。

　　·如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。

　　这样修改代码之后再使用 Internet Explorer 试验，就应该看到已经创建的表单（没有错误消息）。我实验的结果如图 2 所示。

图 2. Internet Explorer 正常工作

　　静态与动态

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

　　就是说，也可以像清单 5 那样将这些代码放在一个方法中。

　　清单 5. 将 XMLHttpRequest 创建代码移动到方法中

＜script language="javascript" type="text/javascript"＞

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 initializing XMLHttpRequest!");
}
＜/script＞

　　如果按照这种方式编写代码，那么在处理 Ajax 之前需要调用该方法。因此还需要清单 6 这样的代码。

　　清单 6. 使用 XMLHttpRequest 的创建方法

　　此代码惟一的问题是推迟了错误通知，这也是多数 Ajax 程序员不采用这一方法的原因。假设一个复杂的表单有 10 或 15 个字段、选择框等，当用户在第 14 个字段（按照表单顺序从上到下）输入文本时要激活某些 Ajax 代码。这时候运行 getCustomerInfo() 尝试创建一个 XMLHttpRequest 对象，但（对于本例来说）失败了。然后向用户显示一条警告，明确地告诉他们不能使用该应用程序。但用户已经花费了很多时间在表单中输入数据！这是非常令人讨厌的，而讨厌显然不会吸引用户再次访问您的网站。如果使用静态 JavaScript，用户在点击页面的时候很快就会看到错误信息。这样也很烦人，是不是？可能令用户错误地认为您的 Web 应用程序不能在他的浏览器上运行。不过，当然要比他们花费了 10 分钟输入信息之后再显示同样的错误要好。因此，我建议编写静态的代码，让用户尽可能早地发现问题。转载保留：http://www.qqread.com/ajax/u499114012.html