如果你不使用任何的幫助程序包，你很可能編寫(xiě)了整個(gè)大量的代碼來(lái)創(chuàng)建XMLHttpRequest對(duì)象并且異步的跟蹤它的進(jìn)程， 然后解析出響應(yīng) 然后處理它。當(dāng)你不需要支持多于一種類(lèi)型的瀏覽器時(shí)你會(huì)感到非常的幸運(yùn)。

為了支持 AJAX 功能。這個(gè)包定義了 Ajax.Request 類(lèi)。

假如你有一個(gè)應(yīng)用程序可以通過(guò)url http://yoursever/app/get_sales?empID=1234&year=1998與服務(wù)器通信。它返回下面這樣的XML 響應(yīng)。

<?xml version="1.0" encoding="utf-8" ?>

<ajax-response>

<response type="object" id="productDetails">

<monthly-sales>

<employee-sales>

<employee-id>1234</employee-id>

<year-month>1998-01</year-month>

<sales>$8,115.36</sales>

</employee-sales>

<employee-sales>

<employee-id>1234</employee-id>

<year-month>1998-02</year-month>

<sales>$11,147.51</sales>

</employee-sales>

</monthly-sales>

</response>

</ajax-response>

用 Ajax.Request對(duì)象和服務(wù)器通信并且得到這段XML是非常簡(jiǎn)單的。下面的例子演示了它是如何完成的。

<script>

function searchSales()

{

var empID = $F('lstEmployees');

var y = $F('lstYears');

var url = 'http://yoursever/app/get_sales';

var pars = 'empID=' + empID + '&year=' + y;

var myAjax = new Ajax.Request(

url,

{method: 'get', parameters: pars, onComplete: showResponse}

);



}



function showResponse(originalRequest)

{

//put returned XML in the textarea

$('result').value = originalRequest.responseText;

}

</script>



<select id="lstEmployees" size="10" onchange="searchSales()">

<option value="5">Buchanan, Steven</option>

<option value="8">Callahan, Laura</option>

<option value="1">Davolio, Nancy</option>

</select>

<select id="lstYears" size="3" onchange="searchSales()">

<option selected="selected" value="1996">1996</option>

<option value="1997">1997</option>

<option value="1998">1998</option>

</select>

<br><textarea id=result cols=60 rows=10 ></textarea>

你看到傳入 Ajax.Request構(gòu)造方法的第二個(gè)對(duì)象了嗎？ 參數(shù){method: 'get', parameters: pars, onComplete: showResponse} 表示一個(gè)匿名對(duì)象的真實(shí)寫(xiě)法。他表示你傳入的這個(gè)對(duì)象有一個(gè)名為 method 值為 'get'的屬性，另一個(gè)屬性名為 parameters 包含HTTP請(qǐng)求的查詢(xún)字符串，和一個(gè)onComplete 屬性/方法包含函數(shù)showResponse。

還有一些其它的屬性可以在這個(gè)對(duì)象里面定義和設(shè)置，如 asynchronous，可以為true 或 false 來(lái)決定AJAX對(duì)服務(wù)器的調(diào)用是否是異步的（默認(rèn)值是 true）。

