XMLHTTP對象封裝技術(shù)

2024-09-05 20:53:57

字體：大中小

供稿：網(wǎng)友

Ajax技術(shù)的實(shí)現(xiàn)主要依賴于xmlhttprequest，但我們在調(diào)用其來進(jìn)行異步數(shù)據(jù)的傳輸時，由于xmlhttp是個短線過程（處理事件完成后就銷毀）如果不對該對象進(jìn)行包裝處理的話，就不得不在需要調(diào)用的地方重新構(gòu)建xmlhttprequest，每次調(diào)用都要寫一大段的代碼，實(shí)在不是個好辦法。好在現(xiàn)在很多開源的ajax框架都提供了對xmlhttp封裝的方案。這里以ajaxtags自帶的prototype-1.4.0.js為母版，來看看如何將xmlhttp對象封裝成一個可復(fù)用的方法。

在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，可以看到，如果我們調(diào)用了Ajax.getTransport()，每次都會返回一個新的xmlhttprequest對象。
在Ajax變量中定義了一個基礎(chǔ)方法Ajax.Base和該基礎(chǔ)方法的原型（初始時，每個腳本方法默認(rèn)都有個空的原型，該原型會繼承Object的原型，如果我們在Object中改變了原型，則所有的腳本方法都會被改變。）該基礎(chǔ)方法被Ajax.Request所繼承，注意的是，如果在Ajax.Request中填充了繼承的原型的同名方法或變量，則會實(shí)現(xiàn)重載。
Ajax.Base原型中最主要的是setOptions方法，過會我們就會用到。
setOptions: function(options) {
this.options = {
method: 'post',
asynchronous: true,
parameters: ''
}
prototype中對request是通過定義Ajax.Request原型（Ajax.Request.prototype）來實(shí)現(xiàn)的。但我們并不能直接對Ajax.Request進(jìn)行調(diào)用，主要原因是Ajax.Request并沒有提供一個統(tǒng)一處理的過程。而且我們可能需要通過request 再取得response。（試想一下，客戶那邊發(fā)出一條信息，都始終沒與收到回復(fù)，那是會讓人覺得很惱火的事~），prototype同樣為我們封裝好了resoponse（Ajax.Responders），但兩者都是相互獨(dú)立的，如何把他們進(jìn)行整合呢？

在 prototype中給我們提供了兩個方案，一個是Ajax.Updater，另一個是Ajax.PeriodicalUpdater，兩個共同點(diǎn)都是必須傳入3個參數(shù)：
container：
response數(shù)據(jù)要傳達(dá)的位置，該位置通過html標(biāo)簽的id進(jìn)行定義，比如你要把返回的數(shù)據(jù)輸出到html中的某個＜div＞中，則只要把container改成該id的值就可以了。如果找不到該container，則會發(fā)生腳本錯誤。
url：
request請求要傳遞的目的地。該目的地應(yīng)該是個servlet或jspservlet，因?yàn)閞equest對象只能被servlet中的do***方法自動獲取。
options：
結(jié)構(gòu)應(yīng)該與上面Ajax.Base定義的setOptions中的option結(jié)構(gòu)相同，如果為空或不寫，則采用 Ajax.Base定義的初始值（沒有傳遞任何參數(shù)時使用）。
兩者的區(qū)別在與Ajax.Updater返回給container的是完整的responseText，只有在responseText完全取得又沒發(fā)生異常時才會把內(nèi)容寫到container里面，而PeriodicalUpdater在獲取responseText時，不管是否已經(jīng)完整取得，就把內(nèi)容填進(jìn)container，直到發(fā)生異常或完全取得responseText。大多數(shù)情況應(yīng)該使用第一種方法，因?yàn)榈谝环N方法在發(fā)生異常時會把異常信息顯示在container里面，而第二種就不一定了。
既然已經(jīng)把xmlhttp封裝好了，我們只需要設(shè)置好前面所說的3個參數(shù)就可以了，要注意的是，設(shè)置options參數(shù)，一定要按照base中的options結(jié)構(gòu)進(jìn)行設(shè)置，如果我們使用post方法，還可以在opitons中設(shè)置postBody屬性，把要傳遞的queryString 放到body中,一個使用post方法進(jìn)行傳遞的腳本例子如下：

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

最后不得不說的是中文編碼問題，prototype對傳遞的參數(shù)都進(jìn)行了編碼轉(zhuǎn)換工作，每個傳遞值通過encodeURIComponent　進(jìn)行了處理．編碼會被轉(zhuǎn)換成utf－8，在后臺獲取request時，應(yīng)該統(tǒng)一使用request.setCharacterEncoding("UTF-8")對request設(shè)置編碼，而不必管頁面的編碼格式是什么．如果使用post方法進(jìn)行傳遞數(shù)據(jù)，則會自動執(zhí)行:
request．setHeader('Content-type','application/x-www-form-urlencoded').確保傳遞數(shù)據(jù)編碼格式的正確.

上一篇：基礎(chǔ)知識認(rèn)識XML：下一代網(wǎng)絡(luò)的基石

下一篇：使用XML文件記錄操作日志