DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> XMLHTTP對象封裝技術
XMLHTTP對象封裝技術
編輯:XML詳解     

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.Request所繼承,注意的是,如果在AJax.Request中填充了繼承的原型的同名方法或變量,則會實現重載。

  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').確保傳遞數據編碼格式的正確.

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved