国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 開發(fā) > XML > 正文

解讀XMLHTTP對(duì)象封裝技術(shù)

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

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

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

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

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

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 镇坪县| 云浮市| 郯城县| 舞阳县| 清河县| 高州市| 宁都县| 武宣县| 海兴县| 巴马| 枣庄市| 奉节县| 佛教| 互助| 汉川市| 嘉义县| 青田县| 白银市| 成武县| 临猗县| 驻马店市| 武城县| 衡阳县| 尼木县| 民和| 西平县| 边坝县| 侯马市| 库伦旗| 海伦市| 台北市| 随州市| 临猗县| 舞钢市| 吉安市| 防城港市| 天门市| 长汀县| 鹰潭市| 怀宁县| 宿州市|