prototype 學習手記(2)

對於客戶端和服務器端的通訊,prototype提供瞭如下技術手段:
  Ajax.PeriodicalUpdater
  Ajax.Request
  Ajax.Responders
  Ajax.Response
  Ajax.Updater
在調用過程中,prototype支持一些常用的option選型,和回調事件
  Common options
  Common callbacks
  除此之外,對於特定的對象,還有一些特定的option和事件

1. Ajax.Request
   Request應當是最基本的對象,調用語法:
     new Ajax.Request(url[, options])
   用於創建一個AJAX request對象,發送http請求,獲取http response.
   在options中,可以定義:
   a) request header屬性 和 參數,例如:
      { method: 'get',
        encoding: 'UTF-8',
        parameters: { username: $F('username') }
      }
   b) 回調事件和方法,例如:
      {
        onCreate: function() {
          Ajax.activeRequestCount++;
        },
        onComplete: function() {
          Ajax.activeRequestCount--;
        }
      }

   Life cycle of XMLHtpRequest:
   1) Created
   2) Initialized
   3) Request sent
   4) Response being received (can occur many times, as packets come in)
   5) Response received, request complete

   Order of callbacks:
   1) onCreate
   2) onUninitialized (maps on Created)
   3) onLoading (maps on Initialized)
   4) onLoaded (maps on Request sent)
   5) onInteractive (maps on Response being received)
   6) onXYZ (numerical response status code), onSucess or onFailure
   7) onComplete

2. Ajax.Response
   從1.6版本開始提供
   對xmlHttpRequest對象進行了包裝,處理跨瀏覽器問題,並添加了對JSON的支持
   作爲第一個參數,傳遞給各個callback方法
   屬性:
       status  (Number)  http status code
       statusText  (String)
       readyState  (Number)
       responseText  (String)
       responseXML  (document Object or null)  applicable when content-type=application/xml
       responseJSON  (Object, Array or null)  applicable when content-type=application/json
       headerJSON  (Object, Array or null)  applicable for X_JSON header
       request  (Object)  the request object (instance of Ajax.Request or Ajax.Updater)
       transport  (Object)  the native xmlHttpRequest object
   方法:
       getHeader(name)  String or null  找不到時返回null,不會拋出Exception
       getAllHeaders()  String or null  用換行分割
       getResponseHeader(name)  String  可能拋Exception
       getAllResponseHeaders()  String  多個item,用換行分隔,可能拋Exception


3. Ajax.Responders
   語法:
     Ajax.Responders.register(responder)
     Ajax.Responders.unregister(responder)

   用於對頁面中所有的request進行某些公共的操作,例如,記錄當前活動的AJAX request數量
   Prototype自動註冊瞭如下操作:
     Ajax.Responders.register({
       onCreate: function() {
         Ajax.activeRequestCount++;
       },
       onComplete: function() {
         Ajax.activeRequestCount--;
       }
     });
   如果要取消註冊,也需要先定義responder對象。因此,一般在註冊時保留responder對象的reference
   問題:
     註冊/取消註冊,key是什麼?responder對象?還是???

4. Ajax.Updater
   語法:
     new Ajax.Updater(container, url[, options])
   用途:
     指定一個對象,修改其內容
   樣例:
     new Ajax.Updater('items', '/items', {
       parameters: { text: $F('text') }
     });
   說明:
     onComplete回調方法會在對象內容被修改後再被觸發。
   附加參數:
     1. 缺省情況下,對象內容會被新的內容替代。但可以設置爲插入,以及插入的位置
        例如:
          new Ajax.Updater('items', '/items', {
            parameters: { text: $F('text') },
            insertion: Insertion.Bottom
          });
         v1.6.0之後,不再使用Insertion.Bottom這類方式,可以直接使用'top','bottom','before', 'after'
      2.evalScripts
        當其爲true, 所有<script>內容將被evaluated.
        <script>內容相對於被執行eval()方法,其中的局部變量只再eval()期間有效,不影響頁面其他部分。
        但如果在其中定義了JavaScript方法,則必須創建function對象,例如:
          coolFunc = function() { ... }
        而不能使用如下定義:
          function coolFunc() { ... }
     其他:
       Updater還可以根據request是否成功,修改不同的目標對象,例如:
         new Ajax.Updater({ success: 'items', failure: 'notice' }, '/items', {
           parameters: { text: $F('text') },
           insertion: Insertion.Bottom
         });
     問題:
       修改不同目標對象時,處理策略是否只能相同?
       如果創建兩個Updater對象,一個只處理success,一個只處理failure,是否可以解決這個問題?

5. Ajax.PeriodicalUpdater
   語法:
     new Ajax.PeriodicalUpdater(container, url[, options])
   相當於根據指定的時間,重複調用Updater,更新目標對象。
   可以通過參數的設置,當其發現本次訪問返回內容跟上一次相同時,對間隔時間乘以指定的係數。
   如果發現返回內容修改後,間隔時間調整爲初始設置值。
   問題:
       是否考慮在發現內容修改後,將間隔時間設置爲 當前值/係數 (並不小於初始值)?
       這樣是否更合理?

 

發佈了43 篇原創文章 · 獲贊 13 · 訪問量 19萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章