XMLHTTP對(duì)象封裝技術(shù)的示例代碼分享

這篇文章主要為大家詳細(xì)介紹了XMLHTTP對(duì)象封裝技術(shù)，文中示例代碼介紹的非常詳細(xì)，圖文詳解容易學(xué)習(xí)，非常適合初學(xué)者入門，感興趣的小伙伴們可以參考一下。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),山城企業(yè)網(wǎng)站建設(shè),山城品牌網(wǎng)站建設(shè),網(wǎng)站定制,山城網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,山城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

ajax技術(shù)的實(shí)現(xiàn)主要依賴于xmlhttprequest，但我們?cè)谡{(diào)用其來(lái)進(jìn)行異步數(shù)據(jù)的傳輸時(shí)，由于xmlhttp是個(gè)短線過(guò)程（處理事件完成后就銷毀）如果不對(duì)該對(duì)象進(jìn)行包裝處理的話，就不得不在需要調(diào)用的地方重新構(gòu)建xmlhttprequest，每次調(diào)用都要寫(xiě)一大段的代碼，實(shí)在不是個(gè)好辦法。好在現(xiàn)在很多開(kāi)源的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方法，過(guò)會(huì)我們就會(huì)用到。

setOptions: function(options) {
　　 this.options = {
　　　 method:　　　 'post',
　　　 asynchronous: true,
　　　 parameters:　 ''
　　 }

prototype中對(duì)request是通過(guò)定義Ajax.Request原型（Ajax.Request.prototype）來(lái)實(shí)現(xiàn)的。但我們并不能直接對(duì)Ajax.Request進(jìn)行調(diào)用，主要原因是Ajax.Request并沒(méi)有提供一個(gè)統(tǒng)一處理的過(guò)程。而且我們可能需要通過(guò)request 再取得response。（試想一下，客戶那邊發(fā)出一條信息，都始終沒(méi)與收到回復(fù)，那是會(huì)讓人覺(jué)得很惱火的事~），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á)的位置，該位置通過(guò)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)相同，如果為空或不寫(xiě)，則采用 Ajax.Base定義的初始值（沒(méi)有傳遞任何參數(shù)時(shí)使用）。

兩者的區(qū)別在與Ajax.Updater返回給container的是完整的responseText，只有在responseText完全取得又沒(méi)發(fā)生異常時(shí)才會(huì)把內(nèi)容寫(xiě)到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ō)的是中文編碼問(wèn)題，prototype對(duì)傳遞的參數(shù)都進(jìn)行了編碼轉(zhuǎn)換工作，每個(gè)傳遞值通過(guò)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ù)編碼格式的正確.

以上就是XMLHTTP對(duì)象封裝技術(shù)的簡(jiǎn)略介紹，詳細(xì)使用情況還需要大家自己使用過(guò)才領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)標(biāo)題：XMLHTTP對(duì)象封裝技術(shù)的示例代碼分享
網(wǎng)站URL：http://muchs.cn/article18/picjgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、虛擬主機(jī)、App開(kāi)發(fā)、網(wǎng)站排名、建站公司、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容