Ajax implémente le compte à rebours des examens et la soumission automatique des copies de test

Cette fois, je vais vous présenter la fonction d'Ajax pour mettre en œuvre le compte à rebours de l'examen et soumettre automatiquement la copie d'examen. Quelles sont les précautions pour que l'Ajax mette en œuvre le compte à rebours de l'examen et soumette automatiquement la fonction de copie d'examen. . Ce qui suit est un cas pratique, jetons un coup d'oeil.

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éez une nouvelle page index.jsp, qui est la page initiale visitée par les utilisateurs. La page contient principalement un bouton "Démarrer l'examen". L'événement onclick de ce 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');
}

(2) Créer un nouveau. Classe d'implémentation de servlet nommée StartExam , cette classe utilise l'heure de début et le temps restant pour créer l'examen. Dans cette classe, créez une variable globale examTime pour enregistrer l'heure de l'examen. La valeur de cette variable est définie dans web.xml. Le code clé est le suivant :

<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émarrage 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 l'heure de début du timing. 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éez une nouvelle page de début d'examen startExam.jsp, dans laquelle la classe StartExam est demandée en appelant la méthode de requête Ajax pour obtenir l'heure de début et l'heure restante. moment 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'implémenter le timing automatique après le chargement de la page, vous devez appliquer la méthode window.setInterval() via l'événement onload dans le < body> de la page de démarrage de l'examen pour appeler la fonction showStartTime() et la fonction showRemailTime(), le code clé est le suivant :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. .Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Méthode d'interface reposante Ajax pour transmettre des données Json

Comment ajax ajoute, supprime et modifie des fichiers XML Vérifiez

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!