Ajax技術に基づいて、試験のカウントダウンを実現し、自動的に答案用紙を提出します。

1.概要
オンラインテストシステムを開発するには、試験時間と自動で答案用紙を提出することが不可欠です。答案用紙の更新ができないため、Ajaxを使って更新なしを実現する必要があります。この例を実行して、アクセス準備試験ページindex.jspにおいて、このページで「試験開始」ボタンをクリックすると、試験開始ページが図10.1に示されているように、ページは自動的に時間がかかり、試験時間が終わると、自動的に値上げされます。
2.技術上のポイント
主にAjax非同期提出技術とServlet技術を利用して実現された。テストページに表示されるタイミングはServletで設定されており、Ajaxの非同期を通じてServletを要求することで、サーバから最新のタイムアウトデータを取得する必要があります。メンテナンスとコードの再利用を容易にするために、Ajaxの要求方法をJSファイルにパッケージすることができます。この方法は共通の方法として、プログラムで使用する時に直接呼び出すことができます。
3.具体的な実現コード
JSファイルにXMLttpRequestオブジェクトを構築し、要求方法を下記のコードに示します。

/**
*   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）ユーザーアクセスの初期ページであるindex.jspページを新規作成します。ページには主に「試験開始」ボタンが含まれています。このボタンのOclickイベントは試験ウィンドウを開くJavaScript関数を呼び出します。キーコードは以下の通りです。

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

（2）StartExamというServlet実装クラスを新たに作成します。このクラスは作成試験の開始時間と残り時間を使います。このクラスでは、試験時間を記録するためにグローバル変数examTimeを作成します。この変数の値はweb.xmlで設定されています。キーコードは以下の通りです。

<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）StartExam類では、ページを試験開始ページに転送するための方法startExam（）を作成します。キーコードは以下の通りです。

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）showStartTime.jspページを新設し、時間開始時間を出力する。キーコードは以下の通りです。

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

（5）show RemanTime.jspページを新設し、時間の残り時間を出力する。キーコードは以下の通りです。

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

（6）試験開始ページstartExam.jspページを新設し、このページでAjax要求方法を呼び出してStartExam類を要求し、試験の開始時間と残り時間を取得する。キーコードは以下の通りです。

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 ){
showStartTimediv.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;
showRemainTimediv.innerHTML=h;
h=h.replace(/\s/g,""); //       Unicode   
showRemainTimediv.innerHTML=h;
if(h=="00:00:00"){
form1.submit();
}
}
}
} 

（7）ページローディング後の自動時間計測を実現するためには、試験開始ページの「body」タブでオンラインイベントを通じてWindows.set Interval（）メソッドからshow StartTime（）関数とshow Remail Time（）関数を呼び出す必要があります。キーコードは以下の通りです。

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

以上はAjax技術に基づいて試験のカウントダウンを実現し、自動的に答案用紙を提出することについての知識を紹介しました。皆様に何か質問があれば、メッセージをください。ここでも私たちのサイトを応援してくれてありがとうございます。