利用AJAX技術(shù)提升Web應(yīng)用性能的設(shè)計(jì)

黃華峰 黃華林

(1.廣州景聯(lián)信息科技有限公司，廣東 廣州 510520；2.廣東女子職業(yè)技術(shù)學(xué)院，廣東 廣州 511450)

AJAX，Asynchronous JavaScript and XML， 就是異步JavaScript及XML。AJAX并非一種新的編程語言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。通過AJAX，設(shè)計(jì)人員可使用JavaScript的XMLHttpRequest對象來直接與服務(wù)器進(jìn)行通信。通過XMLHttpRequest對象，JavaScript可以在不重載頁面的情況下與Web服務(wù)器交換數(shù)據(jù)。

AJAX在瀏覽器與Web服務(wù)器之間使用異步方式傳輸數(shù)據(jù)，可以只向服務(wù)器請求頁面中局部變化的數(shù)據(jù)，獲得服務(wù)器返回的信息和數(shù)據(jù)后只做頁面的局部刷新，而不需要重載整個(gè)頁面，通信數(shù)據(jù)量大大減少，同時(shí)為用戶提供非常棒的Web體驗(yàn)。

AJAX是Web2.0時(shí)代的標(biāo)志性技術(shù)，在AJAX中使用的Web標(biāo)準(zhǔn)已被良好定義，并被所有的主流瀏覽器支持。AJAX應(yīng)用程序獨(dú)立于瀏覽器和平臺(tái)，已經(jīng)得到廣泛的應(yīng)用和支持。眾多非AJAX技術(shù)的傳統(tǒng)Web應(yīng)用也紛紛改造升級，投向AJAX陣營。

1 AJAX原理及流程

AJAX是異步JavaScript及XML，而JavaScript原本卻是一種單線程執(zhí)行的腳本語言。JavaScript的單線程表現(xiàn)在其任一函數(shù)都要從頭到尾逐句執(zhí)行完畢之后，才會(huì)執(zhí)行另一函數(shù)，對于瀏覽器來說，也就是無法在渲染頁面的同時(shí)執(zhí)行代碼。這樣，界面的更新、鼠標(biāo)事件的響應(yīng)處理、setTimeout計(jì)時(shí)器、setInterval計(jì)時(shí)器等任務(wù)的執(zhí)行都要先排隊(duì)，后依據(jù)隊(duì)列先后順序執(zhí)行。這樣一來，若有一段JavaScript代碼執(zhí)行時(shí)間比較長，那么在這段代碼執(zhí)行期間任何界面渲染都會(huì)被阻塞，界面事件處理也會(huì)停止響應(yīng)。AJAX技術(shù)采用了JavaScript的異步編程模式，能夠?qū)⒋a的運(yùn)行打散或者讓IO調(diào)用在后臺(tái)運(yùn)行，這樣能讓界面更新和其他事件處理能夠及時(shí)地進(jìn)行。

JavaScript的異步編程模式可以利用異步IO讓UI運(yùn)行更加流暢，比如AJAX通過 XMLHTTPRequest的異步通信獲取服務(wù)器數(shù)據(jù)，在接收服務(wù)器回應(yīng)后再更新界面，在異步獲取數(shù)據(jù)的時(shí)候不會(huì)阻礙UI的更新。目前，在眾多HTML5設(shè)備API的設(shè)計(jì)中都充分采用了異步編程模式。

AJAX技術(shù)的核心之一是XMLHttpRequest對象，這是一種可以支持異步請求的技術(shù)。換句話來說，XMLHttpRequest可以將用戶信息以異步方式發(fā)送到服務(wù)器端，并接收服務(wù)器響應(yīng)信息和數(shù)據(jù)。XMLHttpRequest對象在大部分瀏覽器上已經(jīng)實(shí)現(xiàn)而且擁有一個(gè)簡單的接口允許數(shù)據(jù)從客戶端傳遞到服務(wù)端，且不會(huì)打斷用戶當(dāng)前的操作。使用XMLHttpRequest傳送的數(shù)據(jù)可以是任何格式，但以XML格式的數(shù)據(jù)為多。程序員可以使用XMLHttpRequest對象的open方法啟用一個(gè)AJAX調(diào)用向服務(wù)器發(fā)出請求，然后等待，得到服務(wù)器回應(yīng)時(shí)，將在其onreadyStateChange事件響應(yīng)中指定的處理函數(shù)來處理服務(wù)器的回應(yīng)。

在建立Web應(yīng)用時(shí)，AJAX為客戶端頁面的刷新提供很大的方便。例如，在投票系統(tǒng)中，AJAX技術(shù)可以對投票總數(shù)進(jìn)行及時(shí)更新，每次更新只需服務(wù)器端返回更新后的投票總數(shù)量數(shù)據(jù)，僅刷新顯示投票總數(shù)的一個(gè)頁面元素，不需要重新載入整個(gè)頁面，傳輸?shù)臄?shù)據(jù)量大大減少，能顯著提升Web服務(wù)的性能。

