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

朱運(yùn)喬

（湖北職業(yè)技術(shù)學(xué)院信息技術(shù)學(xué)院，湖北孝感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)保，同時(shí)它具有公正、準(zhǔn)確、靈活等特點(diǎn)，所以，網(wǎng)絡(luò)在線考試早已成為一種常見考試方式被各種考試機(jī)構(gòu)和教育行業(yè)所接受。

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

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

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

1.2 ASP.NET MVC 框架

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

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

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

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

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

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

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

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

（2）可以限時(shí)計(jì)時(shí)、在線作答、提交試卷；

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

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

教師端功能分析：

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

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

（3）組織和維護(hù)題庫等。

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

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

考生情況表，包括當(dāng)前考生情況，如學(xué)號(hào)，姓名，開考時(shí)間，是否交卷，是否批閱，考試成績等。

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

題套表，保存所有固定題套信息，包括題套編號(hào)，題套名。

考試表，包括當(dāng)前全部考生的學(xué)號(hào)，每名考生的抽取的所有題目題號(hào)，考生對(duì)每道題所填的答案等。

用戶表，包括學(xué)號(hào)和姓名等信息。

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

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

3 功能實(shí)現(xiàn)

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

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

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

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

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

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

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

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

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

3.2.1 計(jì)時(shí)

為使答題過程確保計(jì)時(shí)準(zhǔn)確性，計(jì)時(shí)須跟服務(wù)器同步，為此必須在后臺(tái)服務(wù)器獲取并反映到客戶端，為避免更新時(shí)間而頻繁刷新頁面，自動(dòng)更新時(shí)間時(shí)采用了Ajax技術(shù)，以下為計(jì)時(shí)實(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("時(shí)間結(jié)束。");

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

}

});

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

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

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

clearTimeout(id);

}

}

id=setInterval(fn,1000);

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

3.2.2 答題

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

單選題選項(xià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")}

});

});

多選題選項(xiàng)操作響應(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}

});

});

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

3.2.3 交卷

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

$("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;

});

});

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

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

4 結(jié)束語

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

［1］任華,鄒承俊,尹華國.基于ASP.NETAJAX的在線購物系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(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］費(fèi)嘉祺.基于B／S模式的客戶關(guān)系管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].西安電子科技大學(xué)，2012.

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