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

摘要：網(wǎng)頁(yè)無(wú)刷新技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)更新而不刷新整個(gè)頁(yè)面，減輕了服務(wù)器處理程序的壓力，節(jié)省了網(wǎng)絡(luò)帶寬，減少了用戶(hù)等待時(shí)間，提升了用戶(hù)體驗(yàn)。該文介紹并分析了常見(jiàn)的三種網(wǎng)頁(yè)無(wú)刷新技術(shù)，最后對(duì)這幾種技術(shù)進(jìn)行比較。

關(guān)鍵詞：無(wú)刷新；隱藏iframe；瀏覽器插件；ajax

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）11-2562-03

Abstract： The web technology without refresh to realize the local data update without to refresh the whole page， reduces the server process pressure， saves network bandwidth， reduces user waiting time， and improves the user experience. This article introduced and analyzed 3 common web technologies without refresh ， finally， compared to these 3 kinds of Technology.

Key words： no refresh； hidden iframe； browser plugin； ajax

傳統(tǒng)網(wǎng)頁(yè)在點(diǎn)擊超鏈接或者按鈕后需要重新加載整個(gè)頁(yè)面，在加載完成之前有的區(qū)域是空白的，影響了用戶(hù)體驗(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ì)大大消磨用戶(hù)的耐心。在此背景下，出現(xiàn)了不需要刷新整個(gè)頁(yè)面只更新局部的網(wǎng)頁(yè)無(wú)刷新技術(shù)。

1 傳統(tǒng)網(wǎng)頁(yè)加載方式

傳統(tǒng)網(wǎng)頁(yè)加載方式為客戶(hù)端（即瀏覽器）提交URL請(qǐng)求，服務(wù)器收到請(qǐng)求之后，將對(duì)應(yīng)的網(wǎng)頁(yè)文件以HTML格式整個(gè)發(fā)送到客戶(hù)端，客戶(hù)端解釋這些HTML代碼，并將網(wǎng)頁(yè)顯示出來(lái)，如圖1所示。這個(gè)過(guò)程哪怕是局部區(qū)域的數(shù)據(jù)更新都需要客戶(hù)端向遠(yuǎn)程服務(wù)器提交整個(gè)頁(yè)面的刷新請(qǐng)求，這樣在遠(yuǎn)程服務(wù)器上就會(huì)對(duì)整個(gè)頁(yè)面的所有數(shù)據(jù)進(jìn)行運(yùn)算。另外，遠(yuǎn)程服務(wù)器返回用戶(hù)的數(shù)據(jù)是整個(gè)頁(yè)面，這樣會(huì)占用大量互聯(lián)網(wǎng)帶寬，并且還要耗費(fèi)客戶(hù)端資源來(lái)重繪頁(yè)面[1]。

這種傳統(tǒng)的加載方式在網(wǎng)速較慢的情況下，使用戶(hù)的等待時(shí)間加長(zhǎng)。移動(dòng)設(shè)備在網(wǎng)速普遍較慢的情況下等待時(shí)間更長(zhǎng)，降低了用戶(hù)體驗(yàn)。網(wǎng)頁(yè)無(wú)刷新技術(shù)即不刷新整個(gè)頁(yè)面只更新局部范圍數(shù)據(jù)的出現(xiàn)使得這一尷尬局面得到大大改善。用戶(hù)在請(qǐng)求更新數(shù)據(jù)的時(shí)候服務(wù)器只需要將局部范圍的數(shù)據(jù)返回客戶(hù)端顯示即可，提高了系統(tǒng)響應(yīng)速度，減少了用戶(hù)的等待時(shí)間。

2.2 客戶(hù)端插件技術(shù)

客戶(hù)端插件是一種遵循瀏覽器規(guī)范的應(yīng)用程序接口編寫(xiě)出來(lái)的程序，Web瀏覽器能夠直接調(diào)用插件程序，用于處理特定類(lèi)型的文件?？蛻?hù)端插件也可以直接和Web服務(wù)器通信，達(dá)到無(wú)刷新實(shí)現(xiàn)數(shù)據(jù)更新的目的。