這個(gè)參數(shù)定義AJAX調(diào)用的選項(xiàng)。在我們的例子中，在第一個(gè)參數(shù)通過(guò)HTTP GET命令請(qǐng)求那個(gè)url，傳入了變量 pars包含的查詢(xún)字符串， Ajax.Request 對(duì)象在它完成接收響應(yīng)的時(shí)候?qū)⒄{(diào)用showResponse 方法。

也許你知道， XMLHttpRequest在HTTP請(qǐng)求期間將報(bào)告進(jìn)度情況。這個(gè)進(jìn)度被描述為四個(gè)不同階段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 對(duì)象在任何階段調(diào)用自定義方法 ，Complete 是最常用的一個(gè)。想調(diào)用自定義的方法只需要簡(jiǎn)單的在請(qǐng)求的選項(xiàng)參數(shù)中的名為 onXXXXX 屬性/方法中提供自定義的方法對(duì)象。 就像我們例子中的 onComplete 。你傳入的方法將會(huì)被用一個(gè)參數(shù)調(diào)用，這個(gè)參數(shù)是 XMLHttpRequest 對(duì)象自己。你將會(huì)用這個(gè)對(duì)象去得到返回的數(shù)據(jù)并且或許檢查包含有在這次調(diào)用中的HTTP結(jié)果代碼的 status 屬性。

還有另外兩個(gè)有用的選項(xiàng)用來(lái)處理結(jié)果。我們可以在onSuccess 選項(xiàng)處傳入一個(gè)方法，當(dāng)AJAX無(wú)誤的執(zhí)行完后調(diào)用， 相反的，也可以在onFailure選項(xiàng)處傳入一個(gè)方法，當(dāng)服務(wù)器端出現(xiàn)錯(cuò)誤時(shí)調(diào)用。正如onXXXXX 選項(xiàng)傳入的方法一樣，這兩個(gè)在被調(diào)用的時(shí)候也傳入一個(gè)帶有AJAX請(qǐng)求的XMLHttpRequest對(duì)象。

我們的例子沒(méi)有用任何有趣的方式處理這個(gè) XML響應(yīng)， 我們只是把這段XML放進(jìn)了一個(gè)文本域里面。對(duì)這個(gè)響應(yīng)的一個(gè)典型的應(yīng)用很可能就是找到其中的想要的信息，然后更新頁(yè)面中的某些元素， 或者甚至可能做某些XSLT轉(zhuǎn)換而在頁(yè)面中產(chǎn)生一些HTML。

更完全的解釋?zhuān)?qǐng)參照 Ajax.Request 參考 和 Ajax選項(xiàng)參考。

如果你的服務(wù)器的另一端返回的信息已經(jīng)是HTML了，那么使用這個(gè)程序包中 Ajax.Updater 類(lèi)將使你的生活變得更加得容易。用它你只需提供哪一個(gè)元素需要被AJAX請(qǐng)求返回的HTML填充就可以了，例子比我寫(xiě)說(shuō)明的更清楚。

<script>

function getHTML()

{

var url = 'http://yourserver/app/getSomeHTML';

var pars = 'someParameter=ABC';



var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});



}

</script>



<input type=button value=GetHtml onclick="getHTML()">

<div id="placeholder"></div>

你可以看到，這段代碼比前面的例子更加簡(jiǎn)潔，不包括 onComplete 方法，但是在構(gòu)造方法中傳入了一個(gè)元素id。 我們來(lái)稍稍修改一下代碼來(lái)描述如何在客戶(hù)端處理服務(wù)器段錯(cuò)誤成為可能。

我們將加入更多的選項(xiàng)， 指定處理錯(cuò)誤的一個(gè)方法。這個(gè)是用 onFailure 選項(xiàng)來(lái)完成的。

我們也指定了一個(gè) placeholder 只有在成功請(qǐng)求之后才會(huì)被填充。為了完成這個(gè)目的我們修改了第一個(gè)參數(shù)從一個(gè)簡(jiǎn)單的元素id到一個(gè)帶有兩個(gè)屬性的對(duì)象， success (一切OK的時(shí)候被用到) 和 failure (有地方出問(wèn)題的時(shí)候被用到) 在下面的例子中沒(méi)有用到failure屬性，而僅僅在 onFailure 處使用了 reportError 方法。

<script>

function getHTML()

{

var url = 'http://yourserver/app/getSomeHTML';

var pars = 'someParameter=ABC';

var myAjax = new Ajax.Updater(

{success: 'placeholder'},

url,

{method: 'get', parameters: pars, onFailure: reportError});



}



function reportError(request)

{

alert('Sorry. There was an error.');

}

</script>



<input type=button value=GetHtml onclick="getHTML()">

<div id="placeholder"></div>

如果你的服務(wù)器邏輯是返回JavaScript 代碼而不是單純的 HTML 標(biāo)記， Ajax.Updater對(duì)象可以執(zhí)行那段JavaScript代碼。為了使這個(gè)對(duì)象對(duì)待響應(yīng)為JavaScript，你只需在最后參數(shù)的對(duì)象構(gòu)造方法中簡(jiǎn)單加入evalScripts: true屬性。