基于ASP.NET AJAX的網上考試系統的設計與實現

摘要:隨著信息技術向教育領域的擴展，網上考試系統在高校的數字化建設中被廣泛地應用。為優化傳統的基于Web的網上考試系統的性能，該文首先概述了AJAX技術和ASP.NET AJAX的架構，然后利用ASP.NET AJAX開發框架的異步通訊能力和局部刷新頁面的特點，解決了傳統的網上考試系統中存在的客戶端響應速度慢、現場數據保存和準確計時等問題，從而為用戶帶來了更好的在線體驗。

關鍵詞:網上考試系統;AJAX;ASP.NET AJAX;DOM;XML

中圖分類號:TP311文獻標識碼:A文章編號:1009-3044(2009)25-7161-03

The Design and Implementation of ASP.NET AJAX Technology Based Online Test System

SONG Ji-hong， CAO Yue

(School of Information Science and Engineering， Shenyang University of Technology， Shenyang 110178， China)

Abstract: With the expansion of the information technology to educational field， online test system widely is applied in the digitized construction of the university. To optimize the online test system performance，this paper first outlined technology of the AJAX and framework of the ASP.NET AJAX， and then using Asynchronous communication ability and the partial page refresh function of the ASP.NET AJAX to solve some problems of the client side speed of response to be slow， the data of the field is to restore and accurate time in the online test system based web. Thereby it has brought a better online experience to the user.

Key words: online test system;AJAX;ASP.NET AJAX;DOM;XML

隨著Web相關技術的發展，信息化的應用越來越多的構筑于Internet環境中，基于Web的B/S結構的網上考試系統由于具備跨平臺兼容性、易于部署和維護等優點，成為網上考試系統設計的一個主流方向。但是由于B/S結構的系統也具有客戶端響應速度慢和頁面頻繁刷新的缺點，使得傳統的基于Web網上考試系統還存在著客戶端響應速度、現場數據的保存和準確計時等問題。AJAX技術具有異步發送請求和局部刷新Web頁面的特點，可以減少頁面重復加載，減輕服務器資源消耗。所以AJAX技術適用于交互較多，數據提交頻繁的網上考試系統。

而ASP.NET AJAX是微軟公司為ASP.NET程序員提供的官方AJAX解決方案。它為JavaScript做了很多面向對象的擴充，再加上與ASP.NET開發平臺的集成，降低了程序員開發大型AJAX程序的難度[1]。因此基于ASP.NET AJAX開發框架可以很方便地創建具有AJAX特性的網上考試系統，并且為網上考試系統帶來更加豐富的呈現形式和更為流暢連續的用戶體驗。

1 AJAX概述

1.1 AJAX定義

AJAX(Asynchronous JavaScript and XML即異步JavaScript與XML技術)是由杰西·詹姆斯·加勒特首先提出的，其核心是利用AJAX的異步交互模式，減輕服務器負擔，提高應用操作的執行效率。AJAX并不是一種新技術，而是一組成熟的老技術的無縫集合，它包括以下多項技術[1]:

1)XHTML和CSS是基于Web標準的呈現技術;

2)Document Object Model(DOM)是動態顯示和交互技術;

3)XML和XSLT是數據交換和處理技術;

4)XML Http Request是異步數據獲取技術;

5)JavaScript是客戶端腳本語言，使用它來綁定以上技術。

1.2 AJAX工作原理

與傳統的基于Web的網上考試系統不同，AJAX采用了異步交互模式。AJAX在用戶和服務器之間加了一個AJAX中間層，使用戶操作與服務器響應異步化。它不是將所有的用戶請求都提交給服務器處理，內存中的數據編輯、頁面導航、數據校驗這些不需要重新載入整個頁面的需求可以交給AJAX引擎來執行，只有確實需要從服務器讀取新數據時，再由AJAX引擎向服務器發出一個異步請求。所以用戶無需等待/請求響應，可以進行其它的操作[2]。

2 ASP.NET AJAX架構

ASP.NET AJAX架構是由客戶端腳本庫和服務器端組件兩部分組成[3]，這兩部分被集成在一起提供了一個功能強大的開發框架。ASP.NET AJAX的服務器端和ASP.NET2.0實現了無縫銜接，使得ASP.NET程序員幾乎不需要額外學習就可以開發出自己的AJAX程序。而它的客戶端有極大的靈活性和可擴展性，并且可應用于非.NET環境下，為AJAX程序員提供了廣闊的開發空間。如圖1所示。

