基于Ajax富客戶端技術(shù)在線考試系統(tǒng)的設(shè)計與實現(xiàn)

朱運喬

（湖北職業(yè)技術(shù)學院信息技術(shù)學院，湖北孝感432000）

0 引言

隨著網(wǎng)絡(luò)的高速發(fā)展，網(wǎng)絡(luò)的應(yīng)用已經(jīng)深入到各行各業(yè)。在各類網(wǎng)絡(luò)應(yīng)用中，網(wǎng)絡(luò)在線考試因其使得考試成本降低，節(jié)約資源而且環(huán)保，同時它具有公正、準確、靈活等特點，所以，網(wǎng)絡(luò)在線考試早已成為一種常見考試方式被各種考試機構(gòu)和教育行業(yè)所接受。

目前市面上的或正在使用的考試系統(tǒng)所使用的體系架構(gòu)無非有兩種：B/S架構(gòu)和C/S架構(gòu)。從開發(fā)成本和可維護性等多方面考慮，B/S架構(gòu)可以說目前的主流的系統(tǒng)架構(gòu)。但是B/S架構(gòu)是基于瀏覽器的Web應(yīng)用，也有著先天不足，體驗感相比C/S架構(gòu)差，存在頁面刷新的問題。而Ajax技術(shù)可以實現(xiàn)頁面的無刷新顯示和異步數(shù)據(jù)傳輸功能，Ajax技術(shù)的出現(xiàn)，有效彌補了傳統(tǒng)WEB應(yīng)用程序的不足。

為此，在筆者最近主持設(shè)計并開發(fā)的網(wǎng)絡(luò)在線考試系統(tǒng)中，運用了微軟力推的ASP.NET MVC系統(tǒng)架構(gòu)，并使用了該架構(gòu)中集成進來的Ajax功能，系統(tǒng)完成后，得到了更好的完全不同的用戶體驗。

1 系統(tǒng)關(guān)鍵技術(shù)介紹

1.1 Ajax及其基本原理

Ajax的全稱是Asynchronous+JavaScript+XML，是綜合了Java技術(shù)、XML以及JavaScript等編程技術(shù)，可以讓開發(fā)人員構(gòu)建基于Javascript技術(shù)的Web應(yīng)用，并打破了使用頁面重載的慣例。

利用Ajax技術(shù)能實現(xiàn)瀏覽器與服務(wù)器的異步傳輸。異步這個詞是指Ajax應(yīng)用軟件與主機服務(wù)器進行聯(lián)系的方式。如果使用舊模式，每當用戶執(zhí)行某種操作、向服務(wù)器請求獲得新數(shù)據(jù)，Web瀏覽器就會更新當前窗口。 如果使用Ajax的異步模式，瀏覽器就不必等用戶請求操作，也不必更新整個窗口就可以顯示新獲取的數(shù)據(jù)。只要來回傳送采用XML格式的數(shù)據(jù)，在瀏覽器里面運行的JavaScript代碼就可以與服務(wù)器進行聯(lián)系。JavaScript代碼還可以把樣式表加到檢索到的數(shù)據(jù)上，然后在現(xiàn)有網(wǎng)頁的某個部分加以顯示。

1.2 ASP.NET MVC 框架

ASP.NET MVC是微軟官方提供的以MVC模式為基礎(chǔ)的ASP.NET Web應(yīng)用程序(Web Application)框架，它將內(nèi)容顯示（UI或者View）、業(yè)務(wù)邏輯和后臺數(shù)據(jù)進行了清晰分離，可以說是MVC在ASP.NET中的實現(xiàn)。

在傳統(tǒng)模式下，一個用戶請求的url將對應(yīng)一個aspx文件，而在ASP.NET MVC下，一個用戶請求對應(yīng)某個控制器類中的一個方法，而這個方法，就叫做一個Action。在ASP.NET MVC框架下，控制器(Controller)是框架的控制中心，它將處理一切請求，并處理所有頁面轉(zhuǎn)發(fā)等表示邏輯，這也是使用了ASP.NET MVC后與傳統(tǒng)ASP.NET應(yīng)用最大的差別。

ASP.NET MVC主要工作原理為，控制器類下的Action方法接受用戶請求，調(diào)用Model下的業(yè)務(wù)邏輯組件，實現(xiàn)數(shù)據(jù)的處理，然后在Views組件下選擇指定的視圖模板呈現(xiàn)數(shù)據(jù)。

