AJAX 工作原理

以前做項目，很少去關注原理這東西，只要能在最短的時間能把功能完成了就行，或許是時間問題把，趁這陣子有時間，可以好好整理下之前的東西了，哈哈；

 

Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer
5中首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向伺服器提出請求並處理響應，而不阻塞使用者。

　　在建立Web網站時，在用戶端執行螢幕更新為使用者提供了很大的靈活性。下面是使用Ajax可以完成的功能：

     動態更新購物車的物品總數，無需使用者單擊Update並等待伺服器重新發送整個頁面。

    
提升網站的效能，這是通過減少從伺服器下載的資料量而實現的。例如，在某購物車頁面，當更新籃子中的一項物品的數量時，會重新載入整個頁面，這必須下載整個頁面的資料。如果使用Ajax計算新的總量，伺服器只會返回新的總量值，因此所需的頻寬僅為原來的百分之一。
消除了每次使用者輸入時的頁面重新整理。例如，在Ajax中，如果使用者在分頁列表上單擊Next，則伺服器資料只重新整理列表而不是整個頁面。

直接編輯表格式資料，而不是要求使用者導航到新的頁面來編輯資料。對於Ajax，當使用者單擊Edit時，可以將靜態表格重新整理為內容可編輯的表格。使用者單擊Done之後，就可以發出一個Ajax請求來補救伺服器，並重新整理表格，使其包含靜態、唯讀資料。

　　一切皆有可能！但願它能夠激發您開始開發自己的基於Ajax的網站。然而，在開始之前，讓我們介紹一個現有的Web網站，它遵循傳統的提交/等待/重新顯示的範例，我們還將討論Ajax如何提升使用者體驗。

　　　Ajax的工作原理相當於在使用者和伺服器之間加了—個中介層，使使用者操作與伺服器響應非同步化。這樣把以前的一些伺服器負擔的工作轉嫁到用戶端，利於用戶端閑置的處理能力來處理，減輕伺服器和頻寬的負擔，從而達到節約ISP的空間及頻寬租用成本的目的。

我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用：

(1)用文本字串的方式返回伺服器的響應來驗證網易通行證帳號是否存在；

(2)以XMLDocument對象方式返迴響應來驗證金山通行證帳號是否存在；

首先，我們需要用JavaScript來建立XMLHttpRequest 類向伺服器發送一個HTTP請求， XMLHttpRequest
類首先由Internet Explorer以ActiveX對象引入，被稱為XMLHTTP。 後來Mozilla﹑Netscape﹑Safari
和其他瀏覽器也提供了XMLHttpRequest類，不過它們建立XMLHttpRequest類的方法不同。

對於Internet Explorer瀏覽器，建立XMLHttpRequest 方法如下：

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP"); xmlhttp_request = new
ActiveXObject("Microsoft.XMLHTTP");

由於在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致，為了更好的相容不同版本的Internet
Explorer瀏覽器，因此我們需要根據不同版本的Internet
Explorer瀏覽器來建立XMLHttpRequest類，上面代碼就是根據不同的Internet
Explorer瀏覽器建立XMLHttpRequest類的方法。

對於Mozilla﹑Netscape﹑Safari等瀏覽器，建立XMLHttpRequest 方法如下：xmlhttp_request = new
XMLHttpRequest();

如果伺服器的響應沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。
為瞭解決這個問題，如果伺服器響應的header不是text/xml，可以調用其它方法修改該header。

xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');

在實際應用中，為了相容多種不同版本的瀏覽器，一般將建立XMLHttpRequest類的方法寫成如下形式：

try{ if( window.ActiveXObject ){ for( var i = 5; i; i-- ){ try{ if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" ); }
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312"); break;} catch(e){
xmlhttp_request = false; } } }else if( window.XMLHttpRequest ){ xmlhttp_request
= new XMLHttpRequest(); if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType('text/xml'); } } }catch(e){ xmlhttp_request =
false; }

在定義了如何處理響應後，就要發送請求了。可以調用HTTP請求類的open()和send()方法，如下所示：

xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);

open()的第一個參數是HTTP請求方式—GET，POST或任何伺服器所支援的您想調用的方式。
按照HTTP規範，該參數要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。

第二個參數是請求頁面的URL。

第三個參數佈建要求是否為非同步模式。如果是TRUE，JavaScript函數將繼續執行，而不等待伺服器響應。這就是"AJAX"中的"A"。

用JavaScript來建立XMLHttpRequest
類向伺服器發送一個HTTP請求後，接下來要決定當收到伺服器的響應後，需要做什麼。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設定為要使用的JavaScript的函數名，如下所示：xmlhttp_request.onreadystatechange
=FunctionName;

FunctionName是用JavaScript建立的函數名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼建立在onreadystatechange之後，例如：xmlhttp_request.onreadystatechange
= function(){

// JavaScript程式碼片段

};

在這個函數中。首先要檢查請求的狀態。只有當一個完整的伺服器響應已經收到了，函數才可以處理該響應。XMLHttpRequest
提供了readyState屬性來對伺服器響應進行判斷。

