AJAX技术在WEB答题系统中的应用与实现

侯锡铭,杨 扬,王晓磊

(1.河北工程技术高等专科学校,河北 沧州 061001;2.沧州医学高等专科学校,河北 沧州 61001;3.燕山大学里仁学院,河北 秦皇岛 066004)

AJAX(Asynchronous JavaScript and XML)是一种创建交互式网页应用的WEB开发技术,自2005年提出以来,目前已经成为WEB2.0核心技术之一。目前WEB应用的发展方向已经从功能性转向良好的界面操控性,要求能为用户提供更好的交互体验。AJAX技术的诞生恰好解决了这一问题。它利用已有的技术创造了崭新的使用方式,有效的改善了传统WEB应用的操控性和用户的交互体验,获得了社会的广泛认可。著名的 Google Maps(谷歌地图),就是基于AJAX技术开发。

1 AJAX工作原理

传统的WEB应用是由许多连续的WEB页面构成,整个WEB程序根据功能要求被划分成大量的WEB页面,浏览器采用同步的方式进行数据交互,用户进行的大部分的交互操作都需要切换并且刷新整个页面,在下一个页面完全显示出来之前,用户只能等待。

对于AJAX来说,它并不是从同步角度看待 WEB应用。而是采用异步的方式(无需打断用户的操作,只在后台进行)与服务器通信,从服务器获取需要的数据后,只更新页面中需要改变的区域内容。AJAX应用与传统的WEB应用的区别如下:

1)不刷新整个页面,在页面内与服务器通信。

2)使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。

3)程序仅由少量页面组成。大部分交互在页面之内完成,不需要切换整个页面。

AJAX与传统WEB应用运行机制对比如图1如示。

具体执行过程为,当确定需要从服务器读取新数据时首先通过 JavaScript和DOM操作页面的 HTM L元素,取出指定区域信息字段构造为 XML格式,然后调用XmlHttpRequest组件进行后台发送;当从服务器返回的数据时,同样使用XmlHttpRequest进行信息获取,解析XML文件后取出需要的内容,通过 JavaScript和DOM将信息显示在页面的指定区域内,如有要求,还需要使用CSS进行样式设置,如字体等。除了操作的WEB区域外,其余内容保持不变并可以同时进行其他操作,比如在等待返回结果的同时在另一区域输入信息。

图1 AJAX与传统 WEB应用运行机制

2 AJAX技术应用

2.1 功能需求

传统WEB答题系统操作较为繁琐、页面效果生硬。例如答完单独某一道题后,如果想查看结果,只有等待页面的全部刷新后方可显示答案。为了不影响其余题目答题,通常采用单独创建页面的方式。在其中显示答案信息。同时由于每次提交的都是全部页面内容,其中也包括很多HTM L代码,图片等。造成了带宽和服务器资源的浪费。考虑到如果出现题量大,考生多的情况,则服务器的大部分资源都在处理无效消息,容易出现访问时间超时,影响答题过程。

采用 AJAX技术实现该系统,可有效解决上述问题。AJAX技术主要用来实现前端WEB页面的功能操作。在答题过程中,无需新建窗口或下载全部答案,当考生在当前页面答题后,如果想查看结果,可以随时点击查看,无需等待;WEB页面无需全部刷新。如果题量较大,可以在当前页面进行题目的分段显示。同时可以修改答题视觉效果,比如在选择答案正确后,改变题目背景或颜色,帮助考生理解。对于服务器来说,由于提交的信息量很小,反应更加迅速。而目前广泛使用的浏览器如IE,FIREFOX等都内置支持 AJAX技术,因此在 B/S模式的在线答题系统应用 AJAX技术具有一定的必要性和可行性。

2.2 应用实现

2.2.1 开发环境说明

开发工具 netbeans6.1、JDK1.6、开发平台WINDOWS XP、数据库:mysql5.0、MySql管理工具 SQLYog Enterprise v6.14、服务器 Tomcat6.0、WEB浏览器:IE8.0。 浏览器端采用 JavaScript语言实现,服务器端使用 JAV A语言编程处理。

2.2.2 配置方法概述

