淺析網(wǎng)頁(yè)無刷新技術(shù).doc

《淺析網(wǎng)頁(yè)無刷新技術(shù).doc》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、淺析網(wǎng)頁(yè)無刷新技術(shù)淺析網(wǎng)頁(yè)無刷新技術(shù)摘耍：網(wǎng)頁(yè)無刷新技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)更新而不刷新整個(gè)頁(yè)面,減輕了服務(wù)器處理程序的壓力，節(jié)省了網(wǎng)絡(luò)帶寬，減少了用戶等待時(shí)間，提升了用戶體驗(yàn)。該文介紹并分析了常見的三種網(wǎng)頁(yè)無刷新技術(shù)，最后對(duì)這幾種技術(shù)進(jìn)行比較。關(guān)鍵詞：無刷新；隱藏iframe；瀏覽器插件；ajax中圖分類號(hào):TP311文獻(xiàn)標(biāo)識(shí)碼M文章編號(hào)：1009-3044(2014)11-2562-03Abstract：Thewebtechnologywithoutrefreshtorealizethelocaldataupdatewithouttorefre

2、shthewholepage,reducestheserverprocesspressure,savesnetworkbandwidth,reducesuserwaitingtime,andimprovestheuserexperience?Thisarticleintroducedandanalyzed3commonwebtechnologieswithoutrefresh,finally,comparedtothese3kindsofTechnology.Keywords：norefresh；hiddeniframe；browserplu

3、gin；ajax傳統(tǒng)網(wǎng)頁(yè)在點(diǎn)擊超鏈接或者按鈕后需耍重新加載整個(gè)頁(yè)面，在加載完成之前有的區(qū)域是空白的，影響了用戶體驗(yàn)。特別是在網(wǎng)絡(luò)不是很順暢的情況下，等待時(shí)間很長(zhǎng)。加上現(xiàn)在移動(dòng)設(shè)備的流行，GSM網(wǎng)絡(luò)甚至一般3G網(wǎng)絡(luò)的速度還比較緩慢的情況下，如果需耍加載整個(gè)網(wǎng)頁(yè)，就會(huì)大大消磨用戶的耐心。在此背景下，出現(xiàn)了不需耍刷新整個(gè)頁(yè)面只更新局部的網(wǎng)頁(yè)無刷新技術(shù)。1傳統(tǒng)網(wǎng)頁(yè)加載方式傳統(tǒng)網(wǎng)頁(yè)加載方式為客戶端(即瀏覽器)提交URL請(qǐng)求，服務(wù)器收到請(qǐng)求之后，將對(duì)應(yīng)的網(wǎng)頁(yè)文件以HTML格式整個(gè)發(fā)送到客戶端，客戶端解釋這些HTML代碼，并將網(wǎng)頁(yè)顯示出來，如圖1所示。這個(gè)

4、過程哪怕是局部區(qū)域的數(shù)據(jù)更新都需要客戶端向遠(yuǎn)程服務(wù)器提交整個(gè)頁(yè)面的刷新請(qǐng)求，這樣在遠(yuǎn)程服務(wù)器上就會(huì)對(duì)整個(gè)頁(yè)面的所有數(shù)據(jù)進(jìn)行運(yùn)算。另外，遠(yuǎn)程服務(wù)器返回用戶的數(shù)據(jù)是整個(gè)頁(yè)面，這樣會(huì)占用大量互聯(lián)網(wǎng)帶寬，并且還要耗費(fèi)客戶端資源來重繪頁(yè)面[1]O這種傳統(tǒng)的加載方式在網(wǎng)速較慢的情況下，使用戶的等待時(shí)■間加長(zhǎng)。移動(dòng)設(shè)備在網(wǎng)速普遍較慢的情況下等待吋間更長(zhǎng)，降低了用戶體驗(yàn)。網(wǎng)頁(yè)無刷新技術(shù)即不刷新整個(gè)頁(yè)面只更新局部范圍數(shù)據(jù)的出現(xiàn)使得這-?尷尬局面得到大大改善。用戶在請(qǐng)求更新數(shù)據(jù)的吋候服務(wù)器只需要將局部范圍的數(shù)據(jù)返回客戶端顯示即可，提高了系統(tǒng)響應(yīng)速度,減少了用戶的

5、等待吋間。2.2客戶端插件技術(shù)客戶端插件是一種遵循瀏覽器規(guī)范的應(yīng)用程序接口編寫出來的程序,Web瀏覽器能夠直接調(diào)用插件程序,用于處理特定類型的文件。客戶端插件也可以盲接和Web服務(wù)器通信，達(dá)到無刷新實(shí)現(xiàn)數(shù)據(jù)更新的目的?？蛻舳瞬寮蠮ava的JavaApplet>Microsoft的ActiveX>Adobe的Flash和Flex等。JavaApplet是用Java語(yǔ)言編寫的嵌入到網(wǎng)頁(yè)中的小應(yīng)用程序，它可以直接與用戶進(jìn)行交互，負(fù)責(zé)處理用戶請(qǐng)求以及從服務(wù)器端接收的數(shù)據(jù)；ActiveX插件以前也叫做OLE控件或OCX控件，它是一些軟件組件或?qū)ο?，?/p>

6、其插入到Web網(wǎng)頁(yè)中來實(shí)現(xiàn)與用戶的交互和與服務(wù)器的通信；Flex是由Macromedia公司在2004年3月發(fā)布的，基于其專有的MacromediaFlash平臺(tái)，它是一種很輕便的客戶端技術(shù)，只要客戶端安裝了FlashPlayer就可以使用Flex技術(shù)，F(xiàn)lex應(yīng)用程序采用了“一次加載，多次使用”的原則，F(xiàn)lex客戶端是…個(gè)整體的應(yīng)用，不是由多個(gè)頁(yè)面組成的，天牛:就是不需要刷新的。Flex客戶端是頁(yè)面加載開始就整個(gè)下載到客戶端了，其中的一些模塊也可以采用延遲加載[3]-2.3ajax技術(shù)Ajax技術(shù)是當(dāng)前最熱門的網(wǎng)頁(yè)技術(shù)之一，其全稱是Asyn

7、chronousJavaScriptAndXML,即異步JavaScript和XMLo它是結(jié)合TJavaScript^XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest等編程技術(shù)以新的方式組合而成，Ajax包含：基于XHTML和CSS標(biāo)準(zhǔn)的表示；使用DocumentObjectModel進(jìn)彳亍動(dòng)態(tài)顯示和交互；使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信；使用XML和XSLT技術(shù)實(shí)現(xiàn)數(shù)據(jù)的交換和維護(hù)；使用JavaScript綁定一切[4]。它在客戶端創(chuàng)建XmlHttpRequest對(duì)象，由這個(gè)對(duì)象向服務(wù)器提交請(qǐng)求

8、，在收到返回信息后，由Javascript利用DOM(DocumentObjectModel,文檔對(duì)象模型)來更新局部網(wǎng)頁(yè)內(nèi)容。3三種無刷新技術(shù)比較盡管這三種技術(shù)都