基于Ajax的在線考試系統(tǒng)開發(fā)

【摘要】本文分析了Ajax 技術(shù)的工作原理及實(shí)現(xiàn)方式，在開發(fā)過程結(jié)合JSON 數(shù)據(jù)傳輸格式和jQuery 技術(shù)，使Ajax 實(shí)現(xiàn)Web系統(tǒng)開發(fā)變得更容易、更有效率。

【關(guān)鍵詞】Ajax設(shè)計(jì)模式；jQuery；JSON

1.Ajax設(shè)計(jì)模式及其工作原理

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

2.JSON數(shù)據(jù)格式

JSON 是一個(gè)輕量級(jí)的數(shù)據(jù)交換負(fù)載格式。它基于JavaScript語言的一個(gè)子集，提供了一種具有嵌套數(shù)據(jù)元素的結(jié)構(gòu)。JSON格式定義簡單，通過一組鍵值對(duì)定義一個(gè)對(duì)象，可以和JAVA中的Map類很好地對(duì)應(yīng)，簡化了JSON 在JAVA 環(huán)境下的處理。在JavaScript中，可以直接將這種格式的數(shù)據(jù)賦值給一個(gè)變量，然后通過鍵名取值?；靖袷饺缦拢瑢?duì)象是屬性、值對(duì)的集合，一個(gè)對(duì)象的開始于“{”， 結(jié)束于“}”， 每一個(gè)屬性名和值間用“：”提示，屬性間用“，”分隔。

3.Ajax在在線考試系統(tǒng)中的應(yīng)用

使用Ajax 技術(shù)，可以從服務(wù)器獲取數(shù)據(jù)信息，只需要?jiǎng)討B(tài)加載用戶檢測(cè)對(duì)話框就能很快地和遠(yuǎn)程服務(wù)器進(jìn)行數(shù)據(jù)交互，不會(huì)影響當(dāng)前瀏覽的頁面，且服務(wù)器響應(yīng)速度也很快。首先實(shí)現(xiàn)動(dòng)態(tài)加載就必須要先實(shí)現(xiàn)異步通信，為此需要初始化一個(gè)XML HttpRequest對(duì)象承擔(dān)對(duì)服務(wù)器發(fā)送請(qǐng)求的任務(wù)，再由客戶端Ajax引擎來接收并處理解析服務(wù)器返回的響應(yīng)數(shù)據(jù)，最后呈現(xiàn)到瀏覽器的視圖。

（1）用戶登錄

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

用戶登錄時(shí)元數(shù)據(jù)加載流程如圖1所示。

（2）生成導(dǎo)航欄

傳統(tǒng)的導(dǎo)航欄是直接寫在html里的，當(dāng)導(dǎo)航欄的內(nèi)容足夠多時(shí)，修改很麻煩，在我們開發(fā)的在線考試系統(tǒng)中，導(dǎo)航欄是放在數(shù)據(jù)庫的。ajax從后臺(tái)取數(shù)據(jù)，用json作為數(shù)據(jù)傳遞格式，json配合jQuery可以輕松的生成導(dǎo)航欄。

4.結(jié)束語

文中分析了Ajax 技術(shù)的工作原理及實(shí)現(xiàn)方式，并利用Ajax 技術(shù)在在線考試系統(tǒng)中實(shí)現(xiàn)了動(dòng)態(tài)加載。Ajax通過異步交互技術(shù)，不但提高了網(wǎng)頁的連續(xù)性，而且還加快了Web的響應(yīng)速度。在開發(fā)過程結(jié)合JSON 數(shù)據(jù)傳輸格式和jQuery 技術(shù)，使Ajax 實(shí)現(xiàn)Web系統(tǒng)開發(fā)變得更容易、更有效率。

參考文獻(xiàn)

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

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