利用AJAX技術提升Web應用性能的設計

黃華峰 黃華林

(1.廣州景聯信息科技有限公司，廣東 廣州 510520；2.廣東女子職業技術學院，廣東 廣州 511450)

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

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

AJAX是Web2.0時代的標志性技術，在AJAX中使用的Web標準已被良好定義，并被所有的主流瀏覽器支持。AJAX應用程序獨立于瀏覽器和平臺，已經得到廣泛的應用和支持。眾多非AJAX技術的傳統Web應用也紛紛改造升級，投向AJAX陣營。

1 AJAX原理及流程

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

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

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

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

2 AJAX的優勢

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

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

2.3 AJAX技術不僅可以保障Web應用保留自己B/S結構的優點，也具備C/S結構應用比較強大的功能和用戶感受。AJAX可以進行實時數據驗證，這使Web應用程序更接近于桌面應用程序。

3 利用AJAX技術提升Web應用性能的設計

3.1 Web服務于AJAX技術相結合的應用設計

一般情況下，Web服務網站應用結構如圖1所示。

圖1 未引入AJAX技術的Web服務應用模型

圖2 引入AJAX技術的Web應用模型圖

由圖1可以看出，整個網站有兩個比較明顯的特征。首先整個網站是由多個Web服務組合而成，其次所有的Web服務的訪問都是在服務器端展開。基于這種模式，Web服務對客戶端瀏覽器來講是一個完全透明的狀態，瀏覽器不必清楚的知道Web的功能機位置，只要和服務器進行交互即可。如此一來，整個網絡系統會出現瓶頸，因為Web服務對瀏覽器來說是透明的，此時服務器就要擔負起全部的輸入、輸出的計算工作，無法采用客戶端的計算機的計算能力。在Web服務網站系統的基礎上引入AJAX技術就可以有效改善上述瓶頸。引入AJAX技術之后的網站應用模型如圖2所示。

由圖可知，在Web服務中引入AJAX技術之后，瀏覽器可以直接跟Web服務相交互，中間不用服務器端進行中轉，在一定程度上提升網絡帶寬的利用效率。且瀏覽器還可以采用JavaScript語言對Web服務返回數據展開相應的處理，縮減服務器端的計算量，提升系統的性能。

3.2 基于AJAX技術訪問Web服務的設計

3.2.1 Web訪問技術

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

3.2.2 分析XMLHttpRequest對象訪問Web服務的方法

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

xmlHttp=new XMLHttpRequest();

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

3.3 AJAX技術進行客戶端數據處理

3.3.1 處理XML文檔

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

3.3.2 處理JSON數據

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

4 結束語

在Web應用系統的中引入AJAX技術可以提升Web應用服務的性能，提升用戶體驗，增強系統的可靠性。本文以AJAX技術提升Web應用的訪問性能為研究依據，概述了AJAX技術的工作原理及優勢，介紹了AJAX異步處理服務器回應的方式以及提升Web應用性能的一般方法。

[1]唐永瑞,張達敏.基于Ajax與MVC模式的信息系統的研究與設計[J].電子技術應用,2014(2):128-131.

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

[3]陳瑞祥,季斌,王亞芳,等.基于AJAX的太陽能集熱工程遠程監控系統的設計[J].制造業自動化,2013(22):104-107.

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

[5]屈建明.基于AJAX技術的網絡應用[J].信息通信,2013(6).