Implementing exam countdown and automatically submitting test papers based on Ajax technology-JS Tutorial-php.cn

This article mainly introduces relevant information on implementing exam countdown and automatically submitting test papers based on Ajax technology. It is very good and has the value of reference and learning ajax. Friends who are interested in ajax can refer to it

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 to start 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 implemented 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'srequest methodcan 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; }

Copy after login

(1) Create a new index.jsp page, which is the initial page visited by users. The page mainly contains a "Start Exam" button. The button's onclick event 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'); }

Copy after login

(2) Create a new Servlet implementation class named StartExam, which 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:

 StartExam com.lh.servlet.StartExam  examTime 20

Copy after login

(3) In the StartExam class, write the method startExam() for forwarding 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); }

Copy after login

(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}

Copy after login

(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}

Copy after login

(6) Create a new start exam page startExam.jsp page, in this page by calling The Ajax request method requests the StartExam class 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(); } } } }

Copy after login

(7) In order to realize automatic timing after the page is loaded, you need to add < on the start exam page In the ;body> tag, apply the window.setInterval() method through the onload event to call the showStartTime() function and showRemailTime() function. The key codes are as follows:

Copy after login

The above is the relevant knowledge introduced by the editor to implement exam countdown and automatic submission of test papers based on Ajax technology. I hope it will be helpful to everyone!

Related recommendations:

Ajax quick solution The parameter is too long and cannot be submitted successfully. How to solve it

Ajax submission Form form page will still refreshj Solution

AJAX display is loading and the layer occlusion page pops up

The above is the detailed content of Implementing exam countdown and automatically submitting test papers based on Ajax technology. For more information, please follow other related articles on the PHP Chinese website!