基于ASP.NET AJAX的网上考试系统的设计与实现
开篇：润墨网以专业的文秘视角，为您筛选了一篇基于ASP.NET AJAX的网上考试系统的设计与实现范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！
摘要:随着信息技术向教育领域的扩展,网上考试系统在高校的数字化建设中被广泛地应用。为优化传统的基于Web的网上考试系统的性能,该文首先概述了ajax技术和 AJAX的架构,然后利用 AJAX开发框架的异步通讯能力和局部刷新页面的特点,解决了传统的网上考试系统中存在的客户端响应速度慢、现场数据保存和准确计时等问题,从而为用户带来了更好的在线体验。
关键词:网上考试系统;AJAX; AJAX;DOM;XML
中图分类号:TP311文献标识码:A文章编号:1009-3044(2009)25-7161-03
The Design and Implementation of 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 AJAX, and then using Asynchronous communication ability and the partial page refresh function of the 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; AJAX;DOM;XML
随着Web相关技术的发展,信息化的应用越来越多的构筑于Internet环境中,基于Web的B/S结构的网上考试系统由于具备跨平台兼容性、易于部署和维护等优点,成为网上考试系统设计的一个主流方向。但是由于B/S结构的系统也具有客户端响应速度慢和页面频繁刷新的缺点,使得传统的基于Web网上考试系统还存在着客户端响应速度、现场数据的保存和准确计时等问题。AJAX技术具有异步发送请求和局部刷新Web页面的特点,可以减少页面重复加载,减轻服务器资源消耗。所以AJAX技术适用于交互较多,数据提交频繁的网上考试系统。
而 AJAX是微软公司为程序员提供的官方AJAX解决方案。它为JavaScript做了很多面向对象的扩充,再加上与开发平台的集成,降低了程序员开发大型AJAX程序的难度[1]。因此基于 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 AJAX架构
AJAX架构是由客户端脚本库和服务器端组件两部分组成[3],这两部分被集成在一起提供了一个功能强大的开发框架。 AJAX的服务器端和2.0实现了无缝衔接,使得程序员几乎不需要额外学习就可以开发出自己的AJAX程序。而它的客户端有极大的灵活性和可扩展性,并且可应用于非.NET环境下,为AJAX程序员提供了广阔的开发空间。如图1所示。
2.1 AJAX服务器端架构
AJAX服务器端是建立在框架基础上,并且对框架进行了AJAX扩展,使其支持AJAX程序的开发。 AJAX服务器端组件是由控件和组件构成,用于管理UI和应用程序流,管理序列,验证和控件扩展性等。
AJAX服务器端控件是为新增加的实现AJAX功能的控件,由服务器和客户端代码组成。以下是常用的 AJAX服务器端控件[1]。
1)ScriptManager控件:用来管理页面中的全部脚本资源。它必须存在于WebForm中,并且在一个页面中必须首先添加ScriptManager控件,然后才能使用其它的 AJAX服务器端控件。在每个支持 AJAX的页面中有且只能有一个ScriptManager控件。
2)UpdatePanel控件:不用编写任何客户端脚本,只要在页面中添加几个UpdatePanel控件和一个ScriptManager控件就可以实现局部刷新。在一个页面中可以含有一个或多个UpdatePanel控件,且UpdatePanel控件还可以嵌套使用。
3)UpdateProgress控件:用来显示UpdatePanel控件刷新的进度信息。在传统的Web应用程序中,浏览器的状态栏将指示页面加载的状态,但在局部刷新的AJAX模型中,状态栏不再发生变化,所以在 AJAX应用框架中提供了UpdateProgress服务器端控件来弥补不足。在一个页面中,一个UpdateProgress控件可以和一个UpdataPanel控件关联,也可以和多个UpdatePanel控件关联。
4)Timer控件:用来以固定的时间间隔向服务器发送同步或异步的请求。它经常和UpdatePanel控件结合起来以实现定时异步更新页面一部分的功能,也可以用这个控件定期提交整个页面。
2.2 AJAX客户端架构
AJAX客户端脚本库由JavaScript文件构件,这些文件提供了面向对象开发的特性。 AJAX客户端脚本库是采用分层架构的,以下是它的各个层次[1]。
1)浏览器兼容层:通过最常用的浏览器为 AJAX脚本提供兼容性。
2) AJAX核心服务:对JavaScript进行了面向对象的扩展。例如,增加了命名空间功能、完善了继承功能、添加了一些常用的脚本方法,如字符串的trim()方法等。
3) AJAX基础类库层:定义了一些常用的客户端类如String Builders、Component等,主要负责处理客户端的行为、动作、绑定等。
4)网络工作层:该层用于处理基于Web服务和应用之间的通信,管理异步式远程方法的调用。
3 系统的设计和实现
本系统是采用Microsoft Visual Studio 2005和SQL Server 2005来开发的,并且是基于三层B/S的体系结构和 AJAX开发框架来实现的。
3.1 系统的体系结构
整个系统的体系结构可划分为表示层、业务逻辑层、数据层,如图2所示。
1)表示层:完成页面显示部分的内容,将系统划分为不同的功能模块进行开发。
2)业务逻辑层:把提供给用户的功能操作拆分成具体的业务逻辑进行封装。
3)数据层:采用SQL Server2005作为后台数据库,实现对数据的存储和访问。
3.2 系统的设计与实现
本系统包括以下三个子系统:网上考试子系统、试题管理子系统、成绩管理子系统并且是由用户登陆模块、用户管理模块、题库管理模块、试卷管理模块、考生管理模块、在线考试模块和成绩查询模块组成。
下面介绍与AJAX技术配合较为紧密的功能的设计和实现。
3.2.1 现场数据的保存和考试倒计时
这两种功能都是采用 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 结束语
本文针对网上考试系统在使用过程中具有的页面交互的地方较多、频繁读取服务器上数据的特点,设计并实现了一个基于 AJAX开发框架的网上考试系统。该系统实现了页面无刷新的试题呈现、现场数据的保存、考试倒计时和输入框提示等功能,这样就从根本上解决了传统的基于Web的网上考试系统存在的问题,进而提高了网上考试系统的页面交互性和系统的效率。
参考文献:
[1] 王宏宇. 征服 2.0 Ajax 典型应用[M].北京:人民邮电出版社,2007.
[2] 宋小波. 基于AJAX的无纸化考试系统的设计与实现[J]. 科技资讯, 2007(19):7-8.
[3] 王时绘,陈志雄,朱荣钊. AJAX在Web开发中的应用[J].计算机与信息技术,2008(Z1):48-52.
[4] 陈冠军. 完全手册: AJAX实用开发详解[M]. 北京:电子工业出版社,2008.
[5] 陈黎夫. AJAX程序设计(第H卷:客户端端)[M]. 北京:人民邮电出版社,2007.
[6] Esposito D. Introducing Microsoft AJAX[M]. Microsoft Press, 2007.
[7] Holzner S.Ajax宝典[M].陈秋萍,译.北京:人民邮电出版社,2007.
[8] 微软官方网站[EB/OL]./AJAX.