基于Ajax富客戶端技術在線考試系統的設計與實現

朱運喬

（湖北職業技術學院信息技術學院，湖北孝感432000）

0 引言

隨著網絡的高速發展，網絡的應用已經深入到各行各業。在各類網絡應用中，網絡在線考試因其使得考試成本降低，節約資源而且環保，同時它具有公正、準確、靈活等特點，所以，網絡在線考試早已成為一種常見考試方式被各種考試機構和教育行業所接受。

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

為此，在筆者最近主持設計并開發的網絡在線考試系統中，運用了微軟力推的ASP.NET MVC系統架構，并使用了該架構中集成進來的Ajax功能，系統完成后，得到了更好的完全不同的用戶體驗。

1 系統關鍵技術介紹

1.1 Ajax及其基本原理

Ajax的全稱是Asynchronous+JavaScript+XML，是綜合了Java技術、XML以及JavaScript等編程技術，可以讓開發人員構建基于Javascript技術的Web應用，并打破了使用頁面重載的慣例。

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

1.2 ASP.NET MVC 框架

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

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

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

2 系統總體設計

2.1 功能模塊及層次結構

本系統主要包括以下功能模塊：試卷生成、在線考試、計時限時、試卷評閱、考場監控、考試設置、題庫管理、統計與分析等。總體功能結構可用如圖1表示：

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

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

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

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

圖1 總體功能結構圖

教師端功能分析：

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

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

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

2.2 數據庫設計

通過對系統整體分析，在數據庫中共添加了以下七個表。

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

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

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

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

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

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

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

3 功能實現

3.1 系統整體架構

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

系統入口控制器（Home），系統初始入口，要完成的任務比較簡單，只是呈現統系的登錄視圖并跳轉到不同的客戶端；

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

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

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

3.2 Ajax技術在本系統中的應用和實現

為了使用系統達到更好的體驗效果，筆者在實現系統功能時，應用到了ASP.NET MVC框架下集成的Ajax的函數庫。

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

3.2.1 計時

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

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("時間結束。");

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

}

});

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

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

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

clearTimeout(id);

}

}

id=setInterval(fn,1000);

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

3.2.2 答題

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

單選題選項操作響應代碼：

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

$.Ajax({type:"POST",

url:"/Student/Answer/",

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

});

});

多選題選項操作響應代碼：

$("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異步數據請求利用Student控制器的Answer方法處理答題信息，更新數據表。至此，學生端的一次答題操作引起的異步請求得以完成，并且答題全程中只需一個視圖，根本不刷新頁面。

3.2.3 交卷

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

$("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方法返回做好的答題結果及成績。

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

4 結束語

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

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

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

［3］夏小云，汪峰.基于AJAX技術的電子商務系統研究及應用[J].商場現代化，2008(32)：136-137.

［4］費嘉祺.基于B／S模式的客戶關系管理系統的設計與實現[D].西安電子科技大學，2012.

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