Ajax基本原理
摘要：本文介紹了Ajax的基本原理，交互過程和與之相關的技術及簡單的實現方法，在此基礎上給出了一個完整的實例，以使得能夠對Ajax有一個更清楚的理解。
關鍵字：Ajax，JavaScript，DOM，無刷新頁面，不完全刷新
引言
計算機桌面應用使我們得以用以前不能想象的方式處理大量的複雜數據；基於計算機網絡的C/S模式應用使得共享數據和資源成爲現實。然而，正如C/S模式的應用是由於人們不滿足單機的桌面應用一樣，人們對C/S模式也心存抱怨了：C/S模式除了帶給我們數據和資源共享的便利之外，也給我們帶來了令我們（程序開發設計人員）和客戶頭疼的部署和發佈問題。於是，B/S模式應用應運而生，而且得到了迅速的發展。B/S模式應用符合一定規範的瀏覽器作爲通用客戶端，從而解決了C/S模式中最令人頭疼的部署和發佈問題。但是，到此並沒有結束，B/S雖然解決了應用的部署和發佈問題，卻因爲種種限制，使得應用沒有了以前豐富的交互，並且每次與服務器的交互都要完全刷新頁面，這是非常糟糕和令人不快的。本文討論瞭如何解決頁面完全刷新和缺乏交互性的問題，我們用的方法就是――Ajax。
Ajax
那麼，Ajax到底是什麼呢？Ajax（Asynchronous JavaScript + XML），即異步JavaScript + XML的縮寫，這只是最初的觀點，最初由Jesse James Garrett創造出來的。但是，Ajax現在的覆蓋面已經有了進一步的擴展，把允許瀏覽器與服務器通信而無需刷新當前頁面的技術都涵蓋在其中了。
坦率的講，Ajax並不是什麼新鮮玩藝。也就是說，Ajax並不是一種全新的技術，而更像一種技巧，是把過去的幾種技術巧妙結合的技巧。真正與Ajax相關的新名詞應該是XMLHttpRequest――一個最早在IE 5中出現，最近開始在多數瀏覽器得到支持的用來實現異步通信的對象。正如前面所說，B/S模式是利用瀏覽器作爲其通用的客戶端，所以要想異步通訊成爲可能，必須要得到瀏覽器的支持。如果不是有了瀏覽器對XMLHttpRequest對象的廣泛支持，我們可能不會看到Ajax的今天，更不會看到許多對Ajax的著名應用，如Google Map，Google Suggest，Ta-da List等。
Ajax的處理過程是怎樣的呢？下圖爲Ajax應用的標準處理模式。
|
數據庫 |
|
XHR |
|
事件 |
|
Function callback() {//……} |
|
服務器資源 |
|
1 |
|
2 |
|
6 |
|
3 |
|
5 |
|
4 |
圖 1 標準Ajax處理過程
從圖中我們可以看出：由事件觸發，創建一個XMLHttpRequest對象，把HTTP方法（Get/Post）和目標URL以及請求返回後的回調函數設置到XMLHttpRequest對象，通過XMLHttpRequest向服務器發送請求，請求發送後繼續響應用戶的界面交互，只有等到請求真正從服務器返回的時候才調用callback()函數，對響應數據進行處理。
在這個交互過程中，涉及到幾種我們不得不提的技術：
1． XHTML和CSS――用來使表現標準化；
2．DOM――動態的修改文檔的內容和結構；
3．XML――進行數據的交換和處理；
4．JavaScript――對上述幾種技術進行綁定，使其成爲協同工作的整體。
Ajax相關技術及基本原理
1．XMLHttpRequest簡介
XMLHttpRequest，是我們得以實現異步通訊的根本。最早在IE 5 中以ActiveX組件實現；最近，Mozilla 1.0和Safari 1.2中實現爲本地對象。XMLHttpRequest雖然不是W3C標準，但卻得到了FireFox、Safari、Opera、Konqueror、IE等絕大多數瀏覽器的支持。這就使得Ajax有了今天如火如荼的發展。
用XMLHttpRequest進行異步通訊，首先必須用JavaScript創建一個XMLHttpRequest對象實例。創建XMLHttpRequest對象實例的代碼清單如下所示：
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
可以看出，創建XMLHttpRequest對象相當容易。首先，聲明一個全局變量xmlHttp用來保存即將創建的XMLHttpRequest對象的引用；然後，在createXMLHttpRequest()方法中完成具體創建工作。因爲IE與其他瀏覽器對XMLHttpRequest 對象的實現方法不同，因此在創建時，通過一個分支語句進行判斷。如果window.ActiveXObject調用返回true，則證明爲IE瀏覽器，那麼就通過傳遞“Microsoft.XMLHTTP”給ActiveXObject()來創建XMLHttpRequest對象，否則就把XMLHttpRequest實現爲本地JavaScript對象。XMLHttpRequest對象在不同瀏覽器上的實現是兼容的，所以可以用同樣的方法訪問XMLHttpRequest的方法和屬性。
表 1 標準XMLHttpRequest方法
|
方 法 |
說 明 |
|
abort() getAllResponseHeader() getResponseHeader("Header") open("method", "url") send(content) setRequestHeader("header", "value") |
停止當前請求 把HTTP請求的所有響應頭部作爲鍵/值對返回 返回指定首部的串值 建立對服務器的調用 向服務器發送請求 把指定首部設置爲所提供的值 |
表 2 標準XMLHttpRequest屬性
|
屬 性 |
說 明 |
|
onreadystatechange readyState responseText responseXML status statusText |
每個狀態改變都會觸發這個事件處理器 請求的狀態：0－未初始化，1－正在加載，2－已加載，3－交互中，4－完成 服務器的響應，表示爲一個文本字符串值 服務器的響應，表示爲一個XML 服務器的HTTP狀態碼 HTTP狀態碼的相應文本 |
2．利用XMLHttpRequest對象發送簡單請求
創建了XMLHttpRequest對象，並瞭解了XMLHttpRequest對象的方法和屬性之後，讓我們來看看怎樣利用XMLHttpRequest對象發送簡單的請求。利用XMLHttpRequest對象發送簡單請求的基本步驟如下：
1） 創建XMLHttpRequest對象實例。
2） 設定XMLHttpRequest對象的回調函數，利用onreadystatechange屬性。
3） 設定請求屬性：設定HTTP方法（GET或POST）；設定目標URL。利用open()方法。
4） 將請求發送給服務器。利用send()方法。
3．利用DOM對服務器響應進行處理
前面已經設置了回調函數，回調函數正是用來處理服務器響應信息的。但是，別忘了我們的最終目的：解決頁面完全刷新和缺乏交互性的問題。在服務器對我們的請求信息作出響應後，我們就得實現頁面的無縫更新（就是無閃爍的更新信息）。要實現這一點，那麼就不得不提到DOM了。
DOM（Document Object Model）,文檔對象模型，是以面向對象方式描述頁面文檔的對象模型。DOM中定義了，與平臺和語言無關的，用來表示和修改文檔所需的對象、以及這些對象的屬性和方法。通過DOM，我們可以把頁面上的數據和結構抽象成一個樹型表示，進而可以通過DOM中定義的屬性和方法對文檔進行操作，如遍歷、編輯等。
這樣，服務器相應信息就可以通過DOM的方法和屬性，動態的更新到頁面的相應節點。
從而使用戶感覺不到刷新過程的存在，提高了交互性。
4．一個完整的例子
在這裏我們給出一個完整的利用Ajax的實例。實例包含兩個文件：Request.htm和Response.xml。通過Request.htm向服務器發送請求，而Response.xml模仿了從服務器返回的響應。兩個文件清單如下：
<!--Request.htm----------------------------------------------------------->
<html>
<head>
<title>Ajax應用實例</title>
<script type="text/javaScript">
var xmlHttp;
var requestType="";
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(theRequestType){
requestType = theRequestType;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET","Response.xml",true);
xmlHttp.send(null);
}
function myCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
if(requestType=="all")
listAll();
else if(requestType=="north")
listNorth();
}
}
}
function listAll(){
var xmlDoc = xmlHttp.responseXML;
var allProvs = xmlDoc.getElementsByTagName("prov");
outputList("all",allProvs);
}
function listNorth(){
var xmlDoc = xmlHttp.responseXML;
var north = xmlDoc.getElementsByTagName("north")[0];
var northProvs = north.getElementsByTagname("prov");
outputList("north",northProvs);
}
function outputList(title,provs){
var out=title;
var currentProv = null;
for(var i=0;i<provs.length;i++){
currentProv = provs[i];
out = out + “<br/>” + currentProv.childNodes[0].nodeValue;
}
document.getElementById(title).innerHTML = out;
}
</script>
</head>
<body>
<h1> Ajax應用實例</h1>
<form action="#">
<input type="button" value="列出所有沿海省市"
cοnclick="startRequest('all');"/>
<div id="all"></div>
<input type="button" value="列出江北沿海省市"
cοnclick="startRequest('north');"/>
<div id="north"></div>
</form>
</body>
</html>
<!--Response.xml---------------------------------------------------------->
<?xml version="1.0"encoding="utf-8" ?>
<provs>
<north>
<prov>遼寧</prov><prov>河北</prov><prov>天津</prov>
<prov>山東</prov><prov>江蘇</prov>
</north>
<south>
<prov>浙江</prov><prov>福建</prov><prov>廣東</prov>
<prov>廣西</prov><prov>海南</prov><prov>上海</prov>
<prov>臺灣</prov><prov>香港</prov><prov>澳門</prov>
</south>
</provs>
小結
我們已經瞭解了Ajax的基本原理和相關的技術。其實，Ajax就是通過JavaScript創建XMLHttpRequest對象，再由JavaScript調用XMLHttpRequest對象的方法完成異步通信；然後，再由JavaScript通過DOM的屬性和方法，完成頁面的不完全刷新。