Ajax 技術研究及其Web應用

張鈴麗，朱永杰

（許昌學院，河南許昌461000）

Ajax 技術研究及其Web應用

張鈴麗，朱永杰

（許昌學院，河南許昌461000）

Ajax技術是多種現有技術的結合，通過瀏覽器與服務器之間的異步通信，實現了無刷新更新頁面，提高了用戶的體驗.介紹了Ajax的技術原理、核心技術及工作流程，列舉了Ajax技術一些典型應用，并指出Ajax的發展趨勢.

Ajax；XMLHttpRequest；J avaScript；DOM；XML

隨著Web應用技術的不斷發展，用戶已經不滿足于像以前那樣填寫表單，點擊“提交”按鈕，然后等待頁面跳轉的同步請求/響應模式，用戶需要的是一種像任何桌面應用程序那樣流暢、快捷和人性化的Web體驗.另外，大多數的網頁具有一些相同的內容，尤其是同一網站中的網頁.以往打開這些網頁的時都是從服務器上全部下載到客戶端，這造成了巨大的服務器的負擔，其實可以采用新的技術來避免重復內容的請求.因而，Ajax技術應運而生并獲得廣泛應用.

Ajax是Asynchronous JavaScript and XML的縮寫，是由XMLHttpRequest、CSS、XML、DOM和JavaScript等技術結合而成的技術[1].它是基于JavaScript腳本和XML封裝數據的服務器和客戶端的異步交互技術，能夠實現瀏覽器與服務器的異步通信，使B/S結構的應用程序根據用戶輸入實現頁面實時、局部、快速刷新，模擬類桌面應用程序的效果，從而不僅節省了帶寬，而且顯著地提高用戶的體驗.

1 Ajax的技術原理

傳統的Web應用采用同步交互方式，用戶發送一個HTTP請求到服務器，服務器對其進行處理后再返回一個新的Web頁面到瀏覽器.當服務器正在處理的時候，用戶則一直處于等待狀態，這樣，不會產生較好的體驗，而且完整頁面的傳輸會加重網絡負荷和服務器的工作量.

Ajax是多種技術的結合，通過協作發揮各自的作用：使用XHTML和CSS標準化呈現；使用DOM實現動態顯示和交互；使用XML和XSTL進行數據交換與處理；使用XMLHttp-Request對象進行異步數據讀取；使用JavaScript綁定和處理所有數據[1].

圖1 傳統的Web模型

圖2 Ajax Web模型

Ajax采用異步交互方式，在用戶和服務器之間引入一個用JavaScript編寫的Ajax引擎，用來代替用戶與服務器進行交互[3].Ajax引擎是用JavaScript語言所編寫，且通常放在一個隱藏frame中，該引擎負責繪制用戶界面以及與服務器端通信[2].并不是所有的用戶請求都提交給服務器，像一些數據驗證和數據處理等都交給Ajax引擎來做，只有確定需要從服務器讀取新數據時再由Ajax引擎向服務器提交請求，這樣，把以前的一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔.

通過Ajax的技術原理可知，Ajax的最大特點是無刷新更新頁面，減少用戶心理和實際的等待時間；Ajax能夠按需讀取數據，避免了在網絡上發送那些不發生改變的信息.但Ajax并不是完美的技術，它也有自身的缺陷.瀏覽器兼容性差；前進后退按鈕失效；一些手持設備現在還不能很好的支持Ajax；運行效率不高；開發難度加大；對搜索引擎不太友好.

2 Ajax的核心技術

Ajax的核心技術是XMLHttpRequest、JavaScript、CSS、DOM和XML.

XMLHttpRequest是Ajax中最為核心的技術，是XMLHttp組件的一個對象，最早是由微軟1995在IE5.0瀏覽器中率先推出的[4].它直接把數據傳到服務器上或者從服務器上讀取數據，實現上述所介紹無刷新更新頁面的功能.與此對應，opera、Mozilla和safari等瀏覽器也實現了類似的對象，XMLHttpRequest是目前該技術的正式名稱.XMLHttpRequest技術的出現打破了長久以來的Web應用開發模式，這樣既減輕了服務器的負擔又加快了響應速度、縮短了用戶等待時間，提升了用戶的體驗.

