快捷導(dǎo)航

使用prototype.js進(jìn)行異步操作

更新時(shí)間：2007年02月07日 00:00:00 作者：

首先下載prototype.js這個(gè)類包,然后包含在你的<html>頁面中
<script src='prototype.js'></script>

創(chuàng)建XMLHttpRequest對(duì)象并且異步的跟蹤它的進(jìn)程，然后解析出響應(yīng) 然后處理它可能這是ajax的根本意義,它最具威力的地方,但你能出兼容各種不同瀏覽器的代碼,可能會(huì)令你痛苦不堪,但幸好救苦救難的prototype.js提供Ajax.Request 類,讓你擺脫這些困擾.

假如你有一個(gè)應(yīng)用程序可以通過url http://ajax.boogu.com/cm.html與服務(wù)器通信。它返回下面這樣的XML 響應(yīng)。
(當(dā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是非常簡單的。下面的例子演示了它是如何完成的。

<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í)寫法。他表示你傳入的這個(gè)對(duì)象有一個(gè)名為 method 值為 'get'的屬性，另一個(gè)屬性名為 parameters 包含HTTP請(qǐng)求的查詢字符串，和一個(gè)onComplete 屬性/方法包含函數(shù)showResponse。

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

這個(gè)參數(shù)定義AJAX調(diào)用的選項(xiàng)。在我們的例子中，在第一個(gè)參數(shù)通過HTTP GET命令請(qǐng)求那個(gè)url，傳入了變量 pars包含的查詢字符串， 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)用自定義的方法只需要簡單的在請(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 屬性。
龍去脈
   onComplete 這個(gè)值要傳遞一個(gè)函數(shù)參數(shù)過來,像上述的showResponse,這個(gè)函數(shù),默認(rèn)是會(huì)傳遞會(huì)有一個(gè)originalRequest傳遞過來
還有另外兩個(gè)有用的選項(xiàng)用來處理結(jié)果。我們可以在onSuccess 選項(xiàng)處傳入一個(gè)方法，當(dāng)AJAX無誤的執(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ì)象。

獲取了這個(gè)originalRequestc以后,如果是一個(gè)xml對(duì)象的話,就能有

var xml = originalRequest.responseXML;
這樣就可以獲得第一個(gè)monthly-sales的文本值了
var monthly-sales = xml.getElementByTagName('monthly-sales')[0].text

    prototype.js這把瑞士軍刀,確實(shí)是我們居家旅行,編寫js代碼的必備工具

您可能感興趣的文章: