一、 簡介
異步JavaScript＋XML（即
AJax），是一種創建交互式web應用程序的
web開發技術。這種程序使用JavaScript和XML從客戶端提交服務器請求，且整個過程中僅需要交換少量的數據而不必提交整個web頁面。因此，這樣的程序將更快和更具響應性，並將成為新一代客戶機-服務器系統的重要基礎技術之一。你可以在站點
http://www.google.com/webhp?complete=1&;hl=en處看到一種良好的
AJax實踐技術展示。在此頁面中，如果你把任何字母輸入到文本框內，那麼隨後就會出現一個下拉列表框，其中的內容直接來自於服務器而不必提交整個頁面。
AJax的核心是XMLHttpRequest對象。客戶端能夠在後台檢索並直接提交XML數據。為了把檢索的XML數據轉換成可生成的HTML內容，需要依賴於客戶端文檔對象模型(DOM)讀取XML文檔結點樹並且組成用戶看得見的Html元素。其實，
AJax並非象HTML，DHtml等一樣的單一技術，它結合了不同的技術：
·
XMLHttpRequest對象被使用於與web服務器異步地交換數據。
·XML被普遍用作把數據傳輸回服務器的格式（盡管任何格式都能使用，例如普通文本，Html等）。
·如果使用XML作為轉換格式，那麼DOM通常與如JavaScript這樣的客戶端腳本語言一起使用來動態地顯示和描述交互信息。
·XHTML(或Html)，CSS用於標記和信息格式化。
二、 XMLHttpRequest對象 從歷史來看，是微軟首先在其Internet Explorer 5 for Windows中以一個ActiveX對象形式實現了
XMLHttpRequest對象。隨後，由Mozilla工程的工程師實現了Mozilla 1.0（和Netscape 7）的一種兼容的本機版本；而稍後，蘋果公司在其Safari 1.2上也實現了相同的工作。其實，在W3C標准的文檔對象模型（DOM）Level 3加載與存儲規范中，也提到了類似的功能。現在，它成為一種事實上的標准，並開始在以後發行的大多數浏覽器中得到實現。
(一) 創建對象
XMLHttpRequest對象的創建方式因浏覽器不同而有所不同。對於Safari和Mozilla來說，其創建方式如下所示：
var req = new XMLHttpRequest();
對於Internet Explorer 5.0＋（指5.0及更高版本），則要把對象名傳遞到ActiveX構造函數中：
var req = new ActiveXObject("Microsoft.XMLHTTP");
該對象的方法控制所有的操作，而其屬性存儲從服務器返回的各種數據片斷，例如XMLHttpObject.responseText包含從服務器返回的XML或字符串值。
(二) 方法
在Windows IE 5.0＋、Safari 1.2和Mozila中支持的XMLHttpRequest對象的方法列舉如下：
方法
描述
abort()
取消當前的請求。如果你在一個不處理請求(readyState 0或4)的對象上調用它，"神秘的事情"發生了。
getResponseHeader("headerLabel")
返回單個頭標簽的字符串值
getAllResponseHeaders()
以一個串形式返回完整的頭(標簽和值)集合
open("method"，"URL"[，asyncFlag[， "userName"[，"passWord"]]])
指派目標URL、方法及一個懸掛請求的其它可選屬性
send(content)
傳輸請求。（可選擇地）其中可以加入可寄送的字符串或DOM對象數據
setRequestHeader("label"，"value")
把一個標簽/值對指派給要發送的請求中的頭部
在上面的方法中，open和send方法是最重要的。下面，讓我們首先從應用程序的觀點來討論open方法。
var req;
………………………
req = new ActiveXObject("Microsoft.XMLHTTP");
……………
var url="
AJaxServer.ASPx?PubID="+ID;
……………
//打開一個到URL的GET請求
req.open("GET"，url，true);
//實際發送一個空請求
req.send(null);
注意 在這個示例應用程序中，
AJaxClIEnt.ASPx頁面是用戶接口，
AJaxServer.ASPx則負責提供每一個用戶請求時的數據。要特別注意的是，
AJaxServer.ASPx頁面不應該包含任何HTML。你可以測試一下如果頁面包含Html將會發生什麼。
open方法的第一個參數（見上面表格中的Open函數）指示當前操作為一個GET操作或是POST操作。在進行簡單的數據檢索時，一般使用GET。當向外傳輸的數據包大於512字節且操作包括服務器端活動（如插入，更新等）時，一般使用Post。接下來，我們看一下"url"參數。這個參數可以是一個完整的url也可以是一個相對url。在上面例子中，使用的是相對的url。"asyncFlag"參數指示在執行send方法後是否立即處理到來的腳本（這意味著不必等待是否有響應）。最後兩個參數分別是"username"和"passWord"，如果"url"中提供這些數據的話。
另一個重要的方法是send方法，它實際上使用一個消息體發送請求。對於本例而言，它只是發送一個空請求。
[
//實際發送一個空請求
req.send(null);
]
(三) 屬性
屬性
描述
onreadystatechange
每當狀態改變時激發的事件的事件處理器。其中，readyState對象狀態整數含義如下：0=uninitialized1=loading2=loaded3=interactive4=complete
responseText
經服務器處理後返回的數據的字符串版本
responseXML
經服務器處理後返回的DOM兼容的數據文檔對象
status
由服務器返回的數字代碼，例如404代表"Not Found"，200代表"OK"
statusText
伴隨著狀態代碼的字符串信息
在此，應用程序中使用了onreadystatechange：
//這是事件處理器機制;在本例中，"RequestProcessor"即是事件處理器。
req.onreadystatechange=RequestProcessor;
對於這個應用程序來說，"RequestProcessor"是客戶端的事件處理器。現在，在事件處理器內，使用readyState屬性來獲得各種狀態。值4顯示已經完成某種處理。現在，在處理結果前，你應該檢查狀態或statusText以決定操作成功與否。在這個應用程序中，我是以下面方式實現的：
function RequestProcessor()
{
//如果readyState處理"Ready"狀態
if(req.readyState == 4)
{
//返回的狀態代碼200意味著一切順利
if(req.status == 200)
{
//如果responseText不空
//req.responseText實際上是一個由
AJaxServer.ASPx的"Response.Write("" + sbXML.ToString() + "");"方法編寫的字符串
if(req.responseText != "")
{
populateList(req.responseXML);
}
else
{
clearSelect(publishedBooks);
}
}
}
return true;
}
注意 對象req被聲明為一個頁面級的變量：
var req = new ActiveXObject("Microsoft.XMLHTTP");
警告 請求目的的url必須與客戶端腳本處於同一個域中。原因是，XMLHttpRequest對象采用與客戶端腳本一致的封裝技術。在大多數支持這種功能的浏覽器上，擁有存取XMLHttpRequest對象的腳本的頁面都需要使用http:協議檢索。這意味著，你無法在一個本地硬盤上(file:協議)進行頁面測試。 三、 實際問題 在
AJax中，如果網絡或遠程服務器出現中斷，會發生什麼呢？實際上，存在兩個主要問題；默認地，它們並沒有在
XMLHttpRequest對象中得到解決。這兩個主要問題是：
1.處理延遲：如果網絡或遠程服務器耗費較多時間，那麼這個問題如何與你的
AJax應用程序相聯系呢?
2.響應順序：潛在地，網絡(或服務器)會不斷變化。這意味著，響應可能不會以與請求相同的順序返回。
為了處理上面這兩個問題，程序員必須編寫代碼來解決這個問題。對於第一個問題，一種可能的方案如下所示：
function callInProgress(XMLhttp) {
switch ( XMLhttp.readyState ) {
case 1，2，3:
return true;
break;
//Case 4和0
default:
return false;
break;
}
}
現在，在調用send()前，我可以先檢查一下是否該對象正處於忙態：
if ( !callInProgress(XMLhttp) ) {
XMLhttp.send(null);
} else {
alert("I'm busy. Wait a moment");
}
(一) 支持
AJax技術的浏覽器
·微軟Internet Explorer版本5.0及以上版本，和基於它的浏覽器（Mac OS版本不支持）
·基於Gecko的浏覽器，如Mozilla，Mozilla Firefox，SeaMonkey，Epiphany，Galeon和Netscape版本7.1及以上版本
·實現KHtml API版本3.2及以上版本的浏覽器，包括Konqueror版本3.2及以上版本，還有Apple Safari版本1.2及以上版本
·Opera浏覽器版本8.0及以上版本，包括Opera Mobile浏覽器版本8.0及以上版本
(二) 不支持
AJax技術的浏覽器
·Opera 7及以下版本
·微軟Internet Explorer 4.0及以下版本
·基於文本的浏覽器，如Lynx和Links
·沒有可視化實現的浏覽器
·1997年以前的浏覽器
(三) 本文示例應用程序特定需求
軟件要求：
1.
ASP.Net 2.0；
2.MS
SQL Server 2000，並要求相應的pubs數據庫設置；
3.改變web.config文件中的DB連接字符串("CONN_STRING"鍵)。
＜APPSETTINGS＞
＜ADD value="data source=cal-slcu2-196;Database=pubs;User=sa;PWD=sa" key="CONN_STRING" /＞
＜/APPSETTINGS＞
變量或類名應該象上面這樣被包括到＜code＞標記中。
四、 總結 本文概括性地歸納了基於
AJax技術構建下一代流行Web應用程序的主要技術及有關概念，並給出一個完整示例程序的關鍵片斷的分析。