Web2.0中Ajax應用的詳解

ajax|web|web2|詳解

最近互連網上比較火熱的話題當然是關於WEB2.0的應用，其中AJAX又是WEB2.0的核心之一。

AJAX是Asynchronous JavaScript and XML 的縮寫。它並不是一門新的語言或技術，它實際上是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用，它包括:使用XHTML和CSS標準化呈現;使用DOM實現動態顯示和互動;使用XML和XSLT進行資料交換與處理;使用XMLHttpRequest進行非同步資料讀取;最後用JavaScript綁定和處理所有資料。

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

我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用：用文本字串的方式返回伺服器的響應來驗證網易通行證帳號是否存在；以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.getElementByI('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的用戶端基礎應用，採用的是網易和金山現成的伺服器端程式，當然為了開發合適自己頁面的程式，還需要對自己編寫伺服器端程式，這設計到程式語言及資料庫的操作，對於有一定程式基礎的讀者一定不是很難的事情。

示範地址：

說明：已經將製作好的檔案上傳到我的Blog,大家可以進行測試,由於Ajax和Xmlhttp不能跨域請求,所以測試時請調整IE的安全層級或者將xiacong.com暫時加入信任網站.

網易通行證查詢示範(AJAX): www.xiacong.com/test/163.htm

金山通行證查詢示範(AJAX): www.xiacong.com/test/j3.htm

編輯提示：更多Ajax內容，請進入 Ajax開發應用專欄