2 AJAX的優(yōu)勢

2.1 AJAX技術(shù)可以在網(wǎng)頁內(nèi)部與服務(wù)器間達(dá)到通信的效果，減輕服務(wù)器的負(fù)擔(dān)。由于AJAX的根本理念是“按需取數(shù)據(jù)”，可以最大可能的減少了冗余請求和響影對服務(wù)器造成的負(fù)擔(dān)，又可以做到無須刷新整個(gè)頁面就可以更新變化的部分，給用戶帶來流暢而友好的體驗(yàn)。

2.2 無需客戶端任何安裝，即可被絕大多數(shù)主流瀏覽器所支持；可以使數(shù)據(jù)和表現(xiàn)分離；平衡了前、后端的負(fù)載，原本數(shù)據(jù)大多由后端負(fù)責(zé)處理，借由AJAX讓客戶端分擔(dān)些工作，減低了后端的負(fù)載。

2.3 AJAX技術(shù)不僅可以保障Web應(yīng)用保留自己B/S結(jié)構(gòu)的優(yōu)點(diǎn)，也具備C/S結(jié)構(gòu)應(yīng)用比較強(qiáng)大的功能和用戶感受。AJAX可以進(jìn)行實(shí)時(shí)數(shù)據(jù)驗(yàn)證，這使Web應(yīng)用程序更接近于桌面應(yīng)用程序。

3 利用AJAX技術(shù)提升Web應(yīng)用性能的設(shè)計(jì)

3.1 Web服務(wù)于AJAX技術(shù)相結(jié)合的應(yīng)用設(shè)計(jì)

一般情況下，Web服務(wù)網(wǎng)站應(yīng)用結(jié)構(gòu)如圖1所示。

圖1 未引入AJAX技術(shù)的Web服務(wù)應(yīng)用模型

圖2 引入AJAX技術(shù)的Web應(yīng)用模型圖

由圖1可以看出，整個(gè)網(wǎng)站有兩個(gè)比較明顯的特征。首先整個(gè)網(wǎng)站是由多個(gè)Web服務(wù)組合而成，其次所有的Web服務(wù)的訪問都是在服務(wù)器端展開。基于這種模式，Web服務(wù)對客戶端瀏覽器來講是一個(gè)完全透明的狀態(tài)，瀏覽器不必清楚的知道Web的功能機(jī)位置，只要和服務(wù)器進(jìn)行交互即可。如此一來，整個(gè)網(wǎng)絡(luò)系統(tǒng)會(huì)出現(xiàn)瓶頸，因?yàn)閃eb服務(wù)對瀏覽器來說是透明的，此時(shí)服務(wù)器就要擔(dān)負(fù)起全部的輸入、輸出的計(jì)算工作，無法采用客戶端的計(jì)算機(jī)的計(jì)算能力。在Web服務(wù)網(wǎng)站系統(tǒng)的基礎(chǔ)上引入AJAX技術(shù)就可以有效改善上述瓶頸。引入AJAX技術(shù)之后的網(wǎng)站應(yīng)用模型如圖2所示。

由圖可知，在Web服務(wù)中引入AJAX技術(shù)之后，瀏覽器可以直接跟Web服務(wù)相交互，中間不用服務(wù)器端進(jìn)行中轉(zhuǎn)，在一定程度上提升網(wǎng)絡(luò)帶寬的利用效率。且瀏覽器還可以采用JavaScript語言對Web服務(wù)返回?cái)?shù)據(jù)展開相應(yīng)的處理，縮減服務(wù)器端的計(jì)算量，提升系統(tǒng)的性能。

3.2 基于AJAX技術(shù)訪問Web服務(wù)的設(shè)計(jì)

3.2.1 Web訪問技術(shù)

在瀏覽器中可以采用不同的技術(shù)對Web服務(wù)進(jìn)行訪問。例如：微軟公司為Wiodows系統(tǒng)研發(fā)的Webservice行為組件，采用這些組件用戶可以之間在瀏覽器與服務(wù)器端進(jìn)行交互操作。但這些技術(shù)并沒有得到廣泛的應(yīng)用，首先這些技術(shù)是瀏覽器廠商自己開發(fā)的私有擴(kuò)展，沒有比較統(tǒng)一的標(biāo)準(zhǔn)無法大范圍推廣，其次是其不支持異步Web服務(wù)訪問，無法展開異步訪問會(huì)導(dǎo)致網(wǎng)頁加載的時(shí)間過長，用戶無法接受長時(shí)間的等待。引入AJAX技術(shù)可以有效改善上述情況，AJAX技術(shù)可以支持Windows、MacOS等這些主流操作系統(tǒng)，也支持IE/firefox/Opear等眾多主流瀏覽器。

