快速进入Ajax开发的实例解说(1)(5)
为什么向服务器发异步请求很重要呢?异步请求，它们的本性就是在请求发出的时候不中断处理(还有用户的体验)，直到响应返回。在事件驱动的模型中也应用了异步处理。这是图形用户界面构建的一个好方式。没有事件，你或许得实时检查用户是否点击了一个按钮或者改变了窗口大小。使用事件，当按钮被点击的时候会自动地触发相应的处理程序，同时你也可以在事件处理方法里采取相应的动作。在AJAX中，这个理论起作用当你向服务器发送了一个请求，在响应消息返回的时候你会被自动通知。
如果你对这个应用如果使用异步请求工作好奇的话，你可以象下面这样把xmlHttp.open的第三个参数改为false，然后手动地调用handleServerResponse。如果你这样做了，假定你输入你的名字的输入框就会在连接服务器的时候锁定(在这个情况下，锁定的时间取决于连接速度，如果服务器就在本机上的话这个会是很短的)。
| // function calls the server using the XMLHttpRequest object function process() { // retrieve the name typed by the user on the form name = encodeURIComponent(document.getElementById("myName").value); // execute the quickstart.php page from the server xmlHttp.open("GET", "quickstart.php?name=" + name, false); // make synchronous server request (freezes processing until completed) xmlHttp.send(null); // read the response handleServerResponse(); } |
| // make asynchronous HTTP request using the XMLHttpRequest object function process() { // proceed only if the xmlHttp object isn't busy if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { |
如果连接很忙，我们使用setTimeout来在1秒钟之后重试(这个方法的第二个参数用来指定执行由第一个参数指定的代码前要等待的毫秒数)：
| // if the connection is busy, try again after one second setTimeout('process()', 1000); |
如果这行很清楚了，那么你就可以很安全地创建一个新请求。准备服务器请求但是不提交的代码如下：
| // execute the quickstart.php page from the server xmlHttp.open("GET", 'quickstart.php?name=' + name, true); |
第一个参数指定了向服务器发送用户姓名的方法。你可以在GET和POST之间选择。第二个参数是你要访问的服务器页面。当第一个参数是GET是，你以name/value对的形式在查询串中传递参数。如果你希望调用是异步的话，第三个参数就是true。当做异步调用的时候，你不必等待响应。相反，你可以另外定义一个方法，它在请求的状态发生改变的时候自动地被调用：
| // define the method to handle server responses xmlHttp.onreadystatechange = handleServerResponse; |
一旦你设定了这个选项，你就可以安静地休息了――在你的请求发生了任何变化的时候，handleServerResponse方法都会被执行。在一切都设置好之后，你可以通过调用XMLHttpRequest的send方法来初始化请求：
| // make the server request xmlHttp.send(null); } |
| // executed automatically when a message is received from the server function handleServerResponse() { // move forward only if the transaction has completed if (xmlHttp.readyState == 4) { // status of 200 indicates the transaction completed successfully if (xmlHttp.status == 200) { |
无论什么时候请求的状态发生了变化，handleServerResponse方法都会被多次执行。只有当xmlHttp.readyState的值为4时，服务器请求才完成，此时你就可以继续读取结果。你也可以检查HTTP传输，如果报告状态是200的话，就意味着在HTTP请求过程中没有出错。当这些条件满足后，你可以自由地读取服务器响应和向用户显示信息。在接受和使用服务器响应之后，通过使用setTimeout方法可以再次开始这个过程，也就是使process()方法在1秒钟之后被执行(注意，尽管这个是不必要的，甚至也不是AJAX特别要求的在你的客户端代码中要有重复性的任务)：
| // restart sequence setTimeout('process()', 1000); |
最后，我们再重复下用户装载页面之后发生了什么(你可以参考图3，它是对这一过程的图形描述)：
- 1. 用户装载index.html(这个相当于图3中的1到4步)
- 2. 用户开始(或者继续)输入他/她的名字(这个相当于图3中的第5步)
- 3. 当quickstart.js中的process()方法被执行时，它将异步调用服务器端的quickstart.php脚本。用户输入的文本作为查询字符串的参数在调用的时候传送(它是通过GET被传递的)。指定handleServerResponse方法来处理请求状态的改变
- 4. 在服务器端执行quickstart.php。它合成一个封装了服务器要传输给客户端的信息的XML文档。
- 5. 在请求的状态发生了变化时，handleServerResponse方法都会被多次执行。它最后一次被调用实在响应信息被正确地接受了。读取XML文档，抽取其中的信息，然后在页面上显示。
- 6. 当有新消息从服务器端传来时，用户显示就被更新。但是用户可以继续输入而不被打断。在延迟1秒之后，从步骤2又重新开始这个过程。
总结
这篇文章是对AJAX的一个简介。为了学习如何创建AJAX应用，理解他们为什么有用和在哪里有用是很重要的。就像是其他技术一样，AJAX并不是所有问题的解决方法，它只是提供了解决其中一部分的途径。
AJAX把客户端和服务器端按照功能结合起来了，增强了用户对你的网站的体验。XMLHttpRequest对象是使得客户端JavaScript代码能够异步调用服务器其他页面的一个关键元素。
(责任编辑：铭铭 mingming_ky#126.com TEL：（010）－68476636)
