一個簡單例子教你揭開AJAX神秘面紗

本文通過一個簡單的例子來說明如何在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內容：

   "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讓我們在不用重新整理頁面的情況下，可以動態地更新網頁部分內容”，然後運用到各種需要用到這種效能的場合，將使我們的網頁更有創意。