Ajax 對象
上面提到的共通方法非常好，但是面對它吧，它們不是最高級的那類東西。它們是嗎？你很可能自己編寫了這些甚至在你的腳本里面有類似功能的方法。但是這些方法只是冰山一角。
我很肯定你對prototype.js感興趣的原因很可能是由于它的AJAX能力。所以讓我們解釋當你需要完成AJAX邏輯的時候，這個包如何讓它更容易。
Ajax 對象是一個預(yù)定義對象，由這個包創(chuàng)建，為了封裝和簡化編寫AJAX 功能涉及的狡猾的代碼。 這個對象包含一系列的封裝AJAX邏輯的類。我們來看看它們的一些。
如果你不使用任何的幫助程序包，你很可能編寫了整個大量的代碼來創(chuàng)建XMLHttpRequest對象并且異步的跟蹤它的進程，然后解析出響應(yīng) 然后處理它。當你不需要支持多于一種類型的瀏覽器時你會感到非常的幸運。
為了支持 AJAX 功能。這個包定義了 Ajax.Request 類。
假如你有一個應(yīng)用程序可以通過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對象和服務(wù)器通信并且得到這段XML是非常簡單的。下面的例子演示了它是如何完成的。
<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)造方法的第二個對象了嗎？參數(shù){method: 'get', parameters: pars, onComplete: showResponse} 表示一個匿名對象的真實寫法。他表示你傳入的這個對象有一個名為 method 值為 'get'的屬性，另一個屬性名為 parameters 包含HTTP請求的查詢字符串，和一個onComplete 屬性/方法包含函數(shù)showResponse。
還有一些其它的屬性可以在這個對象里面定義和設(shè)置，如 asynchronous，可以為true 或 false 來決定AJAX對服務(wù)器的調(diào)用是否是異步的（默認值是 true）。
這個參數(shù)定義AJAX調(diào)用的選項。在我們的例子中，在第一個參數(shù)通過HTTP GET命令請求那個url，傳入了變量 pars包含的查詢字符串， Ajax.Request 對象在它完成接收響應(yīng)的時候?qū)⒄{(diào)用showResponse 方法。
也許你知道， XMLHttpRequest在HTTP請求期間將報告進度情況。這個進度被描述為四個不同階段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 對象在任何階段調(diào)用自定義方法 ，Complete 是最常用的一個。想調(diào)用自定義的方法只需要簡單的在請求的選項參數(shù)中的名為 onXXXXX 屬性/方法中提供自定義的方法對象。 就像我們例子中的 onComplete 。你傳入的方法將會被用一個參數(shù)調(diào)用，這個參數(shù)是 XMLHttpRequest 對象自己。你將會用這個對象去得到返回的數(shù)據(jù)并且或許檢查包含有在這次調(diào)用中的HTTP結(jié)果代碼的 status 屬性。
還有另外兩個有用的選項用來處理結(jié)果。我們可以在onSuccess 選項處傳入一個方法，當AJAX無誤的執(zhí)行完后調(diào)用，相反的，也可以在onFailure選項處傳入一個方法，當服務(wù)器端出現(xiàn)錯誤時調(diào)用。正如onXXXXX 選項傳入的方法一樣，這兩個在被調(diào)用的時候也傳入一個帶有AJAX請求的XMLHttpRequest對象。
我們的例子沒有用任何有趣的方式處理這個 XML響應(yīng)，我們只是把這段XML放進了一個文本域里面。對這個響應(yīng)的一個典型的應(yīng)用很可能就是找到其中的想要的信息，然后更新頁面中的某些元素，或者甚至可能做某些XSLT轉(zhuǎn)換而在頁面中產(chǎn)生一些HTML。
更完全的解釋，請參照 Ajax.Request 參考 和 Ajax選項參考。
如果你的服務(wù)器的另一端返回的信息已經(jīng)是HTML了，那么使用這個程序包中 Ajax.Updater 類將使你的生活變得更加得容易。用它你只需提供哪一個元素需要被AJAX請求返回的HTML填充就可以了，例子比我寫說明的更清楚。
<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>
你可以看到，這段代碼比前面的例子更加簡潔，不包括 onComplete 方法，但是在構(gòu)造方法中傳入了一個元素id。 我們來稍稍修改一下代碼來描述如何在客戶端處理服務(wù)器段錯誤成為可能。
我們將加入更多的選項， 指定處理錯誤的一個方法。這個是用 onFailure 選項來完成的。
我們也指定了一個 placeholder 只有在成功請求之后才會被填充。為了完成這個目的我們修改了第一個參數(shù)從一個簡單的元素id到一個帶有兩個屬性的對象， success (一切OK的時候被用到) 和 failure (有地方出問題的時候被用到) 在下面的例子中沒有用到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 標記， Ajax.Updater對象可以執(zhí)行那段JavaScript代碼。為了使這個對象對待響應(yīng)為JavaScript，你只需在最后參數(shù)的對象構(gòu)造方法中簡單加入evalScripts: true屬性。