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 and
onException.
      

他們都與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是預設值）或者省略掉。