Mise en œuvre du compte à rebours des examens et soumission automatique des copies de test basées sur la technologie Ajax

Cet article présente principalement des informations pertinentes sur la mise en œuvre du compte à rebours des examens et la soumission automatique des épreuves basées sur la technologie Ajax. Il est très bon et a la valeur de référence et d'apprentissage d'Ajax. Les amis qui sont intéressés par Ajax peuvent s'y référer

1. Présentation

Lors du développement d'un système d'examen en ligne, le calendrier des examens et la soumission automatique des copies de test sont des fonctions essentielles. Étant donné que le papier de test ne peut pas être actualisé pendant le processus de réponse, Ajax doit être utilisé pour implémenter un fonctionnement sans actualisation. Exécutez cet exemple et accédez à la page de préparation à l'examen index.jsp. Dans cette page, cliquez sur le bouton « Démarrer l'examen ». Une nouvelle fenêtre s'ouvrira pour afficher la page de démarrage de l'examen, comme le montre la figure 10.1. l'heure à laquelle la période d'examen se termine. À ce moment-là, le prix de l'épreuve sera automatiquement augmenté.

2. Points techniques

Il est principalement implémenté à l'aide de la technologie de soumission asynchrone Ajax et de la technologie Servlet. L'heure de synchronisation affichée sur la page d'examen est définie dans le servlet, et il est nécessaire de demander en permanence au servlet via la soumission asynchrone Ajax pour obtenir les dernières données d'heure de synchronisation renvoyées par le serveur. Afin de faciliter la maintenance et la réutilisation du code, la méthode de requête Ajax peut être encapsulée dans un fichier JS. Cette méthode peut être utilisée comme méthode publique et peut être appelée directement lorsqu'elle est utilisée dans le programme.

3. Code d'implémentation spécifique

Construisez l'objet XMLHttpRequest et la méthode de requête dans le fichier JS, comme indiqué dans le code suivant :

/**
* 构建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) Créer une nouvelle page index.jsp, qui est la page initiale visités par les utilisateurs. La page contient principalement un bouton "Démarrer l'examen". L'événement onclick du bouton appellera la fonction JavaScript qui ouvre la fenêtre d'examen. Le code clé est le suivant :

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>

(3) Dans la classe StartExam, écrivez la méthode startExam() pour transférer la page vers la page de début de l'examen. Le code clé est le suivant :

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) Créez une nouvelle page showStartTime.jsp pour afficher le heure de début du chronométrage. Le code clé est le suivant :

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

(5) Créez une nouvelle page showRemainTime.jsp pour afficher le temps restant. Le code clé est le suivant :

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

(6) Créer une nouvelle page de début d'examen page startExam.jsp , dans cette page, demandez la classe StartExam en appelant la méthode de requête Ajax pour obtenir l'heure de début et le temps restant de l'examen. Le code clé est le suivant :

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

(7) Afin d'obtenir un timing automatique une fois la page terminée chargé, vous devez démarrer la page d'examen. Dans la balise , appliquez la méthode window.setInterval() via l'événement onload pour appeler la fonction showStartTime() et la fonction showRemailTime(). 🎜>

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

Ce qui précède correspond aux connaissances que l'éditeur vous présente sur la mise en œuvre du compte à rebours des examens et la soumission automatique des épreuves en fonction sur la technologie Ajax, j'espère que cela sera utile à tout le monde !

Solution rapide Ajax Le paramètre est trop long et ne peut pas être soumis avec succès

Soumission Ajax. La page du formulaire sera toujours actualisée j Solution

L'affichage AJAX se charge et la page d'occlusion de couche apparaît

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!