Ajax implements exam countdown and automatic submission of test papers

This time I will bring you the Ajax function to implement the exam countdown and automatically submit the test paper. What are the precautions for the Ajax function to implement the exam countdown and automatically submit the test paper. The following is a practical case, let's take a look.

1. Overview

When developing an online exam system, exam timing and automatic submission of test papers are essential functions. Since the test paper cannot be refreshed during the answering process, Ajax needs to be used to implement refresh-free operation. Run this example and access the exam preparation page index.jsp. In this page, click the "Start Exam" button. A new window will open to display the page for starting the exam, as shown in Figure 10.1. The page will automatically time the time when the exam time ends. At this time, the price of the test paper will be automatically increased.

2. Technical points

is mainly realized by using Ajax asynchronous submission technology and Servlet technology. The timing time displayed on the exam page is set in the Servlet, and it is necessary to continuously request the Servlet through Ajax asynchronous submission to obtain the latest timing time data returned by the server. In order to facilitate maintenance and code reuse, Ajax's request method can be encapsulated into a JS file. This method can be used as a public method and can be called directly when used in the program.

3. Specific implementation code

Construct the XMLHttpRequest object and request method in the JS file, as shown in the following code:

/**
* 构建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) Create a new index.jsp page, which is the initial page visited by users. The page mainly contains a "Start Exam" button. The onclick event of this button will call the JavaScript function that opens the exam window. The key code is as follows:

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

(2) Create a new Servlet implementation class named StartExam. The class uses the start time and remaining time to create the exam. In this class, create a global variable examTime to record the exam time. The value of this variable is set in web.xml. The key code is as follows:

<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) In the StartExam class, write Method startExam() used to forward the page to the start exam page. The key code is as follows:

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) Create a new showStartTime.jsp page to output the timing start time. The key code is as follows:

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

(5) Create a new showRemainTime.jsp page to output the remaining time. The key code is as follows:

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

(6) Create a new start exam page startExam.jsp. In this page, request the StartExam class by calling the Ajax request method to obtain the start time and remaining time of the exam. The key code is as follows:

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 ){
showStartTimep.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;
showRemainTimep.innerHTML=h;
h=h.replace(/\s/g,""); //去除字符串中的Unicode空白符
showRemainTimep.innerHTML=h;
if(h=="00:00:00"){
form1.submit();
}
}
}
}

(7) In order to realize automatic timing after the page is loaded, you need to apply the window.setInterval() method through the onload event in the tag of the start exam page to call the showStartTime() function and showRemailTime() function, the key code is as follows:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to transmit Json data through Ajax's restful interface

How does ajax add, delete, or modify xml files? check

The above is the detailed content of Ajax implements exam countdown and automatic submission of test papers. For more information, please follow other related articles on the PHP Chinese website!