基于AJAX數據查詢的研究與應用

李 冬 李小勇 周恕義

北京工業大學 北京 100124

基于AJAX數據查詢的研究與應用

李 冬 李小勇 周恕義

北京工業大學 北京 100124

介紹了AJAX相對于傳統的頁面交互的不同之處，然后以數據查詢為實際例子，詳細地描述了如何使用AJAX來進行開發。

AJAX；數據查詢

傳統的Web應用，是由用戶端向Web服務器發送一個請求。服務器接收并處理傳來的請求，然后送回一個新的網頁。這個做法浪費了許多帶寬，因為在前后兩個頁面中的大部分HTML代碼往往是相同的。由于每次交互都需要向服務器發送請求，這導致了用戶界面的響應時間變得很慢。

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

圖1 傳統頁面交互和AJAX頁面交互的區別

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

1 AJAX相關技術

1.1 jQuery

jQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTML Documents，Events，實現動畫效果，并且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇，本文的AJAX技術也是基于jQuery的。

1.2 JSON

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

2 基于AJAX的數據查詢實例

2.1 數據查詢的需求

下面就來分析一個實例，看看相對于傳統的刷新界面的模式，AJAX在數據查詢過程中會給我們帶來怎樣的驚喜。

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

對于組合查詢，如圖2所示，上面的5行是查詢條件，可以任意組合。組合查詢條件的選擇是通過JavaScript和css結合實現的，點擊某個條件，有色塊的表示該條件被選中；再點擊一次，則會復原。這樣就會帶來一個問題：如果使用傳統的頁面刷新的方法，則跳轉頁面后條件欄的所有條件都會被改回初始狀態，由于查詢條件眾多會造成用戶查詢后忘了自己是用什么查詢條件查詢的，這樣就不符合用戶的使用習慣了。當然，我們可以在后臺保留查詢條件，在頁面跳轉的時候再把這些條件以適當的形式傳到前臺來，再用JavaScript來進行初始化。這種做法理論上來說是可以實現的，但是無疑工作量是巨大的。相比之下，如果我們用AJAX的方法來實現，開發起來會輕松很多，且和用戶的交互性會更加友好。

對于快速查詢，如圖3所示，由3個下拉框組成，先選擇教學樓，動態生成樓層列表，再根據教學樓和樓層動態生成滿足條件的教室列表，選擇教室后就可以查詢了。當然快速查詢的查詢結果只可能有1條。這種動態下拉框的生成也是典型的AJAX應用，若用傳統的頁面刷新方式會復雜的多。

2.2 利用AJAX解決問題

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

2.2.1 AJAX查詢

組合查詢和快速查詢共用1個查詢按鈕，根據當前Tab界面的選中情況來執行相應的查詢。

點擊查詢按鈕后，A J A X將查詢條件傳至后臺，后臺查詢數據庫后，再用J S O N格式將查詢結果進行封裝傳至前臺。處理函數首先調用CombineSelectDraw(data)函數對表格進行重新繪制，然后需要將查詢條件保存在本頁的隱藏標簽里，這是為了分頁時調用。

2.2.2 AJAX分頁

分頁僅針對組合查詢，因為快速查詢僅返回1條結果，不涉及分頁。如圖2所示，切換每頁記錄數、首頁、上頁、下頁、尾頁和跳轉到某頁需要用到分頁，但它們的原理都是一樣的，都是根據現有條件的AJAX的查詢，只不過頁面大小和跳轉到第幾頁這兩個參數不同而已。

以圖2中的條件為例，如果需要跳轉到下一頁，分頁的AJAX需要向后臺傳遞以下參數：

之后的流程同查詢一樣，后臺接收到這些參數后執行查詢，然后將查詢結果傳至前臺，再次調用CombineSelectDraw(data)函數對表格進行重新繪制就可以實現分頁AJAX了。

3 使用AJAX的優點與缺點

通過以上介紹，我們知道使用AJAX會給我們帶來不少幫助，它的優點主要有以下幾點：

(1)由于交互的數據量大大減少，減輕服務器的負擔。

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

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

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

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

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

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

4 結束語

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

[1]李卿，樓新遠.基于AJAX的數據分頁的設計與實現[J].成都信息工程學院學報，2008，2：191～194

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

[3]辛剛，王清心.基于Ajax的Java Web應用的研究與開發[J].山西電子技術，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

李冬，碩士。李小勇，助教。周恕義，教授，碩士研究生導師。