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

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

中圖分類號(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ū)域是空白的，影響了用戶體驗(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è)無(wú)刷新技術(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è)顯示出來(lái)，如圖1所示。這個(gè)過(guò)程哪怕是局部區(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)客戶端資源來(lái)重繪頁(yè)面[1]。

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

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

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

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

2.3 ajax技術(shù)

Ajax技術(shù)是當(dāng)前最熱門(mén)的網(wǎng)頁(yè)技術(shù)之一，其全稱是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]。它在客戶端創(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)題，如果用戶選擇不安裝插件，那么這種方式也失去了效果；瀏覽器兼容性最好的是ajax，幾乎所有的瀏覽器都支持javascript，而且創(chuàng)建XmlHttpRequest對(duì)象針對(duì)不同的瀏覽器又有不同的創(chuàng)建方式。所以目前ajax廣泛應(yīng)用于目前的Web網(wǎng)站，從門(mén)戶網(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ò)中能夠快速顯示，減少了用戶等待時(shí)間，提升了用戶體驗(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