使用JavaScript和AJAX发出异步请求

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

引用:http://www.qqread.com/ajax/u499114012.html指定回调方法

　　现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认，open() 方法中 “true” 这个小小的关键字建立了异步请求。但是除此之外，这些代码与用 Java servlet 及 JSP、PHP 或 Perl 编程没有什么两样。

那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLHttpRequest 的一个简单属性 onreadystatechange。

　　首先一定要理解这些代码中的流程（如果需要请回顾清单 10）。建立其请求然后发出请求。此外，因为是异步请求，所以 JavaScript 方法（例子中的 getCustomerInfo()）不会等待服务器。因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器。

　　这就提出了一个有趣的问题：服务器完成了请求之后会发生什么？答案是什么也不发生，至少对现在的代码而言如此！显然这样不行，因此服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种指示说明怎么做。

　　现在 onreadystatechange 属性该登场了。该属性允许指定一个回调函数。回调允许服务器（猜得到吗？）反向调用 Web 页面中的代码。它也给了服务器一定程度的控制权，当服务器完成请求之后，会查看 XMLHttpRequest 对象，特别是 onreadystatechange 属性。然后调用该属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用，无论网页本身在做什么。比方说，可能在用户坐在椅子上手没有碰键盘的时候调用该方法，但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发 onreadystatechange 属性指定的回调方法。因此需要像清单 11 一样在代码中指定该方法。

　　在 JavaScript 中引用函数

　　JavaScript 是一种弱类型的语言，可以用变量引用任何东西。因此如果声明了一个函数 updatePage()，JavaScript 也将该函数名看作是一个变量。换句话说，可用变量名 updatePage 在代码中引用函数。

　　清单 11. 设置回调方法

function getCustomerInfo() {
　var phone = document.getElementById("phone").value;
　var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
　request.open("GET", url, true);
　request.onreadystatechange = updatePage;
　request.send(null);
}

　　需要特别注意的是该属性在代码中设置的位置 —— 它是在调用 send() 之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后才能查看该属性。现在剩下的就只有编写 updatePage() 方法了，这是本文最后一节要讨论的重点。

　　处理服务器响应

　　发送请求，用户高兴地使用 Web 表单（同时服务器在处理请求），而现在服务器完成了请求处理。服务器查看 onreadystatechange 属性确定要调用的方法。除此以外，可以将您的应用程序看作其他应用程序一样，无论是否异步。换句话说，不一定要采取特殊的动作编写响应服务器的方法，只需要改变表单，让用户访问另一个 URL 或者做响应服务器需要的任何事情。这一节我们重点讨论对服务器的响应和一种典型的动作 —— 即时改变用户看到的表单中的一部分。

　　回调和 Ajax

　　现在我们已经看到如何告诉服务器完成后应该做什么：将 XMLHttpRequest 对象的 onreadystatechange 属性设置为要运行的函数名。这样，当服务器处理完请求后就会自动调用该函数。也不需要担心该函数的任何参数。我们从一个简单的方法开始，如清单 12 所示。

　　清单 12. 回调方法的代码

＜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!");

function getCustomerInfo() {
　var phone = document.getElementById("phone").value;
　var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
　request.open("GET", url, true);
　request.onreadystatechange = updatePage;
　request.send(null);
}

function updatePage() {
　alert("Server is done!");
}
＜/script＞

　　它仅仅发出一些简单的警告，告诉您服务器什么时候完成了任务。在自己的网页中试验这些代码，然后在浏览器中打开（如果希望查看该例中的 XHTML，请参阅清单 8）。输入电话号码然后离开该字段，将看到一个弹出的警告窗口（如图 3 所示），但是点击 OK 又出现了……