JavaScript是一種基于對象和事件驅動并具有較高安全性能的腳本語言，擁有自己的編程標準，可以使用瀏覽器中的很多對象，包括XMLHttpRequest.在Ajax中，JavaScript通過調用XMLHttpRequest對象的方法和屬性與服務器端進行數據交互，同時還可以利用DOM的API來解析從服務器端返回的XML數據和更新HTML頁面的內容.由于JavaScript可以直接在客戶端進行一些事件的處理，充分發揮了客戶端的運算能力，所以就不需要將用戶所提交的簡單請求傳到服務器處理再傳回來，從而大大減輕了服務器的負擔.JavaScript在客戶端的瀏覽器執行，JavaScript代碼不應太多，否則會使得客戶端運行很慢，JavaScript應用最多的就是表單驗證[5].

DOM是Document Object Model的縮寫，即文檔對象模型，為文檔提供了結構化表示，并定義了如何通過腳本來訪問文檔結構.它是個W3C規范，獨立于平臺和語言.DOM定義了如何表示和修改文檔所需要的對象，也定義了這些對象的行為和屬性，以及對象之間的關系.使用JavaScript可以訪問文檔中的所有結點，即所有對象.通過改變這些對象的屬性，用戶可以控制頁面的局部行為，將動態獲取的數據插入到文檔中，實現局部刷新的目的.用戶還可以利用DOM模型增加和刪除文檔結點，實現界面元素的動態變化.在應用Ajax技術時，可以通過DOM來解析處理XML文檔和更新HTML頁面的內容.

XML是Extensible Markup Language的縮寫，即可擴展標記語言，可以規范地定義結構化數據，是網上傳輸的數據和文檔符合統一標準[6].它與HTML的性質完全相同，更準確的說，XML正是從HTML轉化而來，目前，已經成為Internet上數據和文檔傳輸的標準.XML作用很大而且廣為接受，它為跨平臺、跨領域的應用提供了一種通信手段.在應用Ajax技術時，XMLHttpRequest對象可以選擇使用XML作為與服務器端通信的數據格式.

CSS是Web設計沿用已久的部分，同樣，在Ajax中，CSS擔當著界面表現的重任，其重要性甚至超過了傳統的Web程序設計.JavaScript通過XMLHttpRequest對象和服務器進行交互，通常獲取的都是單純的數據，不包括表現元素，如果此時使用JavaScript操作標記的屬性來控制其外觀，會使代碼更加復雜且難以維護，使用CSS則能很好的解決這些問題.樣式表可以定義一些明顯的樣式元素，例如顏色、邊框、背景圖片、透明度和大小等.此外，CSS還可以定義元素相互之間的布局及簡單的交互功能.圖3顯示了Ajax技術的核心技術如何配合工作來完成客戶端與服務器的異步操作.

3 Ajax的工作流程

Ajax實現異步請求/響應模式步驟如下：

3.1 創建XMLHttpRequest對象

在使用XMLHttpRequest對象發送請求和處理響應之前，必須先創建一個XMLHttpRequest對象.代碼如下：

由于XMLHttpRequest不是一個W3C標準，Internet Explorer把XMLHttpRequest實現為一個ActiveX對象，其他瀏覽器（如Firefox、Safari和Opera）把它實現為一個本地JavaScript對象.由于存在這些差別，JavaScript代碼中必須包含有關的邏輯，從而使用ActiveX技術或者使用本地JavaScript對象技術來創建XMLHttpRequest對象，以確保和瀏覽器兼容.

3.2 發出HTTP請求和回調函數

創建了XMLHttpRequest對象之后，就可以使用XMLHttpRequest對象中的open()方法和send()方法來向服務器發送請求，如下所示：

XMLHttpRequest.open(strMethod,strUrl,boolAsync,strUser, strPassword);

XMLHttpRequest.send(varBody);

open()方法的strMethod參數，字符串型，表示HTTP請求的方法，可以為POST、GET、PUT、HEAD、DELETE等；strUrl，字符串型，表示請求的URL地址，可以為絕對地址，也可以為相對地址；boolAsync，布爾型，指定此請求是否為異步方式，默認為true，如果為false，表示此次請求為同步請求模式；strUser和strPassword，字符串型，可選參數.

open調用完畢后要調用send方法，send的參數var-Body，表示通過請求發送的數據，variant型，可以是字符串，DOM樹，或其它數據流.當使用GET方法提交請求，或者沒有需要發送的數據時，可以send(nulll)或直接省略參數send ().

在發送請求后，還要指定回調函數.創建XMLHttpRequest對象向服務器發送一個HTTP請求后，要決定當收到服務器的響應后，需要做什么.這需要告訴XMLHttpRequest對象用哪一個函數來處理這個響應.通常把該處理函數叫做回調函數.XMLHttpRequest對象提供了onready-statechange屬性來指定回調函數，例如：

XMLHttpRequest.onreadystatechange=Call-BackFunction-Name；

