prototype的Ajax介紹

來源:互聯網
上載者:User
prototype的Ajax介紹[翻譯完成]

原文:http://www.prototypejs.org/learn/introduction-to-ajax]
翻譯:www.ruby-china.cn 站長]

Prototype架構提供了非常容易和有意思的方法處理Ajax的調用,同時它也是瀏覽器安全的
。除了簡單的請求外,這個模組(指prototype裡的Ajax)也能很聰明的處理從伺服器返回
的javascript代碼,並且提供了一個輔助的類不停的輪循。

Ajax的功能包含在了全域的Ajax對象裡面。用於Ajax請求的transport是xmlHttpRequest,
它是從使用者角度的對不同瀏覽器進行安全的抽象的結果。真正的請求是通過建立Ajax.
Request對象的執行個體實現的。複製內容到剪貼簿代碼:
new Ajax.Request('/some_url', { method:'get' });第一個參數是請求的地址,第二個是
可選的雜湊值。方法選項指定要使用的HTTP要求方法,預設是POST。

記住,由於安全的原因(也就是防止跨站指令碼攻擊)Ajax請求只能被用在與包含這個Ajax請
求頁面相同的協議、主機與連接埠上。有些瀏覽器會允許任意的URL,但是你能不依靠這個。

Ajax響應回調

Ajax請求預設是非同步,這也就意味著你必須要有回呼函數能夠處理返回的資料。回調方法
在發起請求的時候傳給可選的雜湊。複製內容到剪貼簿代碼:

new Ajax.Request('/some_url',  {    method:'get',    onSuccess: function(transport){      var response = transport.responseText || "no response text";      alert("Success! \n\n" + response);    },    onFailure: function(){ alert('Something went wrong...') }  });

這裡兩個回呼函數傳給了這個雜湊值,分別表示成功與失敗的警告。onSuccess和
onFailure根據返回的狀態相應的被調用。第一個參數是原生的xmlHttpRequest對象,可以
分別使用它的responseText和responseXML屬性。

你可以把兩個回調都定義,也可以是一個或者沒有,這全由你來定。其它的可以用的回調函
數還有:

onUninitialized,onLoading,onLoaded,onInteractive,onComplete andonException.

他們都與xmlHttpRequest的傳輸的某一個狀態有關係,除了在分發其它回調時出現異常後引
起的onException外。

還有可以得到的就是onXXX的回調。這裡XXX是HTTP的返回狀態,象200或者404。需要注意的
是,如果用這種方法,你的onSuccess和onFailure就不會被調用了。因為onXXX有更高的優
先級,因為這樣做的話,表示你知道你在做什麼。

而onUninitialized、onLoading、 onLoaded和onInteractive這些回呼函數並沒有完全的被
所有的瀏覽器實現出來。通過我們避免使用它們。

參數與HTTP方法

