基于Ajax的在線考試系統開發

【摘要】本文分析了Ajax 技術的工作原理及實現方式，在開發過程結合JSON 數據傳輸格式和jQuery 技術，使Ajax 實現Web系統開發變得更容易、更有效率。

【關鍵詞】Ajax設計模式；jQuery；JSON

1.Ajax設計模式及其工作原理

在傳統的網頁模式下數據需要更新時大多是在服務器端將信息更新后再將數據返回客戶端的瀏覽器，當瀏覽器得到更新的請求時才會將整體網頁內容更新。AJAX是一種用于創建快速動態網頁的技術。通過在后臺與服務器進行少量數據交換，AJAX可以使網頁實現異步更新。與傳統的Web工作模式不同，Ajax工作模式在瀏覽器與Web服務器之間加了一個Ajax引擎，通過調用JavaScript對象的XML HttpRequest請求與后臺服務器進行數據信息的交互，在后臺服務器進行邏輯運算后再通過異步傳輸機制將已經部分更新HTML的頁面內容發送給用戶瀏覽器這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新[1]。在創建網頁時，客戶端瀏覽器發送屏幕更新請求，Ajax技術將為其提供很大的靈活性，增強其交互性。

2.JSON數據格式

JSON 是一個輕量級的數據交換負載格式。它基于JavaScript語言的一個子集，提供了一種具有嵌套數據元素的結構。JSON格式定義簡單，通過一組鍵值對定義一個對象，可以和JAVA中的Map類很好地對應，簡化了JSON 在JAVA 環境下的處理。在JavaScript中，可以直接將這種格式的數據賦值給一個變量，然后通過鍵名取值。基本格式如下，對象是屬性、值對的集合，一個對象的開始于“{”， 結束于“}”， 每一個屬性名和值間用“：”提示，屬性間用“，”分隔。

3.Ajax在在線考試系統中的應用

使用Ajax 技術，可以從服務器獲取數據信息，只需要動態加載用戶檢測對話框就能很快地和遠程服務器進行數據交互，不會影響當前瀏覽的頁面，且服務器響應速度也很快。首先實現動態加載就必須要先實現異步通信，為此需要初始化一個XML HttpRequest對象承擔對服務器發送請求的任務，再由客戶端Ajax引擎來接收并處理解析服務器返回的響應數據，最后呈現到瀏覽器的視圖。

（1）用戶登錄

該在線考試系統的管理界面使用jQuery設計，它是輕量級的js庫兼容CSS3，還兼容各種瀏覽器。jQuery極大地簡化了JSP開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax的操作。利用jQuery豐富的函數庫，可以減少代碼的重復編寫及DOM腳本庫的調用，而只關注程序邏輯的實現，利用盡可能少的代碼實現想要實現的功能。該界面html代碼較少，大部門代碼都是動態生成。該方式改變了以往要設計大量的html界面代碼，一個管理界面可以讓不同類型用戶共同使用。用戶登錄時觸發AJAX應用的事件主要是登錄按扭的click事件。連接數據庫獲取操作碼，再從Jsonobject查找到對應的操作內容。

用戶登錄時元數據加載流程如圖1所示。

（2）生成導航欄

傳統的導航欄是直接寫在html里的，當導航欄的內容足夠多時，修改很麻煩，在我們開發的在線考試系統中，導航欄是放在數據庫的。ajax從后臺取數據，用json作為數據傳遞格式，json配合jQuery可以輕松的生成導航欄。

4.結束語

文中分析了Ajax 技術的工作原理及實現方式，并利用Ajax 技術在在線考試系統中實現了動態加載。Ajax通過異步交互技術，不但提高了網頁的連續性，而且還加快了Web的響應速度。在開發過程結合JSON 數據傳輸格式和jQuery 技術，使Ajax 實現Web系統開發變得更容易、更有效率。

參考文獻

[1]辛剛，王清心.基于Ajax 的Java Web 應用的研究與開發[J].山西電子技術，2010（1）：57-58.

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