也可以用JavaScript即時定義函數的方式定義響應函數，例如：

XMLHttpRequest.onreadystatechange=funct-ion(){};

3.3 處理服務器返回的信息

當XMLHttpRequest對象的readyState發生變化時將觸發readystatechange事件.通過將處理函數賦給XMLHttpRequest對象的onready-statechange屬性，可以為該事件指定事件處理函數.如果readyState值是4，代表服務器已經返回所有的信息，可以開始處理信息并更新頁面內容.服務器返回信息后，通過訪問XMLHttp-Request對象的status屬性來獲取當前HTTP請求的狀態，以此來判斷請求是否成功.其中，200代表頁面正常.

在XMLHttpRequest對象完成一次HTTP請求后，可以通過訪問其responseText或response-XML屬性來獲取返回的數據.

responseText將返回的數據作為字符串格式返回，responseXML將返回的數據格式化為XML文檔返回.

以XML文檔方式返回的數據，需要使用DOM來解析，從中提取響應數據，DOM也提供了對頁面中各個對象的讀寫支持，通過DOM可以方便地完成對頁面內容的更新.

3.4 取消當前請求

如果需取消一個正在進行中的請求，可以調用XMLHttpRequest對象的abort方法，如下所示：

XMLHttpRequest.abort();

調用后該方法后，XMLHttpRequest對象重新回到未初始化狀態.

4 Ajax技術的應用

AJAX的技術特點在于異步交互、動態更新Web頁面，因此它的適用范圍是交互較多、頻繁讀取數據的Web應用. Ajax主要可以用于數據驗證、級聯菜單和自動更新頁面等.

在填寫表單時，有些數據需要保證唯一性，如在用戶注冊的過程中，需要檢驗待注冊的用戶名是否唯一.傳統的方法是采用window.open的彈出窗口或window.showModalDialog的對話框，兩者都需要打開窗口.而Ajax采用異步方式直接將參數提交至服務器，用window.alert將服務器返回的校驗信息顯示出來，這樣可以快速完成驗證又不加重服務器的負擔.

以往在網頁中應用級聯菜單時，一次性地將級聯菜單的所有數據全部讀出并寫入數組，然后根據用戶的操作用JavaScript來控制它的子集項目的呈現.這種方法避免了頁面的刷新，但由于用戶對于菜單項的單擊是不均勻的，在菜單結構復雜數據量大的時候會產生相當大的冗余，造成資源的浪費.應用Ajax技術之后，在初始化頁面時只讀出它的第一級的所有數據并顯示，在用戶操作一級菜單中的某一項時，會通過Ajax向后臺請求該菜單項所屬的二級子菜單的所有數據，以此類推……這樣，減少了數據下載總量，在真正意義上實現“按需取數據”局部更新頁面.

在有些Web應用中數據更新速度很快，如聊天室的聊天記錄等等.在Ajax出現之前，用戶想看到最新消息必須手動刷新或者利用頁面提供的定時刷新功能.而Ajax在頁面加載后會通過引擎輪詢服務器，查看是否有需要更新的內容.若有，只需將新數據下載，在頁面上進行動態更新并給出提示.這樣既避免用戶手工刷新頁面的不便，也不會因頻繁刷新而造成資源浪費.

然而Ajax不是萬能的，只有在適宜的場合才能充分發揮長處，改善系統性能和用戶體驗.

5 結語

Ajax技術是多種技術的結合，實現了無刷新更新頁面；它將原來一些服務器端的工作利用客戶端閑置的能力來處理，從而減輕服務器的負擔，減少用戶的等待時間，提升了用戶體驗.通過運用Ajax技術，可以構建更為動態和響應更靈敏的Web引用程序，用戶體驗逐步接近桌面應用.隨著Ajax技術的成熟和各種瀏覽器的支持，Ajax技術將會得到更加廣泛的應用.

〔1〕Asleson R.Ajax基礎教程[M].北京：人民郵電出版社, 2006.

〔2〕游麗貞.Ajax引擎的原理與應用[J].微計算機信息,2006,22 (2):506-206.

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

〔4〕王凈,占凱.Ajax技術和Web應用[J].艦船電子工程,2009，29(11):127-131.

〔5〕奈名高,王程根,鄧浩,李祎.基于Web2.0的Ajax技術的開發[J].計算機技術與發展,2007,17(5):203-206.

〔6〕吳吉義,平玲娣.Web2.0主流應用技術——Ajax性能分析[J].計算機工程與設計,2008,29(8):1913-1914,1945.

TP393

A

1673-260X（2010）11-0020-03