Ajax(2)--Ajax核心工作机制 你忘记了吗？

在了解了XMLHttpRequest对象相关的属性和方法之后，我们再明确一下发送和接收XMLHttpRequest请求的基本程序框架。

通过前面的案例分析可以清楚地看到：Ajax实质上是遵循Request/Server模式来进行工作的，所以这个框架基本的流程包括下面几个具体的步骤。

（1）对象初始化

（2）发送请求

（3）服务器接收请求并进行处理

（4）服务器返回响应数据

（5）客户端接收

（6）依据响应数据修改客户端页面内容

注意整个过程中的通信交互方式是异步的。下面依据具体的处理过程再次强调Ajax的核心工作机制。

1．初始化对象并发出XMLHttpRequest请求

为了让Javascript可以向服务器发送HTTP请求，必须使用XMLHttpRequest对象。使用之前，要先将XMLHttpRequest对象实例化。之前说过，各个浏览器对这个实例化过程实现不同。IE浏览器以ActiveX控件的形式提供，而Mozilla浏览器等浏览器则直接以XMLHttpRequest类的形式提供。为了让编写的程序能够跨浏览器运行，可以这样写：

if(window.XMLHttpRequest) { //Mozilla 浏览器

                 XMLHttpReq = new XMLHttpRequest();

            }

            else if (window.ActiveXObject) { // IE浏览器

                   try {

                          XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

                   } catch (e) {

                          try {

                                 XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

                          } catch (e) {}

                   }

            }

有些版本的Mozilla浏览器处理服务器未包含XML mime-type头部信息的返回内容时会出错。因此，要确保返回的内容包含text/xml信息。

XMLHttpReq = new XMLHttpRequest();

XMLHttpReq.overrideMimeType("text/xml");

2．指定响应处理函数

接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如：

XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

需要注意的是，这个函数名称不加括号，不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如：

XMLHttpReq.onreadystatechange = function() { };

3．发出HTTP请求

指定响应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。

XMLHttpReq.open("GET", url, true);

XMLHttpReq.send(null);  // 发送请求

open的第一个参数是HTTP请求的方法，为GET、POST或者Head。open的第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的，否则会提示“没有权限”的错误。这个URL可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL处理请求XMLHttpRequest请求则跟处理普通的HTTP请求一样，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。

open的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为true，则不会继续执行，直到服务器返回信息。默认为true。

按照顺序，open调用完毕之后要调用send方法。send的参数如果是以POST方式发出的话，可以是任何想传给服务器的内容。

4．处理服务器返回的信息

在第二步我们已经指定了响应处理函数，这一步是用来描述响应处理函数具体应该做的事情。

首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前面的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。例如：

if (XMLHttpReq.readyState == 4) {

    // 信息已经返回，可以开始处理

} else {

    // 信息还没有返回，等待

}

服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常，基本程序结构如下：

if (XMLHttpReq.status == 200) {

    // 页面正常，可以开始处理信息

} else {

    // 页面有问题

}

XMLHttpRequest对成功返回的信息有两种处理方式：一种为 responseText：即将传回的信息当字符串使用；另一种为responseXML：即将传回的信息当XML文档使用，可以用DOM处理。本书前面的实例采用的是第二种方式。

总结上面的步骤，我们就可以整理出一个初步的Ajax开发框架，供以后调用。在本程序框架中，将服务器返回的信息用window.alert以字符串的形式显示出来：

<script language="javascript">

      var XMLHttpReq = false;

      //创建XMLHttpRequest对象

      function createXMLHttpRequest() {

             if(window.XMLHttpRequest) { //Mozilla 浏览器

                    XMLHttpReq = new XMLHttpRequest();

             }

             else if (window.ActiveXObject) { // IE浏览器

                    try {

                           XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

                    } catch (e) {

                           try {

                                  XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

                           } catch (e) {}

                    }

             }

      }

      //发送请求函数

      function sendRequest(url) {

             createXMLHttpRequest();

             XMLHttpReq.open("GET", url, true);

             XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

             XMLHttpReq.send(null);  // 发送请求

      }

      // 处理返回信息函数

      function processResponse() {

      if (XMLHttpReq.readyState == 4) { // 判断对象状态

            if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

                  var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].first Child.data;

                     window.alert(res);

            } else { //页面不正常

                  window.alert("您所请求的页面有异常。");

            }

       }

    }

</script>

在本章的最后，我们再通过一个实例进一步帮助读者体会Ajax技术完整的工作过程及设计方式。该实例实现的是网页中常见的提示信息显示的效果。在传统的实现方式中，往往需要提前从数据库中获取大量的信息，或者需要页面全部刷新才能够实现。