Ajax之prototype應用

prototype.js 是由 Sam Stephenson 寫的一個 javascript 類庫，通過引用prototype能夠在你的web中輕鬆是實現你的ajax的功能。本文主要介紹Ajax.Request 和Ajax.Updater() 的用法。

prototype的一些實用函數：

$(): 根據 id 獲取元素 $F(): 返回表單輸入控件的值 $A(): 轉化成數組對象 $H(): 轉換成可枚舉的 Hash 對象（與聯合數組類似） $R(): 構造 ObjectRange 對象 Try.these(): 嘗試……直到成功返回

 

使用 Ajax.Request 類

---

如果你不使用任何的幫助程序包，你很可能編寫了整個大量的代碼來創建 XMLHttpRequest 對象並且異步的跟蹤它的進程，然後解析響應並處理它。當你不需要支持多於一種類型的瀏覽器時你會感到非常的幸運。

爲了支持 AJAX 功能。這個包定義了 Ajax.Request 類。

假如你有一個應用程序可以通過 http://yoursever/app/get_sales?empID=1234&year=1998 與服務器通信。它返回下面這樣的 XML 響應：

<?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 對象和服務器通信並且得到這段 XML 是非常簡單的。下面的例子演示了它是如何完成的：

 

你注意到傳入 Ajax.Request 構造方法的第二個對象了嗎？參數 {method: 'get', parameters: pars, onComplete: showResponse} 表示一個匿名對象的真實寫法。他表示你傳入的這個對象有一個名爲 method 值爲 'get' 的屬性，另一個屬性名爲 parameters 包含 HTTP 請求的查詢字符串，和一個 onComplete 屬性/方法包含函數 showResponse。

還有一些其它的屬性可以在這個對象裏面定義和設置，如 asynchronous，可以爲 true 或 false 來決定 AJAX 對服務器的調用是否是異步的（默認值是 true）。

這個參數定義 AJAX 調用的選項。在我們的例子中，在第一個參數通過 HTTP GET 命令請求那個 url，傳入了變量 pars 包含的查詢字符串，Ajax.Request 對象在它完成接收響應的時候將調用 showResponse 方法。

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

還有另外兩個有用的選項用來處理結果。我們可以在 onSuccess 選項處傳入一個方法，當 AJAX 無誤的執行完後調用，相反的，也可以在 onFailure 選項處傳入一個方法，當服務器端出現錯誤時調用。正如 onXXXXX 選項傳入的方法一樣，這兩個在被調用的時候也傳入一個帶有 AJAX 請求的 XMLHttpRequest 對象。

我們的例子沒有用任何有趣的方式處理這個 XML 響應， 我們只是把這段 XML 放進了一個文本域裏面。對這個響應的一個典型的應用很可能就是找到其中的想要的信息，然後更新頁面中的某些元素， 或者甚至可能做某些 XSLT 轉換而在頁面中產生一些 HTML。

在 1.4.0 版本中，一種新的事件回傳外理被引入。如果你有一段代碼總是要爲一個特殊的事件執行，而不管是哪個 AJAX 調用引發它，那麼你可以使用新的 Ajax.Responders 對象。

假設你想要在一個 AJAX 調用正在運行時，顯示一些提示效果，像一個不斷轉動的圖標之類的，你可以使用兩個全局事件句柄來做到，其中一個在第一個調用開始時顯示圖標，另一個在最後一個調用完成時隱藏圖標。看下面的例子。

<script>...
    var myGlobalHandlers = ...{
        onCreate: function()...{
            Element.show('systemWorking');
        },

        onComplete: function() ...{
            if(Ajax.activeRequestCount == 0)...{
                Element.hide('systemWorking');
            }
        }
    };

    Ajax.Responders.register(myGlobalHandlers);
</script>

<div id='systemWorking'><img src='spinner.gif'>Loading...</div>

更完全的解釋，請參閱 Ajax.Request 參考和options 參考。

使用 Ajax.Updater() 類

---

如果你的服務器的另一端返回的信息已經是 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 方法，但是在構造方法中傳入了一個元素 id。 我們來稍稍修改一下代碼來描述如何在客戶端處理服務器段錯誤成爲可能。

我們將加入更多的選項， 指定處理錯誤的一個方法。這個是用 onFailure 選項來完成的。我們也指定了一個 placeholder 只有在成功請求之後纔會被填充。爲了完成這個目的我們修改了第一個參數從一個簡單的元素 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('對不起，出錯了。');
    }
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

如果你的服務器邏輯是連同 HTML 標記返回 JavaScript 代碼，Ajax.Updater 對象可以執行那段 JavaScript 代碼。爲了使這個對象對待響應爲 JavaScript，你只需在最後參數的對象構造方法中簡單加入 evalScripts:true 屬性。但是值得提醒的是，像這個選項名 evalScripts 暗示的，這些腳本會被執行，但是它們不會被加入到 Page 的腳本中。“有什麼區別？”，可能你會這樣問。我們假定請求地址返回的東東像這樣：

<script language="javascript" type="text/javascript">
	function sayHi(){
		alert('Hi');
	}
</script>

<input type=button value="Click Me" onclick="sayHi()">

如果你以前這樣嘗試過，你知道這些腳本不會如你所期望的那樣工作，原因是這段腳本會被執行，但像上面這樣的腳本執行並不會創建一個名叫 sayHi 的函數，它什麼也不做。如果要創建一個函數，我們應當把代碼改成下面這個樣子：

<script language="javascript" type="text/javascript">...
    sayHi = function()...{
        alert('Hi');
    };
</script>

<input type=button value="Click Me" onclick="sayHi()">

爲什麼我們在上面的代碼中不使用 var 關鍵字來聲明這個變量呢（指 sayHi），因爲那樣做創建出來的函數將只是當前腳本塊的一個局部變量（至少在 IE 中是這樣）。不寫 var 關鍵字，創建出來的對象的作用域就是我們所期望的 window。

更多相關知識，請參看 Ajax.Updater 參考和 options 參考。