XMLHTTP對象封裝技術

2024-09-05 20:53:56

字體：大中小

來源：轉載

供稿：網友

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

中國最大的web開發資源網站及技術社區，

上一篇：輕松使用DOM 的技巧和訣竅

下一篇：一日精通Ajax技術