基于Ajax技术实现考试倒计时并自动提交试卷_AJAX相关

1.概述

在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能。由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作。运行本实例,访问准备考试页面index.jsp,在该页面中,单击“开始考试”按钮,将打开新窗口显示开始考试的页面,如图10.1所示,页面会自动计时,当考试时间结束时,将自动提价试卷。

2.技术要点

主要是利用Ajax异步提交技术和Servlet技术实现的。显示在考试页面中的计时时间是在Servlet中设置的,需要通过Ajax的异步提交不断的请求Servlet,从而获得服务器返回的最新的计时时间的数据。为了便于维护和代码的重用,可以将Ajax的请求方法封装到一个JS文件中,该方法可以作为一个公共方法,在程序中使用时可以直接调用。

3.具体实现代码

在JS文件中构建XMLHttpRequest对象以及请求方法,如下代码所示:

/**
* 构建XMLHttpRequest对象并请求服务器
* @param reqType:请求类型(GET或POST)
* @param url:服务器地址
* @param async:是否异步请求
* @param resFun:响应的回调函数
* @param parameter :请求参数
* @return :XMLHttpRequest对象
*/
function httpRequest(reqType,url,async,resFun,parameter){
var request = null;
if( window.XMLHttpRequest ){ //非IE浏览器,创建XMLHttpRequest对象
request = new XMLHttpRequest();
}else if( window.ActiveXObject ){ //IE浏览器,创建XMLHttpRequest对象
var arrSignatures = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP", "Microsoft.XMLHTTP", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP"];
for( var i = 0; i < arrSignatures.length; i++ ){
request = new ActiveXObject( arrSignatures[i] );
if( request || typeof( request ) == "object" )
break;
}
}
if( request || typeof( request ) == "object" ){
if(reqType.toLowerCase()=="post"){ //以POST方式提交
request.open(reqType, url, true); //打开服务器连接
//设置MIME类型
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.onreadystatechange = resFun; //设置处理响应的回调函数
parameter = encodeURI(parameter); //将参数字符串进行编码
request.send(parameter); //发送请求
}
else{ //以GET方式提交
url = url+"?"+parameter;
request.open(reqType, url, true); //打开服务器连接
request.onreadystatechange = resFun; //响应回调函数
request.send(null); //发送请求
}
}
else{
alert( "该浏览器不支持Ajax!" );
}
return request;
} 

(1)新建index.jsp页,该页面是用户访问的初始页。在页面中主要包含一个“开始考试”按钮,该按钮的onclick事件将调用打开考试窗口的JavaScript函数,关键代码如下:

function showWindow(){ window.open('StartExam?action=startExam','','width=750,height=500,scrollbars=1');
} 

(2)新建名为StartExam的Servlet实现类,该类用创建考试的开始时间和剩余时间。在该类中,创建一个全局变量examTime,用于记录考试时间,该变量的值是在web.xml中设置的,关键代码如下:

<servlet>
<servlet-name>StartExam</servlet-name>
<servlet-class>com.lh.servlet.StartExam</servlet-class>
<init-param>
<param-name>examTime</param-name>
<param-value>20</param-value>
</init-param>
</servlet> 

(3)在StartExam类中,编写用于将页面转发到开始考试页面的方法startExam()。关键代码如下:

