一、 簡介
非同步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應用程式的主要技術及有關概念，並給出一個完整樣本程式的關鍵片斷的分析。
