Ａｊａｘ技術研究與應用

摘 要：給出一種Web開發中交互性設計的新方法，使用綜合Javascript，XMLHttpRequest，XML，CSS，HTML的Ajax技術進行Web應用開發。與傳統的Web開發技術相比較，Ajax技術使得客戶端與服務器通訊時間縮短，服務器響應后可以在不刷新整個頁面的情況下獲取數據，用戶響應較快，從而適應交互性強的應用需求。實踐表明，Ajax技術有效提高Web應用的交互能力。

關鍵詞：Ajax；XMLHttpRequest；Javascript；異步交互；擴展超媒體標記語言(XML)

中圖分類號：TP393 文獻標識碼：B

文章編號：1004-373X(2008)06-093-02

Research and Application of Ajax Technique

WANG Kun，FANG Ming

(Computer College，Xi′an Shiyou University，Xi′an，710065，China)

Abstract：This paper presents the development of an interactive Web design new method，which uses Ajax technology，including Javascript，XMLHttpRequest，XML，CSS，HTML，to develop Web applications.Compared with the traditional Web development technology，Ajax technology makes the client and server communications time shorter，responses faster，and accesses the data from server without refreshing the entire page，thereby meet demand of the highly interactive applications.In practice，Ajax technology effectively improves the interactive capabilities of Web application.

Keywords：Ajax；XMLHttpRequest；Javascript；asynchronous interaction；XML

Ajax(Asynchronous Javascrip t and XML，異步Javascrip t和XML)由Jess James Garrett在論文 “A new Approach to Web Application ”中提出，Ajax不是什么新技術，他是通過對Javascript，XHTML，CSS，DOM，XML，XMLHttpRequest等幾種技術的全新組合使用，顛覆了傳統Web應用在用戶交互方面的模式。傳統的Web開發中與服務器通訊往往等待時間較長，服務端響應則需要刷新整個Web客戶頁面，網絡上數據傳輸較高，用戶響應較慢。使用Ajax開發Web應用后，則允許瀏覽器采用異步方式與服務器通信并且無需刷新當前頁面。

1 Ajax技術概述

Ajax技術是一種創建Web開發的技術，Ajax并非新的技術而是一種創新，他使用以下技術：使用擴展超媒體標記語言( eXtended Hyper2textMarkup Language，XHTML)和級聯樣式單(Cascading Style Sheet，CSS)創建Web應用的UI；使用Javascript與XHTML文檔對象模型(Document ObjectModel，DOM)實現動態顯示用于交互；使用XMLHttpRequest(非IE瀏覽器中的Javascript中的對象或是IE瀏覽器中的ACTIVEX對象)與服務器異步通信；最后用JavaScript綁定和處理所有數據。

在這里XMLHttpRequest是重點。

在傳統Web應用中，用戶通過圖形用戶界面觸發一個HTTP請求，服務器處理用戶請求后，生成一個新的頁面發送給客戶端。每次客戶端請求時必須等待服務器響應請求并發送新頁面到客戶端后，用戶才能再次進行操作，造成空閑等待。另外，即便是很簡單的通信也會造成服務器更新整個頁面，嚴重浪費網絡資源。采用Ajax技術開發Web應用時，允許客戶和服務器采用靈活的通訊方式，即可以采用異步或同步方式與服務器通訊，并在服務器處理請求后不必重新刷新整個頁面而是根據返回的數據使用JavaScript和DOM技術有選擇的更新部分頁面。

2 Ajax技術原理

Ajax本質上也是遵循請求/響應模式，其基本處理流程是：對象初始化、發送請求、服務器接收、服務器返回、客戶端接收、修改客戶端頁面內容，只不過這個過程可以是異步的。如圖1所示。

2.1 初始化對象并發出XMLHttpRequest請求

首先創建一個XMLHttpRequest(IE以Activex組件方式提供，firfox，sarfri提供一個javascript內置對象)實例，他允許客戶端向服務器發出一個HTTP請求，由于各個瀏覽器對XMLHttpRequest對象的提供方式不同，我們需要編寫跨瀏覽器的初始化代碼：

var xmlHttp；

If(window.ActivexObject){

xmlHttp = new ActivexObject(“Microsoft.XMLHTTP”)；

}else if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest()；

}

2.2 指定響應處理函數

當客戶端請求被服務段處理后會返回XML或JSON格式的數據，以便于客戶端處理服務段響應，我們需要提供javascript處理函數，告訴XMLHttpRequest對象哪個函數會處理XMLHttpRequest對象狀態的改變，為此要把XMLHttpRequest對象的onreadystatechange屬性設置為指向javascript函數的指針。

