Based on Ajax technology, the examination countdown is implemented and the examination paper is automatically submitted.

Based on Ajax technology, the examination countdown is implemented and the examination paper is automatically submitted.

1. Overview

When developing an online examination system, it is essential to timing the examination and automatically submit the examination. Because the exam cannot be refreshed during the answer process, you need to use Ajax for refreshing the exam. Run this instance and access the index on the prepare exam page. jsp. on this page, click the start test button. The start test page is displayed in the new window, as shown in Figure 10.1. The page is automatically timed. When the test time ends, the price exam will be automatically raised.

2. Key Technical Points

It is mainly implemented using Ajax asynchronous commit technology and Servlet technology. The timer time displayed on the exam page is set in Servlet. You need to submit continuously requested Servlet through Ajax asynchronously to obtain the latest timer time data returned by the server. To facilitate maintenance and code reuse, You can encapsulate Ajax request methods into a JS file. This method can be used as a public method and can be called directly when used in a program.

3. Specific implementation code

The following code constructs the XMLHttpRequest object and request method in the js file:

/*** Construct the XMLHttpRequest object and request the server * @ param reqType: Request type (GET or POST) * @ param url: server address * @ param async: asynchronous request * @ param resFun: callback function of the response * @ param parameter: Request parameter * @ return: XMLHttpRequest object */function httpRequest (reqType, url, async, resFun, parameter) {var request = null; if (window. XMLHttpRequest) {// create the XMLHttpRequest object request = new XMLHttpRequest ();} else if (window. activeXObject) {// IE browser, create XMLHttpRequest object va R 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") {// use P The OST method submits the request. open (reqType, url, true); // open the server connection // set the MIME type request. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); request. onreadystatechange = resFun; // set the callback function parameter = encodeURI (parameter) for processing the response; // encode the parameter string for request. send (parameter); // send request} else {// submit url = url + "? "+ Parameter; request. open (reqType, url, true); // open the server connection request. onreadystatechange = resFun; // response callback request. send (null); // send request} else {alert ("This browser does not support Ajax! ");} Return request ;}

(1) Create an index. jsp page, which is the initial page accessed by the user. The page contains a "Start test" button. The onclick event of this button calls the JavaScript function that opens the test window. The key code is as follows:

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

(2) create a Servlet implementation class named StartExam, which uses the test creation start time and remaining time. In this class, create a global variable examTime to record the test 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, compile the 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); // Save the exam time session. setAttribute ("startTime1", new Date (). getTime (); // Save the current time in milliseconds request. getRequestDispatcher ("startExam. jsp "). forward (request, response );}

(4) Create a New showStartTime. jsp page to output the timer 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 of the timer. The key code is as follows:

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

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

Var request1 = false; var request2 = false; // request the Servlet to obtain the start time function showStartTime () {var url = "StartExam "; // Add & nocache = "+ new Date () here (). getTime (); otherwise, var parameter = "action = showStartTime & nocache =" + new Date (). getTime (); request1 = httpRequest ("post", url, true, callbackFunc, parameter) ;}// callback function callbackFunc () {if (request1.readyState = 4) {if (request1.status = 200) {showStartTimediv. innerHTML = request1.responseText; }}// request the Servlet to obtain the remaining time function showRemainTime () {var url = "StartExam "; var parameter = "action = showRemainTime & nocache =" + new Date (). getTime (); request2 = httpRequest ("post", url, true, callbackFunc_R, parameter);} // callback function callbackFunc_R () {if (request2.readyState = 4) {if (request2.status = 200) {h = request2.responseText; showRemainTimediv. innerHTML = h; h = h. replace (// s/g, ""); // remove the Unicode blank character showRemainTimediv from the string. innerHTML = h; if (h = "00:00:00") {form1.submit ();}}}}

(7) to enable automatic timing after page loading, you need to apply window through the onload event in the <body> label on the Start exam page. the setInterval () method calls the showStartTime () function and the showRemailTime () function. The key code is as follows:

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

The above is a small series of Ajax technology-based countdown and automatic submission of exam-related knowledge, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!