2 系統(tǒng)總體設(shè)計

2.1 功能模塊及層次結(jié)構(gòu)

本系統(tǒng)主要包括以下功能模塊：試卷生成、在線考試、計時限時、試卷評閱、考場監(jiān)控、考試設(shè)置、題庫管理、統(tǒng)計與分析等?？傮w功能結(jié)構(gòu)可用如圖1表示：

總體上在線系統(tǒng)功能模塊分成兩類：學生子系統(tǒng)和教師子系統(tǒng)。學生端功能分析：

（1）學生登錄證驗成功后，可以根據(jù)預定策略生成試卷、通過瀏覽器呈現(xiàn)試卷；

（2）可以限時計時、在線作答、提交試卷；

（3）提交答案后試卷查看、答案對照、成績顯示。

圖1 總體功能結(jié)構(gòu)圖

教師端功能分析：

（1）教師通過驗證后，可以進行實時監(jiān)控考場、強制收卷、延時、統(tǒng)計分析成績、備份等操作；

（2）還要能下達考試指令、決定題套類型（隨機題套還是固定題套）；

（3）組織和維護題庫等。

2.2 數(shù)據(jù)庫設(shè)計

通過對系統(tǒng)整體分析，在數(shù)據(jù)庫中共添加了以下七個表。

考生情況表，包括當前考生情況，如學號，姓名，開考時間，是否交卷，是否批閱，考試成績等。

題庫表，保存所有題目信息，包括題目號，題套號，題型，題目內(nèi)容，題目標答。

題套表，保存所有固定題套信息，包括題套編號，題套名。

考試表，包括當前全部考生的學號，每名考生的抽取的所有題目題號，考生對每道題所填的答案等。

用戶表，包括學號和姓名等信息。

管理表，包括管理帳號和密碼，固定題套號，隨機抽題數(shù)，是否開考等管理信息。

歷史記錄表，記錄考以往考試的題套和成績情況，以供查閱和統(tǒng)計。

3 功能實現(xiàn)

3.1 系統(tǒng)整體架構(gòu)

整個系統(tǒng)采用ASP.NET MVC系統(tǒng)架構(gòu)，共有三個主要控制器：系 統(tǒng)入口控 制 器 （Home）、 學 生 控 制器 （Student）、 教 師 控 制器（Teacher）。

系統(tǒng)入口控制器（Home），系統(tǒng)初始入口，要完成的任務(wù)比較簡單，只是呈現(xiàn)統(tǒng)系的登錄視圖并跳轉(zhuǎn)到不同的客戶端；

學生控制器（Student），完成上述要求的學生端的全部功能，要求提供的主要視圖為答題視圖；

教師控制器（Teacher），完成上述要求的教師端的全部功能，要求提供的主要視圖為考場管理視圖、考試設(shè)置視圖、題庫管理視圖、統(tǒng)計分析視圖；

模型（Model），分別包含業(yè)務(wù)處理模塊和DAO模塊，接受控制器的業(yè)務(wù)功能請求和數(shù)據(jù)處理操作，并將數(shù)據(jù)處理結(jié)果提交物理數(shù)據(jù)庫。

3.2 Ajax技術(shù)在本系統(tǒng)中的應(yīng)用和實現(xiàn)

為了使用系統(tǒng)達到更好的體驗效果，筆者在實現(xiàn)系統(tǒng)功能時，應(yīng)用到了ASP.NET MVC框架下集成的Ajax的函數(shù)庫。

下面主要提供在學生客戶端在線答題視圖頁面中利用Ajax技術(shù)實現(xiàn)的主要功能。

3.2.1 計時

為使答題過程確保計時準確性，計時須跟服務(wù)器同步，為此必須在后臺服務(wù)器獲取并反映到客戶端，為避免更新時間而頻繁刷新頁面，自動更新時間時采用了Ajax技術(shù)，以下為計時實現(xiàn)方法。