xmlHttp.onreadystatechange = callback；//處理函數

function callback(){

}

2.3 發出HTTP請求

指定響應處理函數后，開始向服務器發送請求。首先調用XMLHttpRequest對象的open方法發出指定的請求。Open方法有3個參數：第一個是指示所使用的方法(GET或POST等)；第二個是表示目標的資源URL；最后一個是指示請求為異步或同步的布爾值。接著，調用XMLHttpRequest對象的send方法把請求發送到指定的資源。send()方法接受一個參數，通常是1個串或dom對象，這個參數作為請求體的一部分發送到目標資源。向send()方法提供參數時，需確保open()函數指定的方法是POST，如果沒有數據作為請求體的一部分被發送，則使用1.。

xmlHttp.open(\"GET\"，\"server.jsp?name=a\"，true)；

xmlHttp.send(1)；

xmlHttp.open(\"POST\"，\"server.jsp\"，true)；

xmlHttp.send(\"name=a\")；

2.4 服務器處理請求并返回數據

在服務器端，被請求的服務端程序解析請求參數后執行業務邏輯，并將響應序列化為XML或JSON格式數據后返回。

2.5 處理服務器響應

服務端返回后，響應函數首先檢查XMLHttpRequest對象的readyState狀態是否為4(4 表示服務器已經傳回數據信息，可以開始處理信息)；接下來需要判斷HTTP狀態碼是否為200(狀態碼200表示頁面正常)。以上2步驗證后，開始執行具體的業務處理代碼。

function callback(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

//處理代碼

} } }

3 基于Ajax技術實現自動完成功能

自動完成功能可以根據以往的信息填入新的信息，或是根據輸入信息提供建議，這是Web應用中非常實用的功能。谷歌搜索建議就是一個自動完成功能，他能根據用戶的輸入列出相近搜索條目的建議。本文實現了一個與其類似的功能。首先，在表單輸入框中輸入數據，執行onkeyup事件請求。

findSuggestion()函數負責用戶請求，并定義調用函數callback()。代碼如下：

var url = \"SuggestionServlet?suggestion=\" + escape(suggestion.value)；

xmlHttp.open(\"GET\"，url，true)；

xmlHttp.onreadystatechange = callback；

提交表單數據后，服務器負責處理客戶端請求，查詢數據信息返回相近搜索條目，處理完畢后返回回調函數callback()需要用到的數據，本文采用XML序列化返回數據，其中具體XML 的格式自定義。

中國移動

中國銀行

中國工商銀行

…

\"；

客戶端接受到服務器傳來的數據后，調用回調函數callback()。回調函數中setSuggestions()函數負責解析返回的XML格式數據(xmlHttp.responseXML獲得服務器返回的數據)，并繪制自動完成區域與填充數據，clearSuggestions()函數負責在沒有新文檔返回時清除繪制的區域(setSuggestions() 和clearSuggestions()函數具體代碼省略)。

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

var name = xmlHttp.responseXML.getElementsByTagName(\"suggestion\")[0].firstChild.data；

setSuggestions(xmlHttp.responseXML.getElementsByTagName(\"suggestion\"))；

} else if (xmlHttp.status == 204){

clearSuggestions()；

}

}

4 結 語

Web開發中用戶體驗一直是一個難以解決的問題，B/S應用開發往往受到很多限制難以與桌面應用交互能力匹敵，這嚴重制約了B/S應用的發展，使得人們不得不使用桌面應用來實現需要較高體驗的應用。Ajax 技術為B/S應用開辟了一條新路，他平滑地實現與服務器的交互，增強用戶體驗。該方法優于以往傳統的Web開發技術，有著廣闊的應用空間。

參考文獻

[1]Elliotte Rusty Harold.Java.語言與XML處理教程[M].劉文紅，譯.北京：電子工業出版社，2004.

[2]蘆東昕，李典蔚，柳長安.基于AJAX和Servlet 的Web GIS 的研究與實現\\[J\\].計算機技術與發展，2007，17(3)：192-199.

[3]陸海晶，劉萬軍.基于Ajax的Web應用技術的研究與實現\\[J\\].2007，7(3)：415-418.

[4]敖麗敏，李林輝.基于AJAX的電力圖形系統的實現\\[J\\].電力系統自動化，2007，31(9)：47-50.

作者簡介 王 錕 男，1976年出生，四川營山人，碩士研究生。管理信息系統與計算機網絡、數據庫、數據倉庫。

方 明 男，1963年出生，湖南人，博士后，教授。研究方向為數據倉庫、數據庫、管理信息系統。