Home > Article > Web Front-end > Implementing exam countdown and automatically submitting test papers based on Ajax technology
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'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 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'); }
<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>
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); }
<%@page contentType="text/html" pageEncoding="GBK"%> ${showStartTime}
<%@page contentType="text/html" pageEncoding="GBK"%> ${showRemainTime}
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(); } } } }
<body onLoad="showStartTime();showRemainTime();" onkeydown="keydown()">
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!