基于AJAX數(shù)據(jù)查詢的研究與應(yīng)用

李 冬 李小勇 周恕義

北京工業(yè)大學(xué) 北京 100124

基于AJAX數(shù)據(jù)查詢的研究與應(yīng)用

李 冬 李小勇 周恕義

北京工業(yè)大學(xué) 北京 100124

介紹了AJAX相對(duì)于傳統(tǒng)的頁面交互的不同之處，然后以數(shù)據(jù)查詢?yōu)閷?shí)際例子，詳細(xì)地描述了如何使用AJAX來進(jìn)行開發(fā)。

AJAX；數(shù)據(jù)查詢

傳統(tǒng)的Web應(yīng)用，是由用戶端向Web服務(wù)器發(fā)送一個(gè)請(qǐng)求。服務(wù)器接收并處理傳來的請(qǐng)求，然后送回一個(gè)新的網(wǎng)頁。這個(gè)做法浪費(fèi)了許多帶寬，因?yàn)樵谇昂髢蓚€(gè)頁面中的大部分HTML代碼往往是相同的。由于每次交互都需要向服務(wù)器發(fā)送請(qǐng)求，這導(dǎo)致了用戶界面的響應(yīng)時(shí)間變得很慢。

與此不同，AJAX交互可以僅向服務(wù)器發(fā)送并取回必需的數(shù)據(jù)，它使用一些基于XML的頁面服務(wù)接口，并在客戶端采用JavaScript處理來自服務(wù)器的回應(yīng)(如圖1所示)。因?yàn)樵诜?wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少(大約只有原來的5%)，結(jié)果我們就能看到服務(wù)器響應(yīng)更加快速。同時(shí)很多的處理工作可以在發(fā)出請(qǐng)求的客戶端機(jī)器上完成，所以Web服務(wù)器的處理時(shí)間也減少了不少。

圖1 傳統(tǒng)頁面交互和AJAX頁面交互的區(qū)別

基于以上介紹，我們看到了AJAX技術(shù)相對(duì)于傳統(tǒng)交互的優(yōu)勢(shì)，但也不是任何情況下使用AJAX都適合。本文將介紹的數(shù)據(jù)查詢就屬于非常適合使用AJAX的情況，其中包括了查詢和分頁2大部分。使用AJAX將大大減小開發(fā)過程的困難程度，并且使網(wǎng)頁有了更好的用戶體驗(yàn)性。

1 AJAX相關(guān)技術(shù)

1.1 jQuery

jQuery是一個(gè)快速的，簡(jiǎn)潔的JavaScript庫，使用戶能更方便地處理HTML Documents，Events，實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇，本文的AJAX技術(shù)也是基于jQuery的。

1.2 JSON

JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式。易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成。它基于JavaScript的一個(gè)子集。JSON采用完全獨(dú)立于語言的文本格式，但是也使用了類似于C語言家族的習(xí)慣，這些特性使JSON成為理想的數(shù)據(jù)交換語言。本文的AJAX由服務(wù)器端向客戶端傳遞的XML數(shù)據(jù)就是采用JSON格式。

2 基于AJAX的數(shù)據(jù)查詢實(shí)例

2.1 數(shù)據(jù)查詢的需求

下面就來分析一個(gè)實(shí)例，看看相對(duì)于傳統(tǒng)的刷新界面的模式，AJAX在數(shù)據(jù)查詢過程中會(huì)給我們帶來怎樣的驚喜。

實(shí)例是對(duì)北京工業(yè)大學(xué)學(xué)校內(nèi)教室的查詢，學(xué)校共有6棟教學(xué)樓，教室分布于各個(gè)教學(xué)樓的不同樓層內(nèi)，每個(gè)教室的座位數(shù)不等，教室的種類不一樣，并且每個(gè)教室內(nèi)所擁有的設(shè)備也不盡相同。我們需要根據(jù)不同查詢條件的組合來快速查找到我們需要的教室；同時(shí)我們還希望通過“教學(xué)樓-樓層-教室”的快速定位的方式，來迅速地查詢到目標(biāo)教室。

對(duì)于組合查詢，如圖2所示，上面的5行是查詢條件，可以任意組合。組合查詢條件的選擇是通過JavaScript和css結(jié)合實(shí)現(xiàn)的，點(diǎn)擊某個(gè)條件，有色塊的表示該條件被選中；再點(diǎn)擊一次，則會(huì)復(fù)原。這樣就會(huì)帶來一個(gè)問題：如果使用傳統(tǒng)的頁面刷新的方法，則跳轉(zhuǎn)頁面后條件欄的所有條件都會(huì)被改回初始狀態(tài)，由于查詢條件眾多會(huì)造成用戶查詢后忘了自己是用什么查詢條件查詢的，這樣就不符合用戶的使用習(xí)慣了。當(dāng)然，我們可以在后臺(tái)保留查詢條件，在頁面跳轉(zhuǎn)的時(shí)候再把這些條件以適當(dāng)?shù)男问絺鞯角芭_(tái)來，再用JavaScript來進(jìn)行初始化。這種做法理論上來說是可以實(shí)現(xiàn)的，但是無疑工作量是巨大的。相比之下，如果我們用AJAX的方法來實(shí)現(xiàn)，開發(fā)起來會(huì)輕松很多，且和用戶的交互性會(huì)更加友好。

