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

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

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

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

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

先看clIEnt.JSP內容：

<%@page contentType="text/Html"%>
<%@page pageEncoding="gb2312"%>

   "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、定義事件處理器，此處理器將在服務器端返回數據時自動被觸發執行。

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

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

    0：對象已創建，但未初始化（未調用open()方法）
    1：對象已創建，但未調用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的狀態發生改變時，將執行此方法

3. 與服務器連接並發送

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來讀取相應的節點。如下例：

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

4、發送信息

XMLHttp.send(null)

其方法簽名如下： 

XMLHttp.send( [varBody])

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

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

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

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

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

6、客戶端自動探知XMLHTTPRequest的狀態已經發生變化，自動觸發事件處理器

7、事件處理器動態更新頁面

處理器讀取XMLHttp.responseText的值，並通過JavaScript動態更新 

的內容。

document.getElementById("output").innerHtml = "Time is for " + XMLHttp.responseText + ".";

結語：

由上7步可見，AJAX並不復雜，遠比想像中要簡單得多。牢牢記住這一點，“AJax讓我們在不用刷新頁面的情況下，可以動態地更新網頁部分內容”，然後運用到各種需要用到這種性能的場合，將使我們的網頁更有創意。