基于Ajax的在线考试系统开发.docx

基于Ajax的在线考试系统开发.docx

《基于Ajax的在线考试系统开发.docx》由会员分享，可在线阅读，更多相关《基于Ajax的在线考试系统开发.docx（2页珍藏版）》请在冰豆网上搜索。

基于Ajax的在线考试系统开发

【摘要】本文分析了Ajax技术的工作原理及实现方式，在开发过程结合

JSON数据传输格式和jQuery技术，使Ajax实现Web系统开发变得更容易、更有效率。

【关键词】Ajax设计模式；jQuery；JSON

1.Ajax设计模式及其工作原理

在传统的网页模式下数据需要更新时大多是在服务器端将信息更新后再将数据返回客户端的浏览器，当浏览器得到更新的请求时才会将整体网页内容更新。

AJAX是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。

与传统的Web工作模式不同，Ajax工作模式在浏览器与Web服务器之间加了一个Ajax引擎，通过调用JavaScript对象的XMLHttpRequest请求与后台服务器进行数据信息的交互，在后台服务器进行逻辑运算后再通过异步传输机制将已经部分更新HTML的页面内容发送给用户浏览器这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新[1]。

在创建网页时，客户端浏览器发送屏幕更新请求，Ajax技术将为其提供很大的灵活性，增强其交互性。

2.JSON数据格式

JSON是一个轻量级的数据交换负载格式。

它基于JavaScript语言的一个子集，提供了一种具有嵌套数据元素的结构。

JSON格式定义简单，通过一组键值对定义一个对象，可以和JAVA中的Map类很好地对应，简化了JSON在JAVA环境下的处理。

在JavaScript中，可以直接将这种格式的数据赋值给一个变量，然后通过键名取值。

基本格式如下，对象是属性、值对的集合，一个对象的开始于“{”，结束于“}”，每一个属性名和值间用“：

”提示，属性间用“，”分隔。

3.Ajax在在线考试系统中的应用

使用Ajax技术，可以从服务器获取数据信息，只需要动态加载用户检测对话框就能很快地和远程服务器进行数据交互，不会影响当前浏览的页面，且服务器响应速度也很快。

首先实现动态加载就必须要先实现异步通信，为此需要初始化一个XMLHttpRequest对象承担对服务器发送请求的任务，再由客户端Ajax引擎来接收并处理解析服务器返回的响应数据，最后呈现到浏览器的视图。

（1）用户登录

该在线考试系统的管理界面使用jQuery设计，它是轻量级的js库兼容CSS3，还兼容各种浏览器。

jQuery极大地简化了JSP开发人员遍历HTML文档、操作

DOM、处理事件、执行动画和开发Ajax的操作。

利用jQuery丰富的函数库，可

以减少代码的重复编写及DOM脚本库的调用，而只关注程序逻辑的实现，利用尽可能少的代码实现想要实现的功能。

该界面html代码较少，大部门代码都是动态生成。

该方式改变了以往要设计大量的html界面代码，一个管理界面可以让不同类型用户共同使用。

用户登录时触发AJAX应用的事件主要是登录按扭的

click事件。

连接数据库获取操作码，再从Jsonobject查找到对应的操作内容。

用户登录时元数据加载流程如图1所示。

（2）生成导航栏

传统的导航栏是直接写在html里的，当导航栏的内容足够多时，修改很麻烦，在我们开发的在线考试系统中，导航栏是放在数据库的。

ajax从后台取数据，用json作为数据传递格式，json配合jQuery可以轻松的生成导航栏。

4.结束语

文中分析了Ajax技术的工作原理及实现方式，并利用Ajax技术在在线考试系统中实现了动态加载。

Ajax通过异步交互技术，不但提高了网页的连续性，而且还加快了Web的响应速度。

在开发过程结合JSON数据传输格式和jQuery技术，使Ajax实现Web系统开发变得更容易、更有效率。

参考文献

[1]辛刚，王清心.基于Ajax的JavaWeb应用的研究与开发[J].山西电子技术，2010

（1）：

57-58.

[2]单东林.锋利的jQuery[M].北京：

人民邮电出版社，2009.