對(duì)于快速查詢，如圖3所示，由3個(gè)下拉框組成，先選擇教學(xué)樓，動(dòng)態(tài)生成樓層列表，再根據(jù)教學(xué)樓和樓層動(dòng)態(tài)生成滿足條件的教室列表，選擇教室后就可以查詢了。當(dāng)然快速查詢的查詢結(jié)果只可能有1條。這種動(dòng)態(tài)下拉框的生成也是典型的AJAX應(yīng)用，若用傳統(tǒng)的頁面刷新方式會(huì)復(fù)雜的多。

2.2 利用AJAX解決問題

用AJAX可以輕松地解決前面提出的一系列問題，下面進(jìn)行詳細(xì)地介紹。組合查詢和快速查詢都要處理查詢時(shí)的AJAX問題；而由于組合查詢會(huì)返回許多條結(jié)果，快速定位僅返回1條結(jié)果，因此組合查詢還需要解決分頁的AJAX問題。

2.2.1 AJAX查詢

組合查詢和快速查詢共用1個(gè)查詢按鈕，根據(jù)當(dāng)前Tab界面的選中情況來執(zhí)行相應(yīng)的查詢。

點(diǎn)擊查詢按鈕后，A J A X將查詢條件傳至后臺(tái)，后臺(tái)查詢數(shù)據(jù)庫后，再用J S O N格式將查詢結(jié)果進(jìn)行封裝傳至前臺(tái)。處理函數(shù)首先調(diào)用CombineSelectDraw(data)函數(shù)對(duì)表格進(jìn)行重新繪制，然后需要將查詢條件保存在本頁的隱藏標(biāo)簽里，這是為了分頁時(shí)調(diào)用。

2.2.2 AJAX分頁

分頁僅針對(duì)組合查詢，因?yàn)榭焖俨樵儍H返回1條結(jié)果，不涉及分頁。如圖2所示，切換每頁記錄數(shù)、首頁、上頁、下頁、尾頁和跳轉(zhuǎn)到某頁需要用到分頁，但它們的原理都是一樣的，都是根據(jù)現(xiàn)有條件的AJAX的查詢，只不過頁面大小和跳轉(zhuǎn)到第幾頁這兩個(gè)參數(shù)不同而已。

以圖2中的條件為例，如果需要跳轉(zhuǎn)到下一頁，分頁的AJAX需要向后臺(tái)傳遞以下參數(shù)：

之后的流程同查詢一樣，后臺(tái)接收到這些參數(shù)后執(zhí)行查詢，然后將查詢結(jié)果傳至前臺(tái)，再次調(diào)用CombineSelectDraw(data)函數(shù)對(duì)表格進(jìn)行重新繪制就可以實(shí)現(xiàn)分頁AJAX了。

3 使用AJAX的優(yōu)點(diǎn)與缺點(diǎn)

通過以上介紹，我們知道使用AJAX會(huì)給我們帶來不少幫助，它的優(yōu)點(diǎn)主要有以下幾點(diǎn)：

(1)由于交互的數(shù)據(jù)量大大減少，減輕服務(wù)器的負(fù)擔(dān)。

(2)無刷新更新頁面，減少了用戶的等待時(shí)間，具有更好的用戶體驗(yàn)性。

(3)頁面少部分有變化的情況下，使用AJAX會(huì)大大減少開發(fā)量。

任何東西都有其兩面性，在享受AJAX帶來的幫助的同時(shí)也要接受其帶來的麻煩，如何權(quán)衡需要根據(jù)實(shí)際情況來逐一分析，AJAX的缺點(diǎn)主要有：

(1)絕大部分手持設(shè)備現(xiàn)在還不能很好的支持AJAX。

(2)由于缺少好的調(diào)試工具，基于JavaScript的AJAX調(diào)試起來非常困難。

(3)AJAX的無刷新重載，由于頁面的變化沒有刷新重載那么明顯，所以容易給用戶帶來困擾。

4 結(jié)束語

AJAX技術(shù)的出現(xiàn)，使互聯(lián)網(wǎng)默認(rèn)的請(qǐng)求/響應(yīng)模式發(fā)生了重大轉(zhuǎn)變，這也是AJAX的核心所在。AJAX前景非常樂觀，可以提高系統(tǒng)性能，優(yōu)化用戶界面。使用AJAX最著名的例子就是Google公司，Google在它許多著名的交互應(yīng)用程序中使用了AJAX，如Google討論組，Google地圖，Google搜索，Gmail等。但同時(shí)AJAX也不是完美無缺，正如本文所介紹，它也有不少的缺點(diǎn)，因此在使用AJAX之前，我們需要先權(quán)衡AJAX帶來的利弊。幾年來我們相繼在北京工業(yè)大學(xué)教育在線、北京工業(yè)大學(xué)多媒體教室服務(wù)網(wǎng)以及北京市精品課程資源網(wǎng)的開發(fā)中使用了該技術(shù)并收到了較好的效果。

[1]李卿，樓新遠(yuǎn).基于AJAX的數(shù)據(jù)分頁的設(shè)計(jì)與實(shí)現(xiàn)[J].成都信息工程學(xué)院學(xué)報(bào)，2008，2：191～194

[2]單東林.鋒利的jQuery[M].北京：人民郵電出版社，2009.

[3]辛剛，王清心.基于Ajax的Java Web應(yīng)用的研究與開發(fā)[J].山西電子技術(shù)，2010，1：57～58

Abstract: This paper firstly introduces the difference between AJAX and traditional page interaction , and then describes how to use AJAX to develop through a practical example of data query in detail.

Key words: AJAX; data query

Research and application of data query based on AJAX

Li Dong, Li Xiaoyong, Zhou Shuyi
Beijing university of technology, Beijing, 100124, China

2010-11-25

李冬，碩士。李小勇，助教。周恕義，教授，碩士研究生導(dǎo)師。