var fn=function(){

$.Ajax({type:"POST",

url:"/Student/Remain/",

data:{xh:$("#xhpanel").text()},

datatype:"xml",

success:function(resultXml){

var msg=$("msg",resultXml).text();

var finish=$("finish",resultXml).text();

if(msg=="0"||finish=="yes")$("#remain").html("時間結(jié)束。");

else$("#remain").html(msg);

}

});

if($("#remain").html()=="時間結(jié)束。"){

$("#submitbutton").attr("disabled",true);

$("form[action$='Paper']").submit();

clearTimeout(id);

}

}

id=setInterval(fn,1000);

利用后臺Student控制器Remain方法返回時間和相關(guān)信息。

3.2.2 答題

因為在選擇答題時每答一題，提交一題。為避免頻繁提交帶到的頻繁頁面刷新，每道題目的提交都采用了Ajax技術(shù)，下面分別是客戶端試卷單選和多選題選項操作的響應(yīng)代碼。

單選題選項操作響應(yīng)代碼：

$("input[@type='radio']").click(function(){

$.Ajax({type:"POST",

url:"/Student/Answer/",

data:{xh:$("#xhpanel").html(),th:$(this).attr("name"),dt:$(this).attr("value")}

});

});

多選題選項操作響應(yīng)代碼：

$("input[@type='checkbox']").click(function(){

var name=$(this).attr("name");

var str="";

$("input[@name='"+name+"'][checked]").each(function(){str+=$(this).attr("value");});

$.Ajax({type:"POST",

url:"/Student/Answer/",

data:{xh:$("#xhpanel").html(),th:name,dt:str}

});

});

后臺接受Ajax異步數(shù)據(jù)請求利用Student控制器的Answer方法處理答題信息，更新數(shù)據(jù)表。至此，學生端的一次答題操作引起的異步請求得以完成，并且答題全程中只需一個視圖，根本不刷新頁面。

3.2.3 交卷

交卷操作直接在當前頁面全部答題結(jié)果和成績，停止計時，而不用刷新全部頁面。

$("form[action$='FinishPaper']").submit(function(){

$.Ajax({type:"POST",url:$(this).attr("action"),

data:{xh:$("input[@name='xh'][type='hidden']").attr("value")},

datatype:"xml",

success:function(resultXml){

fn=null;

var mypaper=$("mypaper",resultXml).text();

var score=$("score",resultXml).text();

$("#paper").html(mypaper);

$("#score").html(score);

}

});

return false;

});

});

然后由后臺Student控制器的FinishPaper方法返回做好的答題結(jié)果及成績。

由以上展示例子可以看出，采用了Ajax技術(shù)后，只需要為數(shù)不多的視圖，就可以實現(xiàn)大量傳統(tǒng)頁面才可完成的顯示，且避免了頁面刷新而引起的不便，接近桌面應(yīng)用的的體驗效果。本系統(tǒng)在教師端大部分視圖也使用了Ajax功能，限于篇幅，不一一展示。

4 結(jié)束語

本系統(tǒng)在整體上采用了微軟最新的ASP.NETMVC框架，使得該系統(tǒng)結(jié)構(gòu)清晰，具有極好的可維護性和擴展性。最重要的是在系統(tǒng)的客戶端大量應(yīng)用了Ajax技術(shù)實現(xiàn)相關(guān)功能，一方面減輕了服務(wù)器的負擔，避免了每次請求數(shù)據(jù)時的頁面刷新，為用戶提供更為流暢的操作界面和全新的用戶體驗，展示了Ajax技術(shù)在Web應(yīng)用程序開發(fā)上的優(yōu)越性。

［1］任華,鄒承俊,尹華國.基于ASP.NETAJAX的在線購物系統(tǒng)的設(shè)計與實現(xiàn)[J].計算機與數(shù)字工程，2013，41（09）:1514-1516.

［2］汪亞菲.基于MVC模型的Web數(shù)據(jù)庫應(yīng)用編程研究[J].中國電子商務(wù)，2010，02:92-93.

［3］夏小云，汪峰.基于AJAX技術(shù)的電子商務(wù)系統(tǒng)研究及應(yīng)用[J].商場現(xiàn)代化，2008(32)：136-137.

［4］費嘉祺.基于B／S模式的客戶關(guān)系管理系統(tǒng)的設(shè)計與實現(xiàn)[D].西安電子科技大學，2012.

［5］陳鋒敏.Ajax 原理與系統(tǒng)開發(fā)[M].清華大學出版社，2009：63-64.