客戶(hù)端插件有Java的Java Applet、Microsoft的ActiveX、Adobe的Flash和Flex等。Java Applet是用Java語(yǔ)言編寫(xiě)的嵌入到網(wǎng)頁(yè)中的小應(yīng)用程序，它可以直接與用戶(hù)進(jìn)行交互，負(fù)責(zé)處理用戶(hù)請(qǐng)求以及從服務(wù)器端接收的數(shù)據(jù)；ActiveX插件以前也叫做OLE控件或OCX控件，它是一些軟件組件或?qū)ο螅瑢⑵洳迦氲絎eb網(wǎng)頁(yè)中來(lái)實(shí)現(xiàn)與用戶(hù)的交互和與服務(wù)器的通信；Flex是由Macromedia公司在2004年3月發(fā)布的，基于其專(zhuān)有的Macromedia Flash平臺(tái)，它是一種很輕便的客戶(hù)端技術(shù)，只要客戶(hù)端安裝了Flash Player就可以使用Flex技術(shù)，F(xiàn)lex應(yīng)用程序采用了“一次加載，多次使用”的原則，F(xiàn)lex客戶(hù)端是一個(gè)整體的應(yīng)用，不是由多個(gè)頁(yè)面組成的，天生就是不需要刷新的。Flex客戶(hù)端是頁(yè)面加載開(kāi)始就整個(gè)下載到客戶(hù)端了，其中的一些模塊也可以采用延遲加載[3]。

2.3 ajax技術(shù)

Ajax技術(shù)是當(dāng)前最熱門(mén)的網(wǎng)頁(yè)技術(shù)之一，其全稱(chēng)是Asynchronous JavaScript And XML， 即異步JavaScript 和XML。它是結(jié)合了JavaScript、XHTML 和CSS、DOM、XML 和XSTL、XMLHttpRequest 等編程技術(shù)以新的方式組合而成， Ajax 包含： 基于XHTML 和CSS 標(biāo)準(zhǔn)的表示；使用Document Object Model 進(jìn)行動(dòng)態(tài)顯示和交互；使用XMLHttpRequest 與服務(wù)器進(jìn)行異步通信；使用XML 和XSLT 技術(shù)實(shí)現(xiàn)數(shù)據(jù)的交換和維護(hù)；使用JavaScript 綁定一切[4]。它在客戶(hù)端創(chuàng)建XmlHttpRequest對(duì)象，由這個(gè)對(duì)象向服務(wù)器提交請(qǐng)求，在收到返回信息后，由Javascript利用DOM（Document Object Model，文檔對(duì)象模型）來(lái)更新局部網(wǎng)頁(yè)內(nèi)容。

3 三種無(wú)刷新技術(shù)比較

盡管這三種技術(shù)都可以實(shí)現(xiàn)無(wú)刷新更新局部區(qū)域數(shù)據(jù)，但是它們之間還是有一定的區(qū)別的。隱藏iframe方式不是所有的瀏覽器都支持；而瀏覽器插件的方式也存在這樣的問(wèn)題，如果用戶(hù)選擇不安裝插件，那么這種方式也失去了效果；瀏覽器兼容性最好的是ajax，幾乎所有的瀏覽器都支持javascript，而且創(chuàng)建XmlHttpRequest對(duì)象針對(duì)不同的瀏覽器又有不同的創(chuàng)建方式。所以目前ajax廣泛應(yīng)用于目前的Web網(wǎng)站，從門(mén)戶(hù)網(wǎng)站到個(gè)人網(wǎng)站、微博、博客等，到處都能見(jiàn)到ajax的影子。

4 結(jié)束語(yǔ)

正因?yàn)榫W(wǎng)頁(yè)無(wú)刷新技術(shù)的出現(xiàn)，開(kāi)發(fā)人員可以像開(kāi)發(fā)桌面軟件一樣開(kāi)發(fā)網(wǎng)頁(yè)程序，各種網(wǎng)頁(yè)應(yīng)用大放異彩，豐富了網(wǎng)絡(luò)環(huán)境。網(wǎng)頁(yè)無(wú)刷新技術(shù)減輕了服務(wù)器壓力，節(jié)省了網(wǎng)絡(luò)帶寬，網(wǎng)頁(yè)在各種條件下特別是手機(jī)網(wǎng)絡(luò)中能夠快速顯示，減少了用戶(hù)等待時(shí)間，提升了用戶(hù)體驗(yàn)。

參考文獻(xiàn)：

[1] 胡飛，楊華千，彭濤，蒲昌玖.無(wú)刷新Web遠(yuǎn)程過(guò)程調(diào)用技術(shù)綜述[J].重慶工商大學(xué)學(xué)報(bào)：自然科學(xué)版，2012（8）：52-55.

[2] HTML