(轉)JAVA AJAX教程第三章—AJAX詳細講解

標籤：http   java   使用   os   io   strong   資料   for   

現在開始深入AJAX，這裡還是按老思路，理論和實踐相結合。這章的內容主要是講解AJAX步驟詳解，下一張將會用一個AJAX技術實現頁面提示效果的執行個體來說明AJAX的實現。

 

一、AJAX步驟詳解

AJAX實質上是遵循Request/Server模式來進行工作的，這個架構基本的流程包括下面幾個具體的步驟：

          （1）       XMLHttpRequest對象初始化

          （2）       發送請求

          （3）       伺服器接收請求並進行處理

          （4）       伺服器返迴響應資料

          （5）       用戶端接收

          （6）       依據響應資料修改用戶端頁面內容

   整個過程中的通訊互動方式都是非同步。下面根據具體步驟講解AJAX的核心工作機制：

1、  初始化並建立XMLHttpRequest對象並發出XMLHttpRequest請求

為了讓JAVASCRIPT可以向伺服器發送HTTP請求，必須使用XMLHttpRequest對象。使用之前，要先將XMLHttpRequest對象執行個體化。各個瀏覽器對這個執行個體化過程實現不公。IE瀏覽器以AcitiveX控制項的形式提供，而Mozilla瀏覽器等瀏覽器則直接以XMLHttpRequest類的形式提供。所以在第一章為了編寫的程式可以跨瀏覽器運行，這樣寫：

    if(window.XMLHttpRequest){

       XMLHttpReq = new XMLHttpRequest();

    }else if(window.ActiveXObject){

       try{

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

       }catch(e){

           try{

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

           }catch(e1){}

       }

    }

另外，有些Mozilla瀏覽器處理伺服器資訊未包含XML mime-type頭部資訊的返回內容時會出錯。因此，要確保返回的內容包含text/xml資訊：

XMLHttpRequest = new XMLHttpRequest();

XMLHttpRequest.overrideMimeType(“text/xml”);

2、  指定響應處理函數

下來要指定當前伺服器返回資訊時用戶端的處理方式，只要將相應的處理函數名稱賦給XMLHttpRequest對象的onreadystatechange屬性就可以了。比如：

XMLHttpRequest.onreadystatechange = processResponse;

需要注意，這個函數名不加括弧，不指定參數。也可以用JAVASCRIPT即時定義函數的方式定義相應函數。比如：

XMLHttpRequest.onreadystatechange = function () {  };

3、  發出HTTP請求

指定響應處理函數之後，就可以向伺服器發送HTTP請求了。這一部調用了XMLHttpRequest對象的open和send方法。

XMLHttpRequest.open(“GET”,url,true);

XMLHttpRequest.send(null);//發送請求

Open的第一參數是HTTP請求的方法，為GET、POST或者Head。Open的第二個參數是目標URL。基於安全考慮，這個URL只能是同網域的，否則提示“沒有許可權”的錯誤。目標URL處理請求XMLHttpRequest請求則跟處理普通的HTTP請求一樣，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)來取得URL參數值。Open的第三個參數只是指定在等待伺服器返回資訊的時間內是否繼續執行下面的代碼。如果為ture，則不會繼續執行，直到伺服器返回資訊。預設為true。

按照順序，open調用完畢之後要調用send方法。Send的參數如果是以POST方式發出的話，可以是任何想傳給伺服器的內容。

4、  處理伺服器返回的資訊

首先，檢查XMLHttpRequest的readyState值，判斷請求目前的狀態。參照前面的屬性工作表可以知道，readyState值為4時，代表格服務器已經傳回所有的資訊，可以開始處理資訊並更新頁面內容了。例如：

if(XMLHttpReq.readyState == 4){

    //資訊已返回，可以開始處理

}else{

    //資訊還未返回，等待

}

資訊返回後還需判斷HTTP狀態代碼，確定返回的頁面沒有錯誤。其中200代表頁面正常，基本程式如下：

if(XMLHttpReq.status == 200){

    //頁面正常，可以開始處理資訊

}else{

    //頁面有問題

}

XMLHttpRequest對成功返回的資訊有兩種處理方式，一種為responseText，即將傳回的資訊當字串使用；另一種為reponseXML，即將傳回的資訊當XML文檔使用，可以使用DOM處理。

總結以上的步驟我們就可以整個出一個初步的AJAX開發架構，供以後調用了。例子代碼如下，以後只需在其中改變具體的資料：

<script language="javascript">

var XMLHttpReq = false;

function createXMLHttpRequest(){

    if(window.XMLHttpRequest){

       XMLHttpReq = new XMLHttpRequest();

    }else if(window.ActiveXObject){

       try{

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

       }catch(e){

           try{

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

           }catch(e1){}

       }

    }

}

function sendRequest(url){

    //建立XMLHttpRequest對象

    createXMLHttpRequest();

    //調用open方法

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

    //指定伺服器返回資訊時用戶端的處理函數

    XMLHttpReq.onreadystatechange = processResponse;

    //向伺服器發送請求

    XMLHttpReq.send(null);

}

function processResponse(){

    //判斷相應情況

    if(XMLHttpReq.readyState == 4){

       //判斷HTTP狀態代碼

       if(XMLHttpReq.status == 200){

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

           window.alert(res);

           document.myform.uname.value="";

           document.myform.pwd.value="";

       }else{

           window.alert("你請求的頁面有異常");

       }

    }

}

function userCheck(){

    var uname = document.myform.uname.value;

    var pwd = document.myform.pwd.value;

    if(uname == ""){

       window.alert("使用者名稱不可為空");

       document.myform.pwd.value="";

       document.myform.uname.focus();

       return false;

    }else{

       //調用AJAX初步架構

       sendRequest("login?uname="+uname+"&pwd="+pwd);

    }

}

</script>