Implementierung des Prüfungscountdowns und automatische Übermittlung von Prüfungsunterlagen auf Basis der Ajax-Technologie-js-Tutorial-php.cn

Implementierung des Prüfungscountdowns und automatische Übermittlung von Prüfungsunterlagen auf Basis der Ajax-Technologie

韦小宝

Freigeben： 2018-01-09 09:52:27

Original

1760 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich relevante Informationen zur Implementierung des Prüfungscountdowns und zur automatischen Einreichung von Testpapieren basierend auf der Ajax-Technologie vor. Er ist sehr gut und hat den Wert einer Referenz und des Lernens von Ajax. Freunde, die sich für Ajax interessieren, können darauf verweisen

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 in gezeigt der folgende Code:

/**
* 构建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;
}

Nach dem Login kopieren

(1) Erstellen Sie eine neue index.jsp-Seite, die die erste Seite ist von Benutzern besucht. 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(&#39;StartExam?action=startExam&#39;,&#39;&#39;,&#39;width=750,height=500,scrollbars=1&#39;);
}

Nach dem Login kopieren

(2) Erstellen Sie eine neue Servlet-Implementierungsklasse mit dem Namen StartExam, die die Startzeit und die verbleibende Zeit zum Erstellen der Prüfung verwendet. 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>

Nach dem Login kopieren

(3) Schreiben Sie in der StartExam-Klasse 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);
}

Nach dem Login kopieren

(4) Erstellen Sie eine neue showStartTime.jsp-Seite zur Ausgabe Timing-Startzeit. Der Schlüsselcode lautet wie folgt:

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

Nach dem Login kopieren

(5) Erstellen Sie eine neue showRemainTime.jsp-Seite zur Ausgabe verbleibende Zeit. Der Schlüsselcode lautet wie folgt:

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

Nach dem Login kopieren

(6) Erstellen Sie eine neue Startprüfungsseite startExam.jsp , auf dieser Seite Fordern Sie die StartExam-Klasse an, indem Sie die Ajax-Anforderungsmethode aufrufen, um die Startzeit und die verbleibende Zeit der Prüfung zu erhalten. 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();
}
}
}
}

Nach dem Login kopieren

(7) Um ein automatisches Timing nach der Seite zu erreichen geladen, müssen Sie die Prüfungsseite starten. Wenden Sie im Tag die Methode window.setInterval() über das Ereignis onload an, um die Funktionen showStartTime() und showRemailTime() aufzurufen. Die Schlüsselcodes lauten wie folgt:

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

Nach dem Login kopieren

Das Obige ist das Wissen, das Ihnen der Herausgeber über die Implementierung des Prüfungscountdowns und die automatische Einreichung von Prüfungsunterlagen vermittelt über Ajax-Technologie. Ich hoffe, es wird für alle hilfreich sein!

Verwandte Empfehlungen:

Ajax-Schnelllösung Der Parameter ist zu lang und kann nicht erfolgreich übermittelt werden. So lösen Sie ihn

Ajax-Übermittlung Die Formularseite des Formulars wird weiterhin aktualisiert j Lösung

AJAX-Anzeige wird geladen und die Seite zur Ebenenverdeckung wird angezeigt

Das obige ist der detaillierte Inhalt vonImplementierung des Prüfungscountdowns und automatische Übermittlung von Prüfungsunterlagen auf Basis der Ajax-Technologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!