基于Ajax通信的數據傳輸優化

肖 斌，汪 敏

(西南石油大學 a.計算機科學學院; b.電子信息工程學院，四川 成都 610500)

0 引言

Ajax通過對XHTML、CSS、DOM、JavaScript、XML等多項傳統技術進行的修改、整合和發揚，在瀏覽器和服務器之間加入Ajax層，從而改變了傳統的Web應用模型[1]。基于Ajax Web應用模型，Ajax向服務器發送和接收數據，減少了信息通信量，實現頁面局部刷新，提高了網絡反映速度。

當運用Ajax技術來開發一個健壯的軟件系統時，Web應用程序不只依賴于高質量、快速和健壯的網絡通信，更需考慮Ajax的可移植性、效用性和可用性等非功能性因素。而在Ajax 與服務器異步交互的過程中如何高效地傳遞響應數據則是很重要的一個環節。現從Ajax的數據響應角度進行分析，構建一個高效的Ajax應用程序，提出了一套優化網絡通信并盡可能減少故障的方案。

1 Ajax Web應用模型分析

要對Ajax的性能實施優化，首先要考慮的是Ajax的基本工作原理。Ajax采用異步交互方式，在用戶與服務器之間引入了一個用JavaScript編寫的Ajax引擎，來代替用戶與服務器進行交互。這樣用戶可以無需等待響應，繼續其他的Web交互。基于Ajax的Web 應用模式如圖1[2]所示。

如圖1所示，用戶界面通過Ajax引擎，使用XHR對象[4-5]，由JavaScript調用服務器通信，收到請求后，服務器端進行數據處理，完成通信解碼，服務器端產生XML、純文本、JSON等數據形式的響應返回給客戶端，客戶端通過JavaScript和DOM 程序進行局部更新。數據傳輸過程中數據傳輸量及其對數據的解析都會影響該Web應用程序的整體性能。

圖1 基于Ajax 的Web 應用模式

2 性能優化策略

基于Ajax的性能分析，制約Ajax性能的主要因素包括數據傳輸的數據量及其數據格式。提高其性能的主要目標是發送最少的數據量、不請求多余數據、不重復數據請求。其對應的優化策略為使用恰當的數據格式并使用數據壓縮和緩存技術。

2.1 數據格式的確定

2.1.1 數據量

數據格式影響傳輸效率，有些數據格式，相對于其結構數據內容更少，會造成大量數據空間的浪費。如發送數據value1,value2…..valueN

若采用XML格式發送其發送信息為：

可以看到，若服務器端返回的是XML格式的數據，除了冗余的開始結束標簽之外，還必須確保該XML文檔含有特定內容的首部信息，如XML版本號和編碼格式；而JSON是一種輕量級的數據交換格式，使用的結構化符號短小精悍，這將在很大程度上減少瀏覽器和服務器之間傳輸的數據量。隨著應用程序中的數據交換量的增長，數據結構的復雜化，JSON數據量小的優勢將更明顯。

2.1.2 客戶端解析效率

在Ajax web應用系統中，如果客戶端的請求返回（服務器端的接收數據）是XML文檔，首先要進行XML解析以在內存中建立一個DOM（文檔對象模型）樹來描述文檔；然后，使用JavaScript的標準DOM方法來操縱這個對象樹并訪問每個元素、屬性以及樹里的其它文本，最后進行相應的處理。

如果從服務器端返回的數據格式為JSON，對數據的處理僅需兩個步驟：接收JSON數據；并將JSON數據格式化，再通過Javascript處理呈現給用戶。

通過對上述代碼的分析，JSON數據處理代碼編寫簡單、易懂、快速、高效，其數據解析效率遠比XML高，即使用JSON作為響應數據載體能會加快頁面響應速度。

2.2 HTTP壓縮

HTTP壓縮：對諸如XHTML,CSS,JavaScript和XML這樣的HTTP響應中的文本負載使用標準的GZIP或者其它壓縮方法，使得在傳輸前減少響應的大小[3]。以下通過比較是否使用壓縮技術的兩個Web服務器：Jigsaw和Apache，并給出了所節省的發送包（Pa）以及以秒為單位的下載時間（Sec）的數目。

表1 壓縮比和下載時間

表2 圖像/HTML 混合情況下的壓縮比和下載時間

從這些研究不難看出，好的壓縮比是可能的，而且也可以通過 HTTP 壓縮加速 Web 內容的下載時間。若有圖像，圖像占負荷的很大一部分并且在下載時間上有 20 %到30 % 的改進。當負荷只包含 HTML 內容時，下載時間可以加快將近 65 %。很明顯，對于那些圖像較少，HTML 內容較多的 Web 應用程序，下載時間的整體改進將接近 65%，而不是 20% 或30 %。這些研究表明在Web應用程序中部署HTTP壓縮可以加速下載并改善用戶體驗。

為實現壓縮，可通過查看報頭開始壓縮，如果沒有設置報頭，內容沒有壓縮可以正常發送，壓縮后，編碼后的數據與數據源發生了改變，壓縮接近80%，但在瀏覽器中顯示時，壓縮與否顯示內容完全一樣。

2.3 緩存

網絡通信中，服務器避免重復發送相同的數據到客戶端，網絡中對相同的數據采用緩存機制實現，避免回到網絡中取數據而繼續在用戶本地緩存中獲取數據。當需要緩存時，如果瀏覽器不能完成，使用ajax響應緩存。首先設置請求中的緩存響應屬性為true;

當開啟緩存時，庫需要檢查緩存中是否存在記錄，如果數據存在，調用_handleCacheResonse()，否則才發送請求。

3 結語

這里基于傳統 Web應用模型的通信缺陷,并結合 Ajax的工作原理，給出了數據壓縮和緩存技術來提高網絡的反映速度，提高Ajax框架的性能。經過驗證,我們發現該方法在B/S應用中非常有效,有較大的推廣價值。

[1] 波維爾.Ajax :The Complete Reference[M].北京:電子工業出版社,2009:501.

[2] 譚力,楊宗源,謝瑾奎.Ajax技術得數據響應優化[J].計算機工程,2010,36(07):52-54.

[3] RADHAKRISHNAN SRINIVASAN.用 HTTP 壓縮加快 Web 數據的發送[EB/OL].(2008-07-21) [2010-08-11] http://www.ibm.com/developerworks/cn/web/wa-httpcomp/.

[4] 張升平.Ajax 在優化 Web 系統中的應用[J].通信技術, 2009,42(02): 286-288.

[5] 徐帥彬,牛建強,余小永.基于移動設備的 Ajax 技術的研究與應用[J].通信技術, 2009,42(07):160-162.