Ajax implementiert den Prüfungscountdown und die automatische Einreichung von Prüfungsunterlagen

Dieses Mal bringe ich Ihnen die Ajax-Funktion zum Implementieren des Prüfungscountdowns und zum automatischen Einreichen des Testpapiers. Was sind die Vorsichtsmaßnahmen für die Ajax-Funktion zum Implementieren des Prüfungscountdowns und zum automatischen Einreichen des Testpapiers? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. Übersicht

Bei der Entwicklung eines Online-Prüfungssystems sind die Prüfungszeitplanung und die automatische Einreichung von Prüfungsunterlagen wesentliche Funktionen. Da die Testarbeit während des Antwortvorgangs nicht aktualisiert werden kann, muss Ajax verwendet werden, um den aktualisierungsfreien Betrieb zu implementieren. Führen Sie dieses Beispiel aus und greifen Sie auf die Prüfungsvorbereitungsseite index.jsp zu. Klicken Sie auf dieser Seite auf die Schaltfläche „Prüfung starten“, um die Seite zum Starten der Prüfung anzuzeigen, wie in Abbildung 10.1 dargestellt der Zeitpunkt, an dem die Prüfungszeit endet, wird der Preis der Prüfungsarbeit automatisch erhöht.

2. Technische Punkte

Es wird hauptsächlich mithilfe der asynchronen Übermittlungstechnologie Ajax und der Servlet-Technologie implementiert. Die auf der Prüfungsseite angezeigte Timing-Zeit wird im Servlet festgelegt. Es ist erforderlich, das Servlet kontinuierlich über die asynchrone Ajax-Übermittlung anzufordern, um die neuesten vom Server zurückgegebenen Timing-Zeitdaten zu erhalten. Um die Wartung und Wiederverwendung des Codes zu erleichtern, kann die Ajax--Anfragemethode in eine JS-Datei gekapselt werden. Diese Methode kann als öffentliche Methode verwendet und bei Verwendung im Programm direkt aufgerufen werden.

3. Spezifischer Implementierungscode

Konstruieren Sie das XMLHttpRequest-Objekt und die Anforderungsmethode in der JS-Datei, wie im folgenden Code gezeigt:

/**
* 构建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) Erstellen Sie eine neue index.jsp-Seite, die die erste Seite ist, die von Benutzern besucht wird. Die Seite enthält hauptsächlich eine Schaltfläche „Untersuchung starten“. Das Onclick-Ereignis dieser Schaltfläche ruft die JavaScript-Funktion auf, die das Prüfungsfenster öffnet. Der Schlüsselcode lautet wie folgt:

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

(2) Erstellen Sie eine neue Servlet-Implementierungsklasse mit dem Namen StartExam. Diese Klasse verwendet die Startzeit und die verbleibende Zeit, um die Prüfung zu erstellen. Erstellen Sie in dieser Klasse eine globale Variable examTime, um die Prüfungszeit aufzuzeichnen. Der Schlüsselcode lautet wie folgt:

<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 der StartExam-Klasse Schreiben Sie die Methode startExam() zum Weiterleiten der Seite an die Startprüfungsseite. Der Schlüsselcode lautet wie folgt:

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) Erstellen Sie eine neue showStartTime.jsp-Seite, um die Startzeit des Timings auszugeben. Der Schlüsselcode lautet wie folgt:

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

(5) Erstellen Sie eine neue showRemainTime.jsp-Seite, um die verbleibende Zeit auszugeben. Der Schlüsselcode lautet wie folgt:

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

(6) Erstellen Sie eine neue Startprüfungsseite startExam.jsp, in der die StartExam-Klasse durch Aufrufen der Ajax-Anforderungsmethode angefordert wird, um die Startzeit und die verbleibende Zeit zu erhalten Zeitpunkt der Prüfung. Der Schlüsselcode lautet wie folgt:

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) Um das automatische Timing nach dem Laden der Seite zu implementieren, müssen Sie die Methode window.setInterval() über das Onload-Ereignis im < body>-Tag der Startprüfungsseite zum Aufrufen der Funktionen showStartTime() und showRemailTime() verwenden, lautet der Schlüsselcode wie folgt:

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

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax Restful Interface-Methode zur Übertragung von Json-Daten

So fügen Sie XML hinzu, löschen und ändern Dateien mit Ajax Check

Das obige ist der detaillierte Inhalt vonAjax implementiert den Prüfungscountdown und die automatische Einreichung von Prüfungsunterlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!