現在開始深入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>

轉載于:https://www.cnblogs.com/xuxiuxiu/p/3910565.html

總結

以上是生活随笔為你收集整理的(转)JAVA AJAX教程第三章—AJAX详细讲解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。