public void startExam(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException{
HttpSession session = request.getSession();
request.setAttribute("time", examTime); //保存考试时间
session.setAttribute("startTime1",new Date().getTime()); //保存当前时间的毫秒数
request.getRequestDispatcher("startExam.jsp").forward(request, response);
} 

(4)新建showStartTime.jsp页,用于输出计时开始时间。关键代码如下:

<%@page contentType="text/html" pageEncoding="GBK"%>
${showStartTime} 

(5)新建showRemainTime.jsp页,用于输出计时剩余时间。关键代码如下:

<%@page contentType="text/html" pageEncoding="GBK"%>
${showRemainTime} 

(6)新建开始考试页面startExam.jsp页,在该页中通过调用Ajax请求方法请求StartExam类,获得考试的开始时间和剩余时间。关键代码如下:

var request1= false;
var request2 = false;
//请求Servlet获得开始时间
function showStartTime(){
var url = "StartExam";
//此处需要加&nocache="+new Date().getTime(),否则将出现时间不自动走动的情况
var parameter="action=showStartTime&nocache="+new Date().getTime();
request1 = httpRequest("post",url,true,callbackFunc,parameter);
}
//回调函数
function callbackFunc(){
if( request1.readyState==4 ){
if( request1.status == 200 ){
showStartTimediv.innerHTML=request1.responseText;
}
}
}
//请求Servlet获得剩余时间
function showRemainTime(){
var url = "StartExam";
var parameter="action=showRemainTime&nocache="+new Date().getTime();
request2 = httpRequest("post",url,true,callbackFunc_R,parameter);
}
//回调函数
function callbackFunc_R(){
if( request2.readyState==4 ){
if( request2.status == 200 ){
h=request2.responseText;
showRemainTimediv.innerHTML=h;
h=h.replace(/\s/g,""); //去除字符串中的Unicode空白符
showRemainTimediv.innerHTML=h;
if(h=="00:00:00"){
form1.submit();
}
}
}
} 

(7)为了实现页面加载后自动计时,需要在开始考试页面的 <body>标签中通过onload事件应用window.setInterval()方法调用showStartTime()函数和showRemailTime()函数,关键代码如下:

<body onLoad="showStartTime();showRemainTime();" onkeydown="keydown()">

以上所述是小编给大家介绍的基于Ajax技术实现考试倒计时并自动提交试卷 的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax考试倒计时
ajax自动提交
ajax实现表单提交、ajax实现form表单提交、ajax倒计时、php ajax 倒计时、倒计时提交表单,以便于您获取更多的相关知识。

时间: 2024-10-27 20:26:01

基于Ajax技术实现考试倒计时并自动提交试卷_AJAX相关的相关文章

基于Ajax技术实现文件上传带进度条_AJAX相关

1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运行本实例,如图1所示,访问文件上传页面,单击"浏览"按钮选择要上传的文件,注意文件不能超过50MB,否则系统将给出错误提示.选择完要上传的文件后,单击"提交"按钮,将会上传文件并显示上传进度. 2.技术要点 主要是应用开源的Common-FileUpload组件来实现分

使用Ajax技术通过XMLHttpRequest对象完成首页登录功能_AJAX相关

最近使用Ajax技术通过XMLHttpRequest对象完成一个首页的登录功能! 代码如下: <script type="text/javascript"> //创建XMLHttpRequest对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ return xmlhttprequest=new XMLHttpRequest(); }else{ return xmlhttprequest=new Ac

基于Ajax技术实现文件上传带进度条

1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运行本实例,如图1所示,访问文件上传页面,单击"浏览"按钮选择要上传的文件,注意文件不能超过50MB,否则系统将给出错误提示.选择完要上传的文件后,单击"提交"按钮,将会上传文件并显示上传进度. 2.技术要点 主要是应用开源的Common-FileUpload组件来实现分

基于Ajax技术实现无刷新用户登录功能

代码如下: // JScript 文件 function usersLogon() { var userName = document.getElementById("txtuserName").value; var password = document.getElementById("txtpassword").value; var checkCode = document.getElementById("txtCheckCode").val

创建基于AJAX技术的Scribble应用程序

简介 ASP.NET Atlas是一套丰富的类库,用于ASP.NET开发AJAX风格的应用程序.本文试图解说Atlas框架的一般性特征,由于Atlas是一个庞大的库,故本文集中探讨Atlas的两个最重要的特征: 1. 能够从客户端脚本中调用服务器端web服务 2. 使得开发跨浏览器兼容的JavaScript代码相当容易 通过对这两个特征的介绍,读者朋友可以熟悉Atlas类库的使用方法. 背景 MFC Scribble应用程序是学习MFC编程的著名例子之一.Scribble应用程序允许用户使用鼠标

基于AJAX技术实现Struts校验框架

ajax 提要 实时的数据校验是AJAX技术的重要优点之一,Struts校验框架通过加入这种技术进一步丰富了其MVC,从而使得Web应用程序的开发效果更接近于桌面应用程序. 一. 引言 校验框架的根本目的是实现域校验.在Web应用程序中有许多方法可以实现域校验,总体上可以分为两类:服务器端和客户端.其中,Struts校验框架是适合于基于Java的Web应用程序环境最好的框架之一.它可以使用服务器端校验来配置应用程序并且使用在校验过程(在请求处理期间激活)中生成的错误消息:而且它也可以通过在请求页

基于AJAX技术提高搜索引擎排名

ajax|排名|搜索引擎 描述 嵌入在你的web页面中的导航元素能够降低你的搜索引擎评价排名并且降低你的网站的响应性能.本文作者想同你一起探讨如何使用AJAX技术来解决这两个问题. 许多设计良好的web站点都包含大量的与实际内容相联系的可导航信息.用于导航的HTML标记能影响你的搜索引擎评价,而且能够改进访问者的页面下载体验感.在本文中,你会看到如何使用AJAX来创建更为集中的更快速加载的web页面. 一. 分离导航与内容 让我们使用一个例子作为开始.请考虑你现在阅读的文章,它有下列一些内容:

基于AJAX技术的DataGrid控件编程

ajax|datagrid|datagrid控件|编程 简介 在传统的Web开发中,每次DataGrid控件填充或更新都相应于一次到服务器的数据回馈.但是,借助于AJAX技术,我们可以在不进行表单提交(刷新)的情况下即可以填充DataGrid控件. 在本文中,我们通过一个简单示例并借助于一个DropDownList控件的帮助来讨论如何达到这一目的.在这个例子中,我们使用了一个DropDownList控件:一旦改变DropDownList的值,它即用相应的城市名来填充DataGrid控件,在此过程

AJAX 缓存问题的两种解决方法(IE)_AJAX相关

做一个项目用到Ajax,开始觉得挺好,后来发现一个问题,例如删除一项,恢复之后就不能再接着删除, 必须要等一段时间,后来知道是IE缓存的问题 AJAX缓存页面是一个刚接触AJAX的人一定会遇到的问题,造成这个问题的关键性人物又是Ie... 在网上找了好多资料后,总结一下 1:在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数 在javascript发送的URL后加上t=Math.random() 当然,不是直接把t=Math.random()拷贝到URL后面,应该像这样:URL+"&a