AJAX技術(shù)在WEB答題系統(tǒng)中的應(yīng)用與實現(xiàn)

侯錫銘,楊 揚,王曉磊

(1.河北工程技術(shù)高等?？茖W(xué)校,河北 滄州 061001;2.滄州醫(yī)學(xué)高等?？茖W(xué)校,河北 滄州 61001;3.燕山大學(xué)里仁學(xué)院,河北 秦皇島 066004)

AJAX(Asynchronous JavaScript and XML)是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的WEB開發(fā)技術(shù),自2005年提出以來,目前已經(jīng)成為WEB2.0核心技術(shù)之一。目前WEB應(yīng)用的發(fā)展方向已經(jīng)從功能性轉(zhuǎn)向良好的界面操控性,要求能為用戶提供更好的交互體驗。AJAX技術(shù)的誕生恰好解決了這一問題。它利用已有的技術(shù)創(chuàng)造了嶄新的使用方式,有效的改善了傳統(tǒng)WEB應(yīng)用的操控性和用戶的交互體驗,獲得了社會的廣泛認可。著名的 Google Maps(谷歌地圖),就是基于AJAX技術(shù)開發(fā)。

1 AJAX工作原理

傳統(tǒng)的WEB應(yīng)用是由許多連續(xù)的WEB頁面構(gòu)成,整個WEB程序根據(jù)功能要求被劃分成大量的WEB頁面,瀏覽器采用同步的方式進行數(shù)據(jù)交互,用戶進行的大部分的交互操作都需要切換并且刷新整個頁面,在下一個頁面完全顯示出來之前,用戶只能等待。

對于AJAX來說,它并不是從同步角度看待 WEB應(yīng)用。而是采用異步的方式(無需打斷用戶的操作,只在后臺進行)與服務(wù)器通信,從服務(wù)器獲取需要的數(shù)據(jù)后,只更新頁面中需要改變的區(qū)域內(nèi)容。AJAX應(yīng)用與傳統(tǒng)的WEB應(yīng)用的區(qū)別如下:

1)不刷新整個頁面,在頁面內(nèi)與服務(wù)器通信。

2)使用異步方式與服務(wù)器通信,不需要打斷用戶的操作,具有更加迅速的響應(yīng)能力。

3)程序僅由少量頁面組成。大部分交互在頁面之內(nèi)完成,不需要切換整個頁面。

AJAX與傳統(tǒng)WEB應(yīng)用運行機制對比如圖1如示。

具體執(zhí)行過程為,當(dāng)確定需要從服務(wù)器讀取新數(shù)據(jù)時首先通過 JavaScript和DOM操作頁面的 HTM L元素,取出指定區(qū)域信息字段構(gòu)造為 XML格式,然后調(diào)用XmlHttpRequest組件進行后臺發(fā)送;當(dāng)從服務(wù)器返回的數(shù)據(jù)時,同樣使用XmlHttpRequest進行信息獲取,解析XML文件后取出需要的內(nèi)容,通過 JavaScript和DOM將信息顯示在頁面的指定區(qū)域內(nèi),如有要求,還需要使用CSS進行樣式設(shè)置,如字體等。除了操作的WEB區(qū)域外,其余內(nèi)容保持不變并可以同時進行其他操作,比如在等待返回結(jié)果的同時在另一區(qū)域輸入信息。

圖1 AJAX與傳統(tǒng) WEB應(yīng)用運行機制

2 AJAX技術(shù)應(yīng)用

2.1 功能需求

傳統(tǒng)WEB答題系統(tǒng)操作較為繁瑣、頁面效果生硬。例如答完單獨某一道題后,如果想查看結(jié)果,只有等待頁面的全部刷新后方可顯示答案。為了不影響其余題目答題,通常采用單獨創(chuàng)建頁面的方式。在其中顯示答案信息。同時由于每次提交的都是全部頁面內(nèi)容,其中也包括很多HTM L代碼,圖片等。造成了帶寬和服務(wù)器資源的浪費?？紤]到如果出現(xiàn)題量大,考生多的情況,則服務(wù)器的大部分資源都在處理無效消息,容易出現(xiàn)訪問時間超時,影響答題過程。