首先需要安装 JDK以及Netbeans,在Netbeans安装包中已经集成了 Glassfish和tomcat两款服务器作为开发调试使用,安装时只需要选择运行时服务器为tomcat即可,无需再进行服务器配置。同时本系统统一采用GBK字符编码,在安装Mysql软件时需要修改缺省字符编码,选择 GBK格式。由于MySql缺省是采用字符输入界面,为便于数据操作,需要另安装第三方界面管理工具 SQLYog,能够帮助更直观的操作数据库。部分数据库字典如表1所示。

表1 数据库字典(部分)

2.2.3 浏览器端业务功能实现

浏览器端通过编写 JavaScript脚本主要实现以下功能。

1)及时获取考生选择的结果,进行XM L封装后发送到服务器。

2)收到服务器返回结果后进行XML解析,将结果显示在相应的W EB区域内。

3)使用 DOM操作 HTML元素,封装答题结果或答案,控制页面信息的显示方式。

4)验证输入有效性。

2.2.4 浏览器端实现接口软件

使用SendRequest构建 AJAX的前段实现框架。通过页面中的事件响应被调用,比如提交按钮的点击。调用XMLHttpRequest对象,构造提交数据的XML文件。使用CreateXMLHttpRequest创建XMLHttpRequest对象,由于不同的浏览器(如 IE和Mozilla)的 API实现不同,需要对当前所使用的的浏览器类型进行判断方可创建。

使用XMLHttpRequest来设置数据提交的方式和地址,设置返回结果后的响应函数,设置HT TP报文头数据,发送数据。 ProcessResponse对服务器返回消息的进行判断并调用相关的处理函数;用 GetTheAns获得用户的选择答案。使用Display解析XM L文件,获得服务器返回的处理结果。同时使用DOM方式将结果显示在WEB页面中。

部分关键代码如下:

2.2.5 服务器端实现

服务器端采用MVC设计理念,实现系统的后台逻辑处理、业务处理功能以及流程控制功能。主要的java包文件说明如下:

stu.database负责对数据库的进行读取或修改操作;stu.persistence根据实际的对象属性,建立相应类模型;stu.tk实现答题系统的业务处理,如单选题,多选题,简答题,等等。

业务处理主要功能如下:

1)对提交的XML文件进行解析获取用户提交的有效数据;

2)对不同的题型进行相应的判断处理;

3)将处理结果构造为XML文件返回至浏览器端。

2.2.6 服务器端实现接口软件

ListType列出指定类型题目的总记录;GetRightAns得到指定题目的正确答案。

部分关键代码如下:

3 测试案例

图2所示为物理诊断在线答题系统试题模拟练习页面。在进行单选题练习时学生提交所选结果后系统会给出选择正确与否以及相应表情,对于不确定答案的问题可以直接点击“查看正确答案按钮”获得正确答案。所有的操作均在当前页面进行,无需刷新和切换。与以往数据交互需重复刷新页面相比操作更加方便快捷,更接近实际答题效果。目前,该系统应用于沧州医学高等专科学校临床诊断教研室,为物理诊断课程提供日常的教学考试应用,系统性能稳定。

图2 物理诊断在线答题系统模拟练习

4 结束语

通过在 B/S答题系统中应用 AJAX技术,用户操作起来更加方便,同时在一定程度上减轻了系统负担,节约了系统资源。随着信息技术的发展,WEB开发已经不能仅仅局限于单纯业务功能的实现。目前WEB前段技术的发展方向是改善用户的体验感,而且 AJAX技术已经进入相对成熟的阶段,出现了一大批基于该技术实现的框架。随着 AJAX技术的不断深入发展,会给使用者创造更加丰富的WEB应用。

[1]克拉恩,帕斯卡雷洛,杰姆斯.AJAX实战 [M].ajaxcm.org,译.北京:人民出版社,2006.

[2][美 ]Shelley Powers.Adding AJAX[M].李秀忠,译.北京:电子工业出版社,2008.

[3][美 ]马劳克林.深入浅出 AJAX[M].OReiuy Taiwan公司,编译.南京:东南大学出版社,2008.