使用AJAX技術構建更優秀的Web應用程式

一、 簡介

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