2.1 ASP.NET AJAX服務器端架構

ASP.NET AJAX服務器端是建立在ASP.NET框架基礎上，并且對ASP.NET框架進行了AJAX擴展，使其支持AJAX程序的開發。ASP.NET AJAX服務器端組件是由ASP.NET控件和組件構成，用于管理UI和應用程序流，管理序列，驗證和控件擴展性等。

ASP.NET AJAX服務器端控件是為ASP.NET新增加的實現AJAX功能的控件，由服務器和客戶端代碼組成。以下是常用的ASP.NET AJAX服務器端控件[1]。

1)ScriptManager控件:用來管理頁面中的全部腳本資源。它必須存在于WebForm中，并且在一個頁面中必須首先添加ScriptManager控件，然后才能使用其它的ASP.NET AJAX服務器端控件。在每個支持ASP.NET AJAX的ASP.NET頁面中有且只能有一個ScriptManager控件。

2)UpdatePanel控件:不用編寫任何客戶端腳本，只要在頁面中添加幾個UpdatePanel控件和一個ScriptManager控件就可以實現局部刷新。在一個頁面中可以含有一個或多個UpdatePanel控件，且UpdatePanel控件還可以嵌套使用。

3)UpdateProgress控件:用來顯示UpdatePanel控件刷新的進度信息。在傳統的Web應用程序中，瀏覽器的狀態欄將指示頁面加載的狀態，但在局部刷新的AJAX模型中，狀態欄不再發生變化，所以在ASP.NET AJAX應用框架中提供了UpdateProgress服務器端控件來彌補不足。在一個頁面中，一個UpdateProgress控件可以和一個UpdataPanel控件關聯，也可以和多個UpdatePanel控件關聯。

4)Timer控件:用來以固定的時間間隔向服務器發送同步或異步的請求。它經常和UpdatePanel控件結合起來以實現定時異步更新頁面一部分的功能，也可以用這個控件定期提交整個頁面。

2.2 ASP.NET AJAX客戶端架構

ASP.NET AJAX客戶端腳本庫由JavaScript文件構件，這些文件提供了面向對象開發的特性。ASP.NET AJAX客戶端腳本庫是采用分層架構的，以下是它的各個層次[1]。

1)瀏覽器兼容層:通過最常用的瀏覽器為ASP.NET AJAX腳本提供兼容性。

2)ASP.NET AJAX核心服務:對JavaScript進行了面向對象的擴展。例如，增加了命名空間功能、完善了繼承功能、添加了一些常用的腳本方法，如字符串的trim()方法等。

3)ASP.NET AJAX基礎類庫層:定義了一些常用的客戶端類如String Builders、Component等，主要負責處理客戶端的行為、動作、綁定等。

4)網絡工作層:該層用于處理基于Web服務和應用之間的通信，管理異步式遠程方法的調用。

3 系統的設計和實現

本系統是采用Microsoft Visual Studio 2005和SQL Server 2005來開發的，并且是基于三層B/S的體系結構和ASP.NET AJAX開發框架來實現的。

3.1 系統的體系結構

整個系統的體系結構可劃分為表示層、業務邏輯層、數據層，如圖2所示。

1)表示層:完成頁面顯示部分的內容，將系統劃分為不同的功能模塊進行開發。

2)業務邏輯層:把提供給用戶的功能操作拆分成具體的業務邏輯進行封裝。

3)數據層:采用SQL Server2005作為后臺數據庫，實現對數據的存儲和訪問。

3.2 系統的設計與實現

本系統包括以下三個子系統:網上考試子系統、試題管理子系統、成績管理子系統并且是由用戶登陸模塊、用戶管理模塊、題庫管理模塊、試卷管理模塊、考生管理模塊、在線考試模塊和成績查詢模塊組成。

下面介紹與AJAX技術配合較為緊密的功能的設計和實現。

3.2.1 現場數據的保存和考試倒計時

這兩種功能都是采用ASP.NET AJAX提供的定時器Timer來實現的。

