本文通過一個簡單的例子來說明如何在IE6中使用AJAX技術。在這例子中，客戶端每隔十秒，從服務器端取回一個隨機的字符串，在不重新刷新頁情況下，自動更新部分頁面內容。例子僅用到了兩個jsp文件，client.jsp及server.jsp。

AJAX，即"Asynchronous JavaScript And XML"的縮寫，可翻譯為異步JavaScript及XML技術。其核心是一個寄宿在瀏覽器中名為XMLHTTPRequest的類。通過此類，可以做到無需提交表單就可以實現與服務器的連接；無需刷新整個頁面，就可以動態(tài)更新頁面中一部分的內容。XMLHTTPRequest通常使用XML作為數據交換的載體，但也可使用其他的載體，如純文本。簡單來說，就是通過XMLHTTPRequest發(fā)送信息給服務器，異步接收服務器處理并返回信息，然后通過JavaScript動態(tài)更新頁面的部分內容。

盡管AJAX近來非常火爆，但AJAX并非新的技術，正如其名所示，只不過是JavaScript加上XML的技術罷了。而且使用上非常簡單。

應用AJAX的流程：
1、定義一個事件處理器
2、獲取XMLHTTPRequest，并將事件處理器注冊給它
3、與服務器連接
4、發(fā)送信息
5、服務器返回處理完畢的信息
6、每當XMLHTTPRequest的狀態(tài)發(fā)生變化，自動觸發(fā)事件處理器
7、事件處理器動態(tài)更新頁面

本文通過一個簡單的例子來說明如何在IE6中使用AJAX技術。在這例子中，客戶端每隔十秒，從服務器端取回一個隨機的字符串，在不重新刷新頁情況下，自動更新部分頁面內容。例子僅用到了兩個jsp文件，client.jsp及server.jsp。為了方便說明，我用server.jsp來代替本應作為Servlet的Server.java。

先看client.jsp內容：
 

   "http://www.w3.org/TR/html4/loose.dtd">


    
        < meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        
        < script language="JavaScript">
            var xmlHttp;
            
            function getGiftFromServer() {
                var url = "http://localhost:8084/ajax/server.jsp";
                if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlHttp.onreadystatechange = showGift;

                xmlHttp.open("GET", url, true);
                xmlHttp.send(null);
                
                setTimeout("getGiftFromServer()",10000);
            }

            function showGift() {
                if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
                    document.getElementById("output").innerHTML = "Time is for " + 
xmlHttp.responseText + ".";
                }
            }
        < /script>
    
    

        

AJAX例子

加載頁面時，將調用JavaScript的getGiftFromServer()函數，此函數完成了上面所提的應用AJAX的流程
中第1至第4步，

同時設定了一個每隔十秒自動調用此函數的定時器。

而showGift()函數完成所提流程中的第5至第7步。下面詳細說明每一步驟。

1、定義事件處理器，此處理器將在服務器端返回數據時自動被觸發(fā)執(zhí)行。

    function showGift() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
            document.getElementById("output").innerHTML = "Time is for " + xmlHttp.
responseText + ".";
        }
    }

因為我們這里使用異步，readyState屬性用來判斷服務器返回信息的狀態(tài)。其值是一個從0至4的整數，對應于：

    0：對象已創(chuàng)建，但未初始化（未調用open()方法）
    1：對象已創(chuàng)建，但未調用send()方法
    2：已調用send()方法，但status及headers還未可用
    3：已經傳回部分數據，但status及headers還未完全可用
    4：已經收到所有數據，可使用所有數據


2、獲取XMLHTTPRequest，并將事件處理器注冊給它

注意：要使用XMLHTTPRequest，需要IE5.0以上的版本。

2.1 取得XMLHTTPRequest

在IE7.0之前獲得XMLHTTPRequest，使用如下代碼：

    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

而在IE7.0中：

    if (window.XMLHttpRequest) {
       xmlHttp = new XMLHttpRequest
    }

2.2 注冊事件處理器

xmlHttp.onreadystatechange = showGift;

showGift為傳入的方法名，每當XMLHTTPRequest的狀態(tài)發(fā)生改變時，將執(zhí)行此方法

3. 與服務器連接并發(fā)送

xmlHttp.open("GET", url , true)

其方法簽名如下：

xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)

其中：
    bstrMethod: 連接方式，可用的有GET, POST, PUT, or PROPFIND
      bstrUrl: 服務器的url
      varAsync（可選）: 調用是否異步，默認為true（調用立即返回）
    bstrUser（可選）：用戶名，如果url需要驗證時附上
    bstrPassword（可選）：密碼，如果url需要驗證時附上

open()方法可以直接打開一個xml文檔，并通過xmlHttp的responseXML來讀取相應的節(jié)點。如下例：

    xmlHttp.open("GET","http://localhost/books.xml", false);
      xmlHttp.send();
      var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");

4、發(fā)送信息

xmlHttp.send(null)

其方法簽名如下： 

xmlHttp.send( [varBody])

    varBody（可選）: 可為字符串或xml等數據，可以為null。無返回值

此方法在open()設為異步時，立即返回；在open()設為同步時，必須等到reponse對象從服務器中返回時才返回。

5、服務器返回處理完畢的信息

此時，該是服務器端工作了，server.jsp的代碼如下：

從三個字符串中隨機挑選一個寫入到response中，返回客戶端。

6、客戶端自動探知XMLHTTPRequest的狀態(tài)已經發(fā)生變化，自動觸發(fā)事件處理器

7、事件處理器動態(tài)更新頁面

處理器讀取xmlHttp.responseText的值，并通過JavaScript動態(tài)更新 

document.getElementById("output").innerHTML = "Time is for " + xmlHttp.responseText + ".";