집 > 기사 > 웹 프론트엔드 > Ajax는 시험 카운트다운 및 시험지 자동 제출을 구현합니다.

Ajax는 시험 카운트다운 및 시험지 자동 제출을 구현합니다.

php中世界最好的语言원래의: 2018-04-04 11:40:283358검색

이번에는 시험 카운트다운을 구현하고 시험지를 자동으로 제출하는 Ajax 기능을 가져왔습니다. 시험 카운트다운을 구현하고 시험지를 자동으로 제출하는 Ajax 기능의 Notes는 무엇입니까? , 살펴 보겠습니다.

1. 개요

온라인 시험 시스템을 개발할 때 시험 시간과 시험지 자동 제출은 필수 기능입니다. 답안 과정에서는 시험지를 새로 고칠 수 없으므로 Ajax를 사용하여 새로 고침 없는 작업을 구현해야 합니다. 이 예제를 실행하고 시험 준비 페이지 index.jsp에 액세스합니다. 이 페이지에서 "시험 시작" 버튼을 클릭하면 그림 10.1과 같이 시험 시작 페이지가 표시됩니다. 시험 시간이 끝나면 시험지 가격이 자동으로 인상됩니다.

2. 기술적 포인트

는 주로 Ajax 비동기 제출 기술과 Servlet 기술을 사용하여 구현됩니다. 시험 페이지에 표시되는 타이밍 시간은 서블릿에 설정되어 있으며, 서버에서 반환하는 최신 타이밍 시간 데이터를 얻기 위해서는 Ajax 비동기 제출을 통해 지속적으로 서블릿을 요청해야 합니다. 유지 관리 및 코드 재사용을 용이하게 하기 위해 Ajax의 요청 메서드를 JS 파일로 캡슐화할 수 있습니다. 이 메서드는 공용 메서드로 사용할 수 있으며 프로그램에서 사용할 때 직접 호출할 수 있습니다.

3. 특정 구현 코드

다음 코드와 같이 JS 파일에 XMLHttpRequest 객체와 요청 메서드를 구성합니다.

/**
* 构建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 페이지를 새로 만듭니다. 사용자가 방문한 페이지. 이 페이지에는 주로 "시험 시작" 버튼이 포함되어 있습니다. 이 버튼의 onclick 이벤트는 시험 창을 여는 JavaScript 함수를 호출합니다.

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

(2) StartExam이라는 새 서블릿 구현 클래스를 만듭니다. 시험 시작 시간과 남은 시간을 생성하는 데 사용됩니다. 이 클래스에서는 시험 시간을 기록하기 위해 전역 변수인 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 클래스에서 Method 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) 남은 시간을 출력하기 위해 새로운 showRemainTime.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 ){
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) 페이지가 로드된 후 자동 타이밍을 구현하려면 시작 태그의 태그에서 onload 이벤트를 통해 window.setInterval() 메서드를 적용해야 합니다. showStartTime() 함수와 showRemailTime() 함수를 호출하는 시험 페이지의 키 코드는 다음과 같습니다.

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

이 기사의 사례를 읽으신 후 메소드를 마스터하신 것으로 보입니다. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!