在網上考試過程中，有時會遇到斷電、死機、操作不當等意外情況，這時需要學生進行二次登錄，繼續答卷。本系統利用AJAX技術實現了在考試過程中，將用戶的答案實時地通過瀏覽器異步傳輸到后臺服務器端進行保存，避免了在考試中由于用戶計算機出現故障而造成的答案丟失。具體實現方法如下:

1)在考生表中設置NORM字段，用來使系統確認是否允許考生在有效時間內繼續參加考試。

2)添加一個Timer控件，設置其時間間隔屬性Interval的值為3000，即3秒鐘保存一次。

3)添加OnTick事件，把原有的答案實時保存功能放置在OnTick事件觸發的處理函數中。關鍵代碼如下:

當考生在進入答題頁面時，在服務器端把這套試卷的考試時間讀取出來，在試卷頁面初始化的同時，通過AJAX技術，把服務器讀取到的時間同時傳遞給客戶端，然后使這個時間在客戶端開始倒計時。但是與現場數據的保存功能的具體實現過程的不同之處在于:剩余時間的變化表現在頁面計時的變化上，所以還需添加一個UpdatePanel控件來實現局部頁面的定時更新。關鍵代碼如下:

//一秒鐘一次

// 用來實現局部頁面的定時更新。

3.2.2 試題呈現

在組合試題生成試卷的時候，采用AJAX技術實現了局部刷新的操作界面，用戶只需點擊各個題型添加按鈕，頁面就會自動生成各題型相對應的屬性框來供用戶初始化，這就為用戶提供了在同一頁面動態編輯試卷的功能。具體實現方法如下:

1)將需要顯示的信息用GridView內嵌Literal控件進行顯示。

2)在頁面中放入ScriptManager控件以支持頁面局部更新。

3)把顯示信息的GridView控件放置在UpdatePane11控件的ContentTemplate標簽內以實現局部更新。

4)再把DetailsView控件放置在UpdatePanel2控件的ContentTemplate標簽內以實現局部更新。

5)添加一個UpdateProgress控件，提示用戶“正在更新數據……”。關鍵代碼如下:

……

AssociatedUpdatePanelID=\"UpdatePanel1\">

3.2.3 輸入框提示功能

在用戶信息界面中添加了具有輸入框提示功能的帶有水印效果的文本框，用來提示用戶輸入相應的信息，而且還可以將說明文字和文本框結合在一起，大大減少對頁面空間的占用。具體實現方法如下:

1)把在用戶信息界面中需要添加帶水印效果的信息放置在一個TextBox1中。

2)添加一個TextBoxWatermarkExtender，其中TargetControlID指向存放帶水印效果的信息的TextBox1。關鍵代碼如下:

runat=\"server\"

TargetControllD=\"TextBox1\"

WatermarkText=\"請輸入用戶姓名\"

WatermarkCssClass=\"water2\">

4 結束語

本文針對網上考試系統在使用過程中具有的頁面交互的地方較多、頻繁讀取服務器上數據的特點，設計并實現了一個基于ASP.NET AJAX開發框架的網上考試系統。該系統實現了頁面無刷新的試題呈現、現場數據的保存、考試倒計時和輸入框提示等功能，這樣就從根本上解決了傳統的基于Web的網上考試系統存在的問題，進而提高了網上考試系統的頁面交互性和系統的效率。

參考文獻:

[1] 王宏宇. 征服 ASP.NET 2.0 Ajax 典型應用[M].北京:人民郵電出版社，2007.

[2] 宋小波. 基于AJAX的無紙化考試系統的設計與實現[J]. 科技資訊， 2007(19):7-8.

[3] 王時繪，陳志雄，朱榮釗. ASP.NET AJAX在Web開發中的應用[J].計算機與信息技術，2008(Z1):48-52.

[4] 陳冠軍. 完全手冊:ASP.NET AJAX實用開發詳解[M]. 北京:電子工業出版社，2008.

[5] 陳黎夫. ASP.NET AJAX程序設計(第H卷:客戶端端)[M]. 北京:人民郵電出版社，2007.

[6] Esposito D. Introducing Microsoft ASP.NET AJAX[M]. Microsoft Press， 2007.

[7] Holzner S.Ajax寶典[M].陳秋萍，譯.北京:人民郵電出版社，2007.

[8] 微軟官方網站[EB/OL].http://www.asp.net/AJAX.