Ajax technology-Test timing and automatic submission of quiz papers

1. Overview

When developing a network test system, it is essential that the exam is timed and automatically submitted to the quiz paper. Since the quiz paper cannot be refreshed during the answer, there is no refresh required using AJAX. Run this instance, access the Prepare exam page index.jsp, on this page, click the "Start Exam" button, the new window will open to show the beginning of the exam page, 10.1, the page will automatically time, when the end of the test, will automatically raise the test paper.

2. Technical Highlights

The main use of Ajax asynchronous submission technology and servlet technology implementation. The timings displayed in the exams page are set in the servlet and require an asynchronous commit through Ajax to continually request the servlet, thus obtaining the latest time-out data returned by the server. In order to facilitate maintenance and code reuse, the Ajax request method can be encapsulated into a JS file, the method can be used as a public method, can be called directly in the program.

3. Specific implementation code

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

/** * Build XMLHttpRequest object and Request Server * @param reqtype: Request type (GET or post) * @param URL: Server address * @param async: Asynchronous Request * @param resfun: callback function for response * @param parameter: Request parameter * @return: XMLHttpRequest Object*/functionHttpRequest (reqtype,url,async,resfun,parameter) {varRequest =NULL; if(Window. XMLHttpRequest) {//non-IE browser, create XMLHttpRequest objectRequest =NewXMLHttpRequest (); }Else if(Window. ActiveXObject) {//IE Browser, create XMLHttpRequest object            varArrsignatures = ["Msxml2.xmlhttp", "Microsoft.XMLHTTP", "Microsoft.XMLHTTP", "MSXML2". xmlhttp.5.0 "," MSXML2. xmlhttp.4.0 "," MSXML2. xmlhttp.3.0 "," MSXML2. XMLHTTP "];  for(vari = 0; i < arrsignatures.length; i++) {Request=NewActiveXObject (Arrsignatures[i]); if(Request | |typeof(Request) = = "Object" )                         Break; }      }      if(Request | |typeof(Request) = = "Object" ){            if(reqtype.tolowercase () = = "POST") {//Submit as PostRequest.open (Reqtype, URL,true);//open a server connection                  //set MIME typeRequest.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); Request.onreadystatechange= Resfun;//set the callback function to handle the responseparameter = encodeURI (parameter);//encode a parameter stringRequest.send (parameter);//Send Request            }            Else{//Submit in Get modeurl = url+ "?" +parameter; Request.open (reqtype, URL,true);//open a server connectionRequest.onreadystatechange = Resfun;//Response callback functionRequest.send (NULL);//Send Request            }      }      Else{alert ("The browser does not support ajax! " ); }          returnrequest;}

(1) Create a new index.jsp page, which is the initial page for user access. The main page contains a "Start Test" button, the button's OnClick event will invoke 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 that uses the start time and time remaining to create the exam. In this class, create a global variable examtime, which is used to record the test time, and the value of the variable is set in Web. XML, with the following key code:

<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 the Method Startexam () used to forward the page to the start exam page. The key code is as follows:

void Startexam (httpservletrequest request,httpservletresponse response)        throws servletexception,ioexception{         = request.getsession ();        Request.setattribute ("Time", examtime);                 // Save test time        Session.setattribute ("StartTime1",new Date (). GetTime ());   // the number        of milliseconds to save the current time Request.getrequestdispatcher ("startexam.jsp"). Forward (request, response);}

(4) New showstarttime.jsp page for output 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 time remaining for the timer. The key code is as follows:

<% @page contenttype= "text/html" pageencoding= "GBK"%>${showremaintime}

(6) The New Start test Page startexam.jsp page, where you request the Startexam class by calling the Ajax request method to get the start time and time remaining for the exam. The key code is as follows:

     varrequest1=false; varRequest2 =false; //request servlet to get start time            functionShowstarttime () {varurl = "Startexam"; //you need to add &nocache= "+new Date (). GetTime (), otherwise the time does not automatically move around the situation                  varParameter= "action=showstarttime&nocache=" +NewDate (). GetTime (); Request1= HttpRequest ("Post", URL,true, Callbackfunc,parameter); }            //callback function            functionCallbackfunc () {if(request1.readystate==4 ){                     if(Request1.status = = 200) {showstarttimediv.innerhtml=Request1.responsetext; }                  }            }            //request servlet for remaining time            functionShowremaintime () {varurl = "Startexam"; varParameter= "action=showremaintime&nocache=" +NewDate (). GetTime (); Request2= HttpRequest ("Post", URL,true, Callbackfunc_r,parameter); }            //callback function            functionCallbackfunc_r () {if(request2.readystate==4 ){                     if(Request2.status = = 200) {h=Request2.responsetext; Showremaintimediv.innerhtml=h; H=h.replace (/\s/g, "");//to remove Unicode whitespace characters from a stringShowremaintimediv.innerhtml=h; if(h== "00:00:00") {form1.submit (); }                        }                  }            }

(7) In order to achieve automatic timing after page loading, the Window.setinterval () method is called via the OnLoad event in the <body> tab of the start Exam page to invoke the Showstarttime () function and Showremailtime () function, the key code is as follows:

<body onload= "Showstarttime (); Showremaintime ();" onkeydown= "KeyDown ()" >

Ajax technology-Test timing and automatic submission of quiz papers