AJAX的基本概念

AJAX的基本概念

是構建網頁的一種綜合使用JavaScript和XML的技術。

其實質是HTML網頁的非同步傳輸技術：

表現形式：在等待網頁的傳輸過程中，使用者依然可以和系統進行互動。

好處：頁面不用重新整理就可以更新內容。

 

典型的流程：

1.      用戶端出發非同步作業

2.      建立新的XMLHttpRequest對象。

3.      與Server進行串連

4.      伺服器端進行串連處理

5.      返回包含處理結果的XML文檔

6.      XMLHttpRequest對象接收處理結果並分析

7.      更新頁面

 

XMLHttpRequest對象：

是一個瀏覽器內建的對象，通過它提起對伺服器端的請求，可以通過javascript提起請求，如果要提起多個請求，就需要多個XHR對象。

這個請求在提起的時候，不會重新整理頁面，在後台運行。

請求的結果被預先定義好的方法（javacript）來處理。

 

例子程式：

對使用者名稱進行檢查：

 

1.用戶端的觸發

<tr>

<td
class="altbg1"width="21%">使用者名稱:</td>

<td
class="altbg2"><inputid="userid"name="username"size="25"maxlength="25"type="text"onblur="validate()">

<spanid="usermsg"></span>

</tr>

 

要注意，使用的是onblur事件，onblur 事件會在對象失去焦點時發生。

onblur="validate()" 是在對象失去焦點時發生的事件。

 

 

    varreq;//定義全域變數

    functionvalidate()
{

       var
idField =document.getElementById("userid"); //擷取當前需要傳遞的頁面元素

       varurl =
"Validate.jsp?id="+ escape(idField.value); //通過validate頁面來相應請求，id就是傳遞的值。escape是個特殊函數，可以把傳遞的值，轉換成為url的特殊編碼。比如空格可以轉成%20

不同的瀏覽器，使用不同的方式來建立並初始化XHRequest對象。

       if(window.XMLHttpRequest){ 
//netscope瀏覽器

           req =new
XMLHttpRequest();

       } else if(window.ActiveXObject)
{ //

           req =new
ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器

       }

       //開啟這個對象，本例當中，使用get方式來開啟，給定的網址：url，true的意思是使用非同步模式。第一個參數，可以是get，post，put，delete，第二個參數，是需要送到的地址。第三個就是看，是否是非同步模式。true為非同步模式，false為同步模式。

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

//readyState是XHR的狀態。

0為uninitialized未初始化，

1為loading請求還沒有發到用戶端，只是建立的串連，

2為loaded，請求已經發送到用戶端，並得到了http頭部資訊。

3為interactive，伺服器提交的內容正在取得之中，

4為completed。已經取完了，伺服器處理完畢。onreadystatechange，就是說當狀態變化的時候，就調用callback方法。

 

//callback為調用的方法。注意callback不要帶括弧。

       req.onreadystatechange = callback;

//通過send把請求提交到伺服器端

       req.send(null);

    }

 

 

下面我們來寫callback方法：

    functioncallback()
{

       if(req.readyState == 4){ //真正的完成

           if(req.status == 200){ //sever的正確反饋

              //alert(req.responseText);//彈窗方式。

//反饋回來的是一個xml，如下代碼解析xml。把xml文檔當成一個對象傳遞過來，從對象當中，以TagName來取得相應的元素

              varmsg = req.responseXML.getElementsByTagName("msg")[0];

              //alert(msg);//msg本身是一個object。

//調用另外一個function，setMsg（）

              
setMsg(msg.childNodes[0].nodeValue);

           }

       }

    }

 

下面我們來寫setMsg（）；

    functionsetMsg(msg)
{

       //alert(msg);

       mdiv = document.getElementById("usermsg");

       if(msg =="invalid")
{

           mdiv.innerHTML ="<font color='red'>usernameexists</font>";

       } else {

           mdiv.innerHTML ="<font color='green'>congratulations! you canuse this username!</font>";

       }

    }

Server處理方式：

Server處理請求的方式不變， 輸出什麼都沒關係，都可以直接輸出語句。

<%

response.setContentType("text/xml");

response.setHeader("Cache-Control","no-store");
//HTTP1.1 阻止瀏覽器進行緩衝

response.setHeader("Pragma","no-cache");
//HTTP1.0 阻止瀏覽器進行緩衝

response.setDateHeader("Expires", 0);//prevents catching at proxy server
阻止瀏覽器進行緩衝

System.out.println(request.getParameter("id"));

//check the database

response.getWriter().write("<msg>valid</msg>");

%>