一、 簡介
異步javascript＋xml（即ajax），是一種創建交互式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應用程序的主要技術及有關概念，并給出一個完整示例程序的關鍵片斷的分析。
