Ajax的工作原理相當于在用戶(hù)和服務(wù)器之間加了—個(gè)中間層，使用戶(hù)操作與服務(wù)器響應異步化。這樣把以前的一些服務(wù)器負擔的工作轉嫁到客戶(hù)端，利于客戶(hù)端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負擔，從而達到節約ISP的空間及帶寬租用成本的目的。
我們以?xún)蓚€(gè)驗證通行證賬號是否存在的例子來(lái)講述AJAX在實(shí)際中的應用：
(1)用文本字符串的方式返回服務(wù)器的響應來(lái)驗證網(wǎng)易通行證賬號是否存在；
(2)以XMLDocument對象方式返回響應來(lái)驗證金山通行證賬號是否存在；
首先，我們需要用JavaScript來(lái)創(chuàng )建XMLHttpRequest 類(lèi)向服務(wù)器發(fā)送一個(gè)HTTP請求， XMLHttpRequest 類(lèi)首先由Internet Explorer以ActiveX對象引入，被稱(chēng)為XMLHTTP。 后來(lái)Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類(lèi)，不過(guò)它們創(chuàng )建XMLHttpRequest類(lèi)的方法不同。
對于Internet Explorer瀏覽器，創(chuàng )建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瀏覽器來(lái)創(chuàng )建XMLHttpRequest類(lèi)，上面代碼就是根據不同的Internet Explorer瀏覽器創(chuàng )建XMLHttpRequest類(lèi)的方法。
對于Mozilla﹑Netscape﹑Safari等瀏覽器，創(chuàng )建XMLHttpRequest 方法如下：
xmlhttp_request = new XMLHttpRequest();
如果服務(wù)器的響應沒(méi)有XML mime-type header，某些Mozilla瀏覽器可能無(wú)法正常工作。 為了解決這個(gè)問(wèn)題，如果服務(wù)器響應的header不是text/xml，可以調用其它方法修改該header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType(‘text/xml‘);
在實(shí)際應用中，為了兼容多種不同版本的瀏覽器，一般將創(chuàng )建XMLHttpRequest類(lèi)的方法寫(xiě)成如下形式：
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; }
在定義了如何處理響應后，就要發(fā)送請求了?？梢哉{用HTTP請求類(lèi)的open()和send()方法，如下所示：
xmlhttp_request.open(‘GET‘, URL, true); xmlhttp_request.send(null);
open()的第一個(gè)參數是HTTP請求方式—GET，POST或任何服務(wù)器所支持的您想調用的方式。 按照HTTP規范，該參數要大寫(xiě)；否則，某些瀏覽器(如Firefox)可能無(wú)法處理請求。
第二個(gè)參數是請求頁(yè)面的URL。
第三個(gè)參數設置請求是否為異步模式。如果是TRUE，JavaScript函數將繼續執行，而不等待服務(wù)器響應。這就是"AJAX"中的"A"。
用JavaScript來(lái)創(chuàng )建XMLHttpRequest 類(lèi)向服務(wù)器發(fā)送一個(gè)HTTP請求后，接下來(lái)要決定當收到服務(wù)器的響應后，需要做什么。這需要告訴HTTP請求對象用哪一個(gè)JavaScript函數處理這 個(gè)響應?？梢詫ο蟮膐nreadystatechange屬性設置為要使用的JavaScript的函數名，如下所示： xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript創(chuàng )建的函數名，注意不要寫(xiě)成FunctionName()，當然我們也可以直接將JavaScript代碼創(chuàng )建在onreadystatechange之后，例如：
xmlhttp_request.onreadystatechange = function(){
// JavaScript代碼段
};
在這個(gè)函數中。首先要檢查請求的狀態(tài)。只有當一個(gè)完整的服務(wù)器響應已經(jīng)收到了，函數才可以處理該響應。XMLHttpRequest 提供了readyState屬性來(lái)對服務(wù)器響應進(jìn)行判斷。
readyState的取值如下：
0 (未初始化)
1 (正在裝載)
2 (裝載完畢)
3 (交互中)
4 (完成)
所以只有當readyState=4時(shí)，一個(gè)完整的服務(wù)器響應已經(jīng)收到了，函數才可以處理該響應。具體代碼如下：
if (http_request.readyState == 4) {
// 收到完整的服務(wù)器響應
} else {
// 沒(méi)有收到完整的服務(wù)器響應
}
當readyState=4時(shí)，一個(gè)完整的服務(wù)器響應已經(jīng)收到了，接著(zhù)，函數會(huì )檢查HTTP服務(wù)器響應的狀態(tài)值。完整的狀態(tài)取值可參見(jiàn)W3C文檔。當HTTP服務(wù)器響應的值為200時(shí)，表示狀態(tài)正常。
在檢查完請求的狀態(tài)值和響應的HTTP狀態(tài)值后，就可以處理從服務(wù)器得到的數據了。有兩種方式可以得到這些數據：(1) 以文本字符串的方式返回服務(wù)器的響應
(2) 以XMLDocument對象方式返回響應
實(shí)例一： 用文本字符串的方式返回服務(wù)器的響應來(lái)驗證網(wǎng)易通行證賬號是否存在
首先，我們登陸網(wǎng)易通行證注冊頁(yè)面，可以看到檢測用戶(hù)名是否存在是將用戶(hù)名提交給checkssn.jsp頁(yè)面進(jìn)行判斷，格式為：
reg.163.com/register/checkssn.jsp?username=用戶(hù)名 根據上面講到的方法，我們可以利用AJAX技術(shù)對網(wǎng)易通行證用戶(hù)名進(jìn)行檢測：
第一步：新建一個(gè)基于Xhtml標準的網(wǎng)頁(yè)，在區域插入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)
{
//定義收到服務(wù)器的響應后需要執行的JavaScript函數 url=n+document.getElementById(‘163id‘).value;
//定義網(wǎng)址參數 xmlhttp_request=getXMLRequester();
//調用創(chuàng )建XMLHttpRequest的函數 xmlhttp_request.onreadystatechange = doContents;
//調用doContents函數 xmlhttp_request.open(‘GET‘, url, true); xmlhttp_request.send(null); } function doContents()
{
if (xmlhttp_request.readyState == 4)
{
// 收到完整的服務(wù)器響應
if (xmlhttp_request.status == 200) {
//HTTP服務(wù)器響應的值OK
document.getElementById(‘message‘).innerHTML = xmlhttp_request.responseText;
//將服務(wù)器返回的字符串寫(xiě)到頁(yè)面中ID為message的區域 }
else {
alert(http_request.status);
}
}
}
在區域建立一個(gè)文本框，id為163id
再建一個(gè)id為messsge的空白區域用來(lái)顯示返回字符串(也可以通過(guò)Javascript函數截取一部分字符串顯示)：
這樣，一個(gè)基于A(yíng)JAX技術(shù)的用戶(hù)名檢測頁(yè)面就做好了，不過(guò)這個(gè)頁(yè)面將返回服務(wù)器響應生成頁(yè)面的所有字符串，當然還可以對返回的字符串進(jìn)行一些操作，便于應用到不同的需要當中。
實(shí)例二： 以XMLDocument對象方式返回響應來(lái)驗證金山通行證賬號是否存在
在上面的例子中，當服務(wù)器對HTTP請求的響應被收到后，我們會(huì )調用請求對象的reponseText屬性。該屬性包含了服務(wù)器返回響應文件的 內容?，F在我們以XMLDocument對象方式返回響應，此時(shí)將不再需要reponseText屬性而使用responseXML屬性。
首先登陸金山通行證注冊頁(yè)面，我們發(fā)現金山通行證用戶(hù)名的檢測方式為： pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶(hù)名,并且返回XML數據:
isExistedUid -2
當result值為-1時(shí)表示此用戶(hù)名已被注冊，當result值為-2時(shí)表示此用戶(hù)名尚未注冊，因此通過(guò)對result值的判斷可以知道用戶(hù)名是否被注冊。
對上例代碼進(jìn)行修改：
首先找到
document.getElementById(‘message‘).innerHTML = xmlhttp_request.responseText;
改為:
var response = xmlhttp_request.responseXML.documentElement;
var result = response.getElementsByTagName(‘result‘)[0].firstChild.data;//返回result節點(diǎn)數據
if(result ==-2){
document.getElementById(‘message‘).innerHTML = "用戶(hù)名"+document.getElementById(‘163id‘).value+"尚未注冊";}
else if(result ==-1){
document.getElementById(‘message‘).innerHTML = "對不起,用戶(hù)名"+document.getElementById(‘163id‘).value+"已經(jīng)注冊";}
通過(guò)以上兩個(gè)實(shí)例說(shuō)明了AJAX的客戶(hù)端基礎應用，采用的是網(wǎng)易和金山現成的服務(wù)器端程序，當然為了開(kāi)發(fā)合適自己頁(yè)面的程序，還需要對自己編寫(xiě)服務(wù)器端程序，這設計到程序語(yǔ)言及數據庫的操作，對于有一定程序基礎的讀者一定不是很難的事情。
聯(lián)系客服
