ＡＪＡＸ在在線考試系統中的應用

摘要：AJAX使客戶端能在后臺訪問服務器并可按需求取回數據，從而避免了整個頁面的刷新。這為交互較多、頻繁讀數據的在線考試系統提供了一個很好的解決方案。

關鍵詞：AJAX；XMLHTTPRequest；DOM；XML；在線考試系統

中圖分類號：TP393文獻標識碼：A文章編號：1009-3044(2008)17-21428-03

1 引言

在線考試系統[1]使得考試既可以在本地進行，也可以在異地進行，大大拓展了考試的靈活性；試卷可以根據題庫中的內容即時生成，可避免考試前的押題；而且可以采用大量標準化試題，從而使用計算機自動閱卷，大大提高閱卷效率；還可以直接把成績送到數據庫中，進行統計、排序等操作。所以現在較好的考試方法為在線考試，試題內容放在服務器上，考生通過準考證號碼和口令進行登錄，考試答案也存放在服務器中，這樣考試的公平性、答案的安全性可以得到有效的保證。

不過目前的在線考試系統大多是同步的請求/響應系統，存在一些不足：

(1)在網速較慢或者數據量較大時，都會出現白屏的情況，甚至會出現該頁無法顯示；

(2)數據提交可能存在不安全的隱患，如一頁中有多個選擇題，考生未進行答案提交，此時一旦發生意外就會丟失數據。同時，考生進行答案提交時會出現頁面重載；

(3)考試已使用時間如果無法及時保存，就有可能出現計時不準確的情況。

AJAX(Asynchronous JavaScript and XML)[2]是Web2.0的核心技術之一。AJAX技術將傳統的動態網頁技術被隱藏到了AJAX的后臺，用戶所看到的是一個靜態頁面，動態程序反饋的結果被直接無刷新地顯示在這個頁面上。正是這一技術能為用戶帶來富客戶端體驗，現在越來越的人開始使用AJAX技術來開發web應用。

本文利用AJAX技術改進了單位課程在線考試系統中存在的不足，實現了頁面無刷新的試題顯示、答案提交、考試計時和答案實時保存。

2 AJAX技術

與傳統的Web應用不同，AJAX在用戶與服務器之間引入一個中間層AJAX引擎，使用戶操作與服務器響應異步化，見圖1。這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節約的空間及帶寬租用成本的目的。用戶的瀏覽器在執行任務時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫，通常藏在一個隱藏的框架中，它負責編譯用戶界面及與服務器的交互。AJAX引擎允許用戶與應用軟件之間的交互過程異步進行，獨立于用戶與網絡服務器間的交流。可以用Javascript調用AJAX引擎來代替產生一個HTTP的用戶動作，內存中的數據編輯、頁面導航和數據校驗這些不需要重新載入整個頁面的需求可以交給AJAX來執行。

AJAX不是一門新的語言或技術，它實際上是幾項技術的整合，在共同的協作中發揮各自的作用，它包括：Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中，使用XHTML和CSS標準化呈現，使用DOM實現動態顯示和交互，使用XML和XSTL進行數據交換與處理，使用XMLHttpRequest對象進行異步數據讀取，使用Javascript綁定和處理所有數據。

AJAX 使用的主要技術如下：

2.1 XMLHttpRequest

在AJAX引擎的幾項技術中，XMLHttpRequest是最核心的技術，它可以實現向服務器發送請求并接受返回數據的整個過程，是實現異步交互的關鍵所在。在使用XMLHttpRequest發送請求和處理響應之前，首先須用Javascript創建一個XMLHttpRequest對象。當用戶觸發一個請求后，XMLHttpRequest的open()方法會建立對服務器的調用并指定http請求，其中參數url指定了所訪問的服務器頁面，method指定了向服務器傳遞數據的方式。然后send()方法把請求發送到指定的目標資源。服務器處理完成后，返回的數據存儲在XMLHttpRequest的ResponseText或ResponseXML屬性中，Javascript函數即可通過調用這兩個屬性動態更新頁面。從創建XMLHttpRequest到響應處理的整個過程都在后臺運行，用戶不會意識到這個后臺過程，通常會在頁面繼續操作。這就相當于一個簡單的多線程，一方面是XMLHttpRequest在后臺的處理，另一方面用戶還可在頁面進行其他操作。

2.2 JavaScript

JavaScript是一在瀏覽器中廣為使用的編程語言，能夠客戶端動態更新網頁內容。在AJAX中，JavaScript是XMLHttpRequest和DOM間的橋梁，利用XMLHttpRequest的屬性值更新本地的頁面的DOM對象。

2.3 XML(eXtensible Markup Language)

XML與HTML類似，它也是一種使用標簽的標記語言，不過用途與HTML不同。HTML用于以人可直接閱讀的格式顯示數據，XML旨在用來描述、存儲和交換數據。

2.4 DOM(Document Object Model)

DOM是給HTML和XML文件使用的一組API。它提供了文件的結構表述，讓你可以改變其中的容及可見物。其本質是建立網頁與程序語言溝通的橋梁。所有Web開發人員可操作及建立文件的屬性、方法及事件都以對象來展現(例如，document對象就代表文件本身這個對象，table對象則代表HTML的表格對象等等)。這些對象可以由當今大多數的瀏覽器以Script來取用。一個用HTML或XHTML構建的網頁也可以看作是一組結構化的數據，這些數據被封在DOM中，DOM提供了網頁中各個對象的讀寫的支持。