你可以將請求參數象一個參數屬性一樣傳遞。複製內容到剪貼簿代碼:new Ajax.Request('/some_url', {  method: 'get',  parameters: {company: 'example', limit: 12}  });那麼參數會以company=example&limit=12的形式發出。你可以使用GET/POST中的任一種。但是需要注意的是GET的請求不應該導到致資料發生變化。瀏覽器很少會緩衝POST請求,但是它往往會緩衝GET請求。參數屬性的一個重要的應用是用Ajax請求發送一個FORM的內容,Prototype已經給了你一個協助的方法,叫做Form.serialize:複製內容到剪貼簿代碼:new Ajax.Request('/some_url', {  parameters: $('id_of_form_element').serialize(true)  });如果你需要發送自訂的HTTP要求標頭,你可以用requestHeaders項來實現。只要作為一個雜湊或者用一個扁平的數組傳入名字—值對就可以了。如:['X-Custom-1', 'value', 'X-Custom-2', 'other value'].如果由於某種原因,你必須POST一個自訂的POST體(沒有參數來自於參數項)的請求,有一個postBody項就是為了這個目的設的。要注意的時,如果你使用postBody,那麼你傳進來的所有的參數都不會被發送,因為postBody有更高的優先順序。這樣做的時候,你應該是清醒的。對javascript傳回值求值有時應用程式發送javascript代碼作為響應。如果這個返回的Contenty-Type與Javascript的MIME的類型是一樣的,那麼Prototype將會自動eval()返回的代碼。你如果沒有需要的話,就不用顯式的處理這個響應。還有可能就是這個響應是一個X-JSON的頭,那他的內容就會被解析,儲存成立個對象並發送給這些回呼函數,當成第二個參數:複製內容到剪貼簿代碼:new Ajax.Request('/some_url', { method:'get',  onSuccess: function(transport, json){      alert(json ? Object.inspect(json) : "no JSON object");    }  });可以用這個函數來取比較重要的資料,以避免解析XML返回的損耗。JSON比XML要更快(當然也更輕)。全域響應者這裡有一個對象在每次Ajax請求時都會被調用:Ajax.Responders。你可以用他來註冊回呼函數在任何一個Ajax.Request狀態發生時被觸發:複製內容到剪貼簿代碼:Ajax.Responders.register({  onCreate: function(){    alert('a request has been initialized!');  },  onComplete: function(){    alert('a request completed');  }});每個與xmlHttpRequest的傳輸狀態匹配的回調都可以放在這裡,再帶上一個onCreate。象這樣的全域的跟蹤請求在不少方面是很有用的:你可以把它們記錄下來以用於調試或者拋出一個異常處理,來通過使用者可能的串連問題。用Ajax.Updater來動態更新你的頁面開發人員經常想通過Ajax請求來接收HTML的片段來更新文檔的部分內容。通過Ajax.Request的onComplete回調是相當容易的,但是如果是用Ajax.Update就會變得更加容易。假設你的HTML文檔中有以下代碼:複製內容到剪貼簿代碼:<h2>Our fantastic products</h2><div id="products">(fetching product list ...)</div>'products'容器是空的,你想把Ajax的響應的HTML傳回值放到這裡。沒有問題:複製內容到剪貼簿代碼:new Ajax.Updater('products', '/some_url', { method: 'get' });這就是全部,沒有別的其它工作。變數與Ajax.Request是一樣的。除了第一個位置上多了一個接收元素。Prototype會通過Element.update()來神奇的把響應更新到容器。如果你的HTML裡還有內含的一些指令碼,預設情況下會被過濾掉,為了讓你的指令碼被執行,你必須在evalScripts選項上傳入真值。那如果有錯誤發生,伺服器返回一個錯誤資訊而不是HTML,那會怎麼樣?一般來講,你不會想插入錯誤到使用者需要內容的地方。幸運的時,prototype提供了一個方法的解決辦法:你現在在第一個參數裡傳入以這種形式{ success:'products', failure:'errors' }表示兩個不同的容器的雜湊值,而不只是原來那一個。那麼成功的話,內容就會被放在success的容器上,錯誤就會被放在failure容器上。通過使用這些特性,你的介面就會變得更加方便使用。你也可能不想覆蓋當前容器中的內容,而是想把新的HTML加在最前或者最後面。很好,你完全可以這樣做。只要把要插入的對象當成是插入參數傳遞給Ajax就可以了:複製內容到剪貼簿代碼:new Ajax.Updater('products', '/some_url', {  method: 'get',  insertion: Insertion.Top  });Ajax.Updater就會使用給定的對象在容器('products')元素裡對返回的HTML執行插入。漂亮的手法!用Ajax.PeriodicalUpdater自動執行請求你發現Ajax.Updater很酷,但是你還想定時的執行他從伺服器取資料?Prototype架構也有這個東西。這個東西就是Ajax.PeriodicalUpdater,它基本上就是定時的運行Ajax.Updater。複製內容到剪貼簿代碼:new Ajax.PeriodicalUpdater('products', '/some_url',  {    method: 'get',    insertion: Insertion.Top,    frequency: 1,    decay: 2  });兩個新的參數是頻率與衰退。頻率就是請求產生的間隔,用秒錶示。這裡它是1秒,表示Ajax每分鐘請求一次。預設的頻率是2秒。我們的使用者可能會對應用有這麼好的響應程式感到非常高興,但是我們的伺服器可能性會承受非常大的壓力,如果使用者一直長時間開著瀏覽器的話。這也是為什麼有decay這個選項的原因。這是一個因子,通過它,頻率會在每次得到相同的返回內容時被加倍。第一次可能是1秒,然後是2秒,然後是4秒,然後是8這樣一直下去。當然,如果這個伺服器一直返回不同的資料,decay就不會起作用。這個因子只在你的內容基本上不變化了,返回的資料也基本相同時才起作用。將頻率調低可以明顯減輕伺服器的負擔,因為無用的請求次數會減少。你可以用這個因子在監視伺服器的負載,或者你可以傳進1來完全關掉它(1是預設值)或者省略掉。

繼續
學習更多關於Ajax.Request、Ajax.Updater和Ajax各種項目。

2008-應屆生工作之路

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.