首頁 > 後端開發 > XML/RSS教程 > 詳解XMLHTTP物件封裝技術的範例程式碼

詳解XMLHTTP物件封裝技術的範例程式碼

黄舟
發布: 2017-03-27 16:32:52
原創
1697 人瀏覽過

ajax技術的實作主要依賴xmlhttprequest,但我們在呼叫其來進行非同步資料的傳輸時,由於xmlhttp是個短線過程(處理事件完成後就銷毀)如果不對該物件進行包裝處理的話,就不得不在需要呼叫的地方重新建構xmlhttprequest,每次呼叫都要寫一大段的程式碼,實在不是個好辦法。還好現在很多開源的ajax框架都提供了xmlhttp封裝的方案。這裡以ajaxtags自帶的prototype-1.4.0.js為母版,來看看如何將xmlhttp物件封裝成一個可重複使用的方法。

在prototype.js中,首先定義了一個變數:Ajax

  var Ajax = {
    getTransport: function() {
     return Try.these(
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')},
      function() {return new XMLHttpRequest()}
    ) || false;
  },
   
   activeRequestCount: 0
}
登入後複製

變數傳回了一個xmlhttprequest,可以看到,如果我們呼叫了Ajax.getTransport(),每次都會回傳一個新的xmlhttprequest物件。

在Ajax變數中定義了一個基礎方法Ajax.Base和該基礎方法的原型(初始時,每個腳本方法預設都有個空的原型,該原型會繼承Object的原型,如果我們在Object中改變了原型,則所有的腳本方法都會被改變。實現重載。

Ajax.Base原型中最主要的是setOptions方法,過會我們就會用到。

setOptions: function(options) {
   this.options = {
    method:    'post',
    asynchronous: true,
    parameters:  ''
   }
登入後複製

prototype中對request是透過定義Ajax.Request原型(Ajax.Request.prototype)來實現的。但我們並不能直接對Ajax.Request進行調用,主要原因是Ajax.Request並沒有提供一個統一處理的過程。而且我們可能需要透過request 再取得response。 (試想一下,客戶那邊發出一條訊息,都始終沒與收到回复,那是會讓人覺得很惱火的事~),prototype同樣為我們封裝好了resoponse(Ajax.Responders),但兩者都是相互獨立的,如何把他們整合呢?

在prototype中給我們提供了兩個方案,一個是Ajax.Updater,另一個是Ajax.PeriodicalUpdater,兩個共同點都是必須傳入3個參數:

#container :

response資料要傳達的位置,該位置透過html標籤的id來定義,例如你要把返回的資料輸出到html中的某個<div>中,則只要把container改成該id的值就可以了。如果找不到該container,則會發生腳本錯誤。

url:

request請求要傳遞的目的地。這個目的地應該是個servlet或jspservlet,因為request物件只能被servlet中的do***方法自動取得。

options:

結構應該與上面Ajax.Base定義的setOptions()中的option結構相同,如果為空或不寫,則採用Ajax.Base定義的初始值(沒有傳遞任何參數時使用)。

兩者的差異在與Ajax.Updater回傳給container的是完整的responseText,只有在responseText完全取得又沒發生異常時才會把內容寫到container裡面,而PeriodicalUpdater在取得responseText時,不管是否已經完整取得,就把內容填進container,直到發生異常或完全取得responseText。大多數情況應該使用第一種方法,因為第一種方法在發生異常時會把異常訊息顯示在container裡面,而第二種就不一定了。

既然已經把xmlhttp封裝好了,我們只需要設定好前面所說的3個參數就可以了,要注意的是,設定options參數,一定要按照base中的options結構進行設置,如果我們使用post方法,還可以在opitons中設定postBody屬性,把要傳遞的queryString 放到body中,一個使用post方法進行傳遞的腳本例子如下:

/*表单提交用post方法*/
function doRequest(container,paraments,url){
   var options ={
    method:    'post',
    asynchronous: true,
    postBody: paraments
   };
   new Ajax.Updater(container,url,options);  
}
登入後複製

最後不得不說的是中文編碼問題,prototype對傳遞的參數都進行了編碼轉換工作,每個傳遞值透過encodeURIComponent 進行了處理.編碼會轉換成utf-8,在背景取得request時,應該統一使用request.setCharacterEncoding("UTF-8")對request設定編碼,而不必管頁面的編碼格式是什麼.如果使用post方法進行傳遞數據,則會自動執行:

request. setHeader('Content-type','application/x-www-form-urlencoded').確保傳遞資料編碼格式的正確.

以上是詳解XMLHTTP物件封裝技術的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板