readyState的取值如下：

0 (未初始化)

1 (正在裝載)

2 (裝載完畢)

3 (互動中)

4 (完成)

所以只有當readyState=4時，一個完整的伺服器響應已經收到了，函數才可以處理該響應。具體代碼如下：

if (http_request.readyState == 4) { // 收到完整的伺服器響應 } else { // 沒有收到完整的伺服器響應
}當readyState=4時，一個完整的伺服器響應已經收到了，接著，函數會檢查HTTP伺服器響應的狀態值。完整的狀態取值可參見W3C文檔。當HTTP伺服器響應的值為200時，表示狀態正常。

在檢查完請求的狀態值和響應的HTTP狀態值後，就可以處理從伺服器得到的資料了。有兩種方式可以得到這些資料：(1)
以文本字串的方式返回伺服器的響應

(2) 以XMLDocument對象方式返迴響應

執行個體一： 用文本字串的方式返回伺服器的響應來驗證網易通行證帳號是否存在

首先，我們登陸網易通行證註冊頁面，可以看到檢測使用者名稱是否存在是將使用者名稱提交給checkssn.jsp頁面進行判斷，格式為：

reg.163.com/register/checkssn.jsp?username=使用者名稱
根據上面講到的方法，我們可以利用AJAX技術對網易通行證使用者名稱進行檢測：

第一步：建立一個基於Xhtml標準的網頁，在地區插入Javascript函數如下：

function getXMLRequester( )

{ var xmlhttp_request = false; try

{ if( window.ActiveXObject )

{ for( var i = 5; i; i-- ){ try{ if( i == 2 )

{ xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }

else

{ xmlhttp_request = new ActiveXObject

( "Msxml2.XMLHTTP." + i + ".0" );

xmlhttp_request.setRequestHeader

("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312"); }

break;}

catch(e){ xmlhttp_request = false; } } }

else if( window.XMLHttpRequest )

{ xmlhttp_request = new XMLHttpRequest();

if (xmlhttp_request.overrideMimeType)

{ xmlhttp_request.overrideMimeType('text/xml'); } } }

catch(e){ xmlhttp_request = false; }

return xmlhttp_request ; }

function IDRequest(n)

{//定義收到伺服器的響應後需要執行的JavaScript函數
url=n+document.getElementById('163id').value;

//定義網址參數 xmlhttp_request=getXMLRequester();

//調用建立XMLHttpRequest的函數 xmlhttp_request.onreadystatechange = doContents;

//調用doContents函數 xmlhttp_request.open('GET', url, true);
xmlhttp_request.send(null); } function doContents()

{ if (xmlhttp_request.readyState == 4)

{// 收到完整的伺服器響應 if (xmlhttp_request.status == 200) {

//HTTP伺服器響應的值OK document.getElementById('message').innerHTML =
xmlhttp_request.responseText;

//將伺服器返回的字串寫到頁面中ID為message的地區 }

else { alert(http_request.status); } } }

在地區建立一個文字框，id為163id

再建一個id為messsge的空白地區用來顯示返回字串(也可以通過Javascript函數截取一部分字串顯示)：

這樣，一個基於AJAX技術的使用者名稱檢測頁面就做好了，不過這個頁面將返回伺服器響應產生頁面的所有字串，當然還可以對返回的字串進行一些操作，便於應用到不同的需要當中。

執行個體二： 以XMLDocument對象方式返迴響應來驗證金山通行證帳號是否存在

在上面的例子中，當伺服器對HTTP請求的響應被收到後，我們會調用請求對象的reponseText屬性。該屬性包含了伺服器返迴響應檔案的內容。現在我們以XMLDocument對象方式返迴響應，此時將不再需要reponseText屬性而使用responseXML屬性。

首先登陸金山通行證註冊頁面，我們發現金山通行證使用者名稱的檢測方式為：
pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=使用者名稱,並且返回XML資料:

isExistedUid -2

當result值為-1時表示此使用者名稱已被註冊，當result值為-2時表示此使用者名稱尚未註冊，因此通過對result值的判斷可以知道使用者名稱是否被註冊。

對上例代碼進行修改：

首先找到

document.getElementById('message').innerHTML =
xmlhttp_request.responseText;

改為:

var response = xmlhttp_request.responseXML.documentElement;

var result =
response.getElementsByTagName('result')[0].firstChild.data;//返回result節點資料

if(result ==-2){

document.getElementById('message').innerHTML =
"使用者名稱"+document.getElementById('163id').value+"尚未註冊";}

else if(result ==-1){

document.getElementById('message').innerHTML =
"對不起,使用者名稱"+document.getElementById('163id').value+"已經註冊";}

通過以上兩個執行個體說明了AJAX的用戶端基礎應用，採用的是網易和金山現成的伺服器端程式，當然為了開發合適自己頁面的程式，還需要對自己編寫伺服器端程式，這設計到程式語言及資料庫的操作，對於有一定程式基礎的讀者一定不是很難的事情。

更多詳情：http://hi.baidu.com/tang818/blog/item/b201e36e78b214d880cb4a29.html