采用 AJAX技術(shù)實現(xiàn)該系統(tǒng),可有效解決上述問題。AJAX技術(shù)主要用來實現(xiàn)前端WEB頁面的功能操作。在答題過程中,無需新建窗口或下載全部答案,當(dāng)考生在當(dāng)前頁面答題后,如果想查看結(jié)果,可以隨時點擊查看,無需等待;WEB頁面無需全部刷新。如果題量較大,可以在當(dāng)前頁面進行題目的分段顯示。同時可以修改答題視覺效果,比如在選擇答案正確后,改變題目背景或顏色,幫助考生理解。對于服務(wù)器來說,由于提交的信息量很小,反應(yīng)更加迅速。而目前廣泛使用的瀏覽器如IE,FIREFOX等都內(nèi)置支持 AJAX技術(shù),因此在 B/S模式的在線答題系統(tǒng)應(yīng)用 AJAX技術(shù)具有一定的必要性和可行性。

2.2 應(yīng)用實現(xiàn)

2.2.1 開發(fā)環(huán)境說明

開發(fā)工具 netbeans6.1、JDK1.6、開發(fā)平臺WINDOWS XP、數(shù)據(jù)庫:mysql5.0、MySql管理工具 SQLYog Enterprise v6.14、服務(wù)器 Tomcat6.0、WEB瀏覽器:IE8.0。 瀏覽器端采用 JavaScript語言實現(xiàn),服務(wù)器端使用 JAV A語言編程處理。

2.2.2 配置方法概述

首先需要安裝 JDK以及Netbeans,在Netbeans安裝包中已經(jīng)集成了 Glassfish和tomcat兩款服務(wù)器作為開發(fā)調(diào)試使用,安裝時只需要選擇運行時服務(wù)器為tomcat即可,無需再進行服務(wù)器配置。同時本系統(tǒng)統(tǒng)一采用GBK字符編碼,在安裝Mysql軟件時需要修改缺省字符編碼,選擇 GBK格式。由于MySql缺省是采用字符輸入界面,為便于數(shù)據(jù)操作,需要另安裝第三方界面管理工具 SQLYog,能夠幫助更直觀的操作數(shù)據(jù)庫。部分數(shù)據(jù)庫字典如表1所示。

表1 數(shù)據(jù)庫字典(部分)

2.2.3 瀏覽器端業(yè)務(wù)功能實現(xiàn)

瀏覽器端通過編寫 JavaScript腳本主要實現(xiàn)以下功能。

1)及時獲取考生選擇的結(jié)果,進行XM L封裝后發(fā)送到服務(wù)器。

2)收到服務(wù)器返回結(jié)果后進行XML解析,將結(jié)果顯示在相應(yīng)的W EB區(qū)域內(nèi)。

3)使用 DOM操作 HTML元素,封裝答題結(jié)果或答案,控制頁面信息的顯示方式。

4)驗證輸入有效性。

2.2.4 瀏覽器端實現(xiàn)接口軟件

使用SendRequest構(gòu)建 AJAX的前段實現(xiàn)框架。通過頁面中的事件響應(yīng)被調(diào)用,比如提交按鈕的點擊。調(diào)用XMLHttpRequest對象,構(gòu)造提交數(shù)據(jù)的XML文件。使用CreateXMLHttpRequest創(chuàng)建XMLHttpRequest對象,由于不同的瀏覽器(如 IE和Mozilla)的 API實現(xiàn)不同,需要對當(dāng)前所使用的的瀏覽器類型進行判斷方可創(chuàng)建。