3.2.2 分析XMLHttpRequest對象訪問Web服務(wù)的方法

基于AJAX技術(shù)的Web服務(wù)訪問主要采用XMLHttpRequest對象來實(shí)現(xiàn)，在IE以外的瀏覽器之中建立一個(gè)XMLHttpRequest對象比較容易，只需要下列代碼：

xmlHttp=new XMLHttpRequest();

在IE瀏覽器中建立XMLHttpRequest對象則離不開MSXML組件。首先可以在編寫代碼時(shí)采用新版本的MSXML6.0組件創(chuàng)建XMLHttpRequest對象，如果失敗則采用IE6.0自帶的MSXML3.0組件創(chuàng)建，如果再次失敗則嘗試運(yùn)用IE6.0以下的版本瀏覽器附帶MSXML組件，如果失敗就采用非IE瀏覽器支持的XMLHttpRequest()函數(shù)來創(chuàng)建XMLHttpRequest對象。如果依然失敗就可以拋出異常，說明用戶應(yīng)用的瀏覽器不支持AJAX功能。

3.3 AJAX技術(shù)進(jìn)行客戶端數(shù)據(jù)處理

3.3.1 處理XML文檔

在標(biāo)準(zhǔn)的AJAX程序中，瀏覽器與服務(wù)器進(jìn)行信息交換采用XML格式。XML在服務(wù)器端進(jìn)行處理時(shí)通常不會(huì)出現(xiàn)問題，主流平臺(tái)可以各自給出比較完善的SAX和DOM對象，這些對象也較多的第三方支持，可以依照需要選取。在瀏覽器進(jìn)行XML文檔處理時(shí)采用W3C XML DOM標(biāo)準(zhǔn)就可進(jìn)行，只是必須注意IE瀏覽器與個(gè)別瀏覽器創(chuàng)建DOM對象方法上的不同之處。以下的代碼是IE和個(gè)別瀏覽器創(chuàng)建DOM對象的方法。通常通過AJAX狀態(tài)值和狀態(tài)碼判斷訪問成功與否，再將服務(wù)器獲取的XML文檔httpRequest.responseText在瀏覽器中進(jìn)行解析。以下是一段樣例代碼：

3.3.2 處理JSON數(shù)據(jù)

JSON，JavaScript Object Notation，是一種簡單的數(shù)據(jù)格式，是JavaScript原生格式，比XML要輕巧得多，在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或工具包。JSON數(shù)據(jù)的訪問比XML訪問簡單很多，可以像訪問JavaScript對象一樣去訪問JSON數(shù)據(jù)。當(dāng)前，很多AJAX架構(gòu)使用JSON部分取代了XML，同時(shí)提升其JavaScript對象特性。JSON數(shù)據(jù)格式比較簡單，易于讀寫，易于解析，支持多種服務(wù)器端語言，已廣泛使用。例如，某次AJAX請求獲得服務(wù)器以JSON格式返回學(xué)生信息列表，想要對學(xué)生的信息進(jìn)行訪問，JavaScript樣例代碼片段如下：

4 結(jié)束語

在Web應(yīng)用系統(tǒng)的中引入AJAX技術(shù)可以提升Web應(yīng)用服務(wù)的性能，提升用戶體驗(yàn)，增強(qiáng)系統(tǒng)的可靠性。本文以AJAX技術(shù)提升Web應(yīng)用的訪問性能為研究依據(jù)，概述了AJAX技術(shù)的工作原理及優(yōu)勢，介紹了AJAX異步處理服務(wù)器回應(yīng)的方式以及提升Web應(yīng)用性能的一般方法。

[1]唐永瑞,張達(dá)敏.基于Ajax與MVC模式的信息系統(tǒng)的研究與設(shè)計(jì)[J].電子技術(shù)應(yīng)用,2014(2):128-131.

[2]呂國勇,史祥龍.基于嵌入式Linux和AJAX技術(shù)的Web異步交互設(shè)計(jì)[J].計(jì)算機(jī)應(yīng)用,2013,33(z1):247-251.

[3]陳瑞祥,季斌,王亞芳,等.基于AJAX的太陽能集熱工程遠(yuǎn)程監(jiān)控系統(tǒng)的設(shè)計(jì)[J].制造業(yè)自動(dòng)化,2013(22):104-107.

[4]王宏偉,孫文磊,何麗,等.AJAX技術(shù)在Web零件庫系統(tǒng)中的應(yīng)用研究[J].制造業(yè)自動(dòng)化,2011,33(12):107-110.

[5]屈建明.基于AJAX技術(shù)的網(wǎng)絡(luò)應(yīng)用[J].信息通信,2013(6).