3 AJAX在線考試系統中的應用

本文介紹如何在在線考試平臺中使用AJAX技術。系統采用目前成熟的三層B/S體系結構，采用IE+AJAX+ASP+IIS+SQL Server技術實現。

3.1 系統體系結構

在這三層結構中，包括表示層、業務邏輯層、數據層。表示層提供用戶與系統的友好交互；業務邏輯層是上下兩層的紐帶，進行具體的運算和數據處理；數據層負責數據存儲、訪問和優化。三層B/S結構的考試系統體系結構如圖2所示：

(1)表示層：考生通過客戶端瀏覽器接受Web服務器送來的試卷(XML格式)，當考試結束后，將答題信息以XML形式發給業務邏輯層的Web服務器。通過在網頁中嵌入數據源對象(DataSourceObject，DSO)來顯示查詢結果，只需把DATASRC屬性的值指定為XML文檔對象的名字，并把DATAFLD屬性的值指定為XML元素的要綁定的列名即可。這樣就可把XML元素的數據內容與HTML元素聯系起來，在瀏覽器中顯示服務器傳送過來的、構造良好的XML數據。

(2)業務邏輯層：從客戶端傳送來的考生試卷，通過業務邏輯層的Web服務器進行評卷、統計分析等，并將結果返回客戶機。另外，還要完成從數據庫服務器中抽取考試試卷的功能。

(3)數據層：完成數據庫的存取與管理。Microsoft SQL Server 2000增強了OLEDB，使XML文檔可以被設置為命令文本并以流的形式返回結果集。ADO2.5以后的版本提供了生成XML數據的功能。通過將ADODB.Command的屬性“OutputStream”設置為Response和“XMLRoot”根節點元素，并設置Response.ContentType為“text/xml”，來規定執行結果以流的形式返回。

3.2 系統中AJAX的應用

考試系統包括以下幾個子系統：考試子系統、閱卷子系統、查詢子系統、維護子系統。

限于篇幅，本文只介紹AJAX在考試子系統中的應用。下面介紹考試子系統中頁面無刷新的試題呈現、答案提交、考試計時和答案實時保存的AJAX實現。

3.2.1 試題顯示和答案提交

試題顯示模塊的設計思想是獲取試題num，就顯示試題num，讓考生感受不到延遲。

數據請求模塊的Javascript代碼如下：

function do_request(num， action， answer){

http_request = 1;

if(window.ActiveObject){

http_request = new ActiveXObject(\"Microsoft.XMLHTTP\");

else if(window.XMLHttpRequest){

http_request = new XMLHttpRequest;}

http_request.onreadystatechange = response_handle;//服務器響應處理函數

if(action=='show_paper') // 顯示試題內容

http_request.open('GET'，'paper.asp?id='+ num， true);

if(action=='submit_answer') // 提交答案

http_request.open('GET'，'submit_answer.asp?id='+ num + 'answer='+answer， true);

if(action=='time_count') // 計時

http_request.open('GET'， 'time_count.asp?id='+ num， true);

http_request.send(1);}

其中服務器響應處理函數代碼如下:

function response_handle(){

if (http_request.readyState == 4){

if (http_request.status == 200){

var xmldoc = http_request.responseXML; // 獲取返回的試題內容

var node_list = xmldoc.getElementsByTagName('item');

for (var i=0; i

var id = node_list.item(i).attributes.getNamedItem('id').value;

//get_request_value一個獲取查詢字符串鍵值的自定義函數

//make_content一個通過節點生成試題和答案選項的自定義函數

if(id = get_request_value(\"id\")){

document.all.items.innerHTML

+=make_content(node_list.item(i);

}}}}}

試題顯示采用do_request(num，'show_paper ') ，其中num是題號，通過show_paper.asp將試題num的內容顯示。與試題顯示模塊處理相似，答案提交采用do_request(num，'submit_answer'，answer)，其中num是題號，answer是此題答題結果，通過submit_answer.asp將結果提交到數據庫中。

3.2.2 考試計時和答案實時保存

系統采用 DHTML 提供的計時器來完成考試計時和答案實時保存。

計時方案：window.setInterval('time_count'，1000); // 一秒鐘一次

function time_count(){do_request(student_num，'time_count');}

//student_num 是當前學生學號

答案實時保存方案：window.setInterval('save_answer_auto'，5000); //五秒鐘一次

function save_answer_auto()

{ for each(ans in answers) {do_request(ans.id，'submit_answer');}}

//其中ans是答案集合中的元素。

4 結論

本文使用AJAX技術實現了在線考試系統中頁面無刷新的試題顯示、答案提交、考試計時和答案實時保存。通過實際使用改進后在線考試平臺，考生基本感覺不到頁面刷新，系統計時準確，答案實時保存效果好。

參考文獻：

[1] 楊春明， 廖競. Web方式下通用考試系統的設計與實現[M]. 計算機與現代化， 2004，1:11-13.

[2] 克拉恩，帕斯卡雷洛，杰姆斯（英）. ajaxcn.org 譯. Ajax in action（中文版）[M]. 北京：人民郵電出版社，2006.

注：本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文