使用XMLHttpRequest來設(shè)置數(shù)據(jù)提交的方式和地址,設(shè)置返回結(jié)果后的響應(yīng)函數(shù),設(shè)置HT TP報文頭數(shù)據(jù),發(fā)送數(shù)據(jù)。 ProcessResponse對服務(wù)器返回消息的進行判斷并調(diào)用相關(guān)的處理函數(shù);用 GetTheAns獲得用戶的選擇答案。使用Display解析XM L文件,獲得服務(wù)器返回的處理結(jié)果。同時使用DOM方式將結(jié)果顯示在WEB頁面中。

部分關(guān)鍵代碼如下:

2.2.5 服務(wù)器端實現(xiàn)

服務(wù)器端采用MVC設(shè)計理念,實現(xiàn)系統(tǒng)的后臺邏輯處理、業(yè)務(wù)處理功能以及流程控制功能。主要的java包文件說明如下:

stu.database負責(zé)對數(shù)據(jù)庫的進行讀取或修改操作;stu.persistence根據(jù)實際的對象屬性,建立相應(yīng)類模型;stu.tk實現(xiàn)答題系統(tǒng)的業(yè)務(wù)處理,如單選題,多選題,簡答題,等等。

業(yè)務(wù)處理主要功能如下:

1)對提交的XML文件進行解析獲取用戶提交的有效數(shù)據(jù);

2)對不同的題型進行相應(yīng)的判斷處理;

3)將處理結(jié)果構(gòu)造為XML文件返回至瀏覽器端。

2.2.6 服務(wù)器端實現(xiàn)接口軟件

ListType列出指定類型題目的總記錄;GetRightAns得到指定題目的正確答案。

部分關(guān)鍵代碼如下:

3 測試案例

圖2所示為物理診斷在線答題系統(tǒng)試題模擬練習(xí)頁面。在進行單選題練習(xí)時學(xué)生提交所選結(jié)果后系統(tǒng)會給出選擇正確與否以及相應(yīng)表情,對于不確定答案的問題可以直接點擊“查看正確答案按鈕”獲得正確答案。所有的操作均在當(dāng)前頁面進行,無需刷新和切換。與以往數(shù)據(jù)交互需重復(fù)刷新頁面相比操作更加方便快捷,更接近實際答題效果。目前,該系統(tǒng)應(yīng)用于滄州醫(yī)學(xué)高等?？茖W(xué)校臨床診斷教研室,為物理診斷課程提供日常的教學(xué)考試應(yīng)用,系統(tǒng)性能穩(wěn)定。

圖2 物理診斷在線答題系統(tǒng)模擬練習(xí)

4 結(jié)束語

通過在 B/S答題系統(tǒng)中應(yīng)用 AJAX技術(shù),用戶操作起來更加方便,同時在一定程度上減輕了系統(tǒng)負擔(dān),節(jié)約了系統(tǒng)資源。隨著信息技術(shù)的發(fā)展,WEB開發(fā)已經(jīng)不能僅僅局限于單純業(yè)務(wù)功能的實現(xiàn)。目前WEB前段技術(shù)的發(fā)展方向是改善用戶的體驗感,而且 AJAX技術(shù)已經(jīng)進入相對成熟的階段,出現(xiàn)了一大批基于該技術(shù)實現(xiàn)的框架。隨著 AJAX技術(shù)的不斷深入發(fā)展,會給使用者創(chuàng)造更加豐富的WEB應(yīng)用。

[1]克拉恩,帕斯卡雷洛,杰姆斯.AJAX實戰(zhàn) [M].ajaxcm.org,譯.北京:人民出版社,2006.

[2][美 ]Shelley Powers.Adding AJAX[M].李秀忠,譯.北京:電子工業(yè)出版社,2008.

[3][美 ]馬勞克林.深入淺出 AJAX[M].OReiuy Taiwan公司,編譯.南京:東南大學(xué)出版社,2008.