집 > 기사 > 웹 프론트엔드 > Ajax 기술을 기반으로 시험 카운트다운 구현 및 시험지 자동 제출

Ajax 기술을 기반으로 시험 카운트다운 구현 및 시험지 자동 제출

韦小宝원래의: 2018-01-09 09:52:271765검색

이 글은 Ajax 기술을 기반으로 시험 카운트다운 구현 및 시험지 자동 제출에 대한 관련 정보를 주로 소개하고 있어 참고 및 ajax 학습의 가치가 있습니다.

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에 설정되어 있으며, 페이지를 시험 시작 페이지로 전달하는 startExam() 메서드를 작성합니다. 키 코드는 다음과 같습니다.

<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>

(4) 새로운 showStartTime.jsp 페이지를 생성하여 타이밍 시작 시간을 출력합니다. 키 코드는 다음과 같습니다.

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

(5) 남은 시간을 출력하기 위해 새로운 showRemainTime.jsp 페이지를 생성합니다. 키 코드는 다음과 같습니다.

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

(6) 새로운 시작 시험 페이지 startExam.jsp 페이지를 생성합니다. 여기서 StartExam 클래스는 Ajax 요청 메서드를 호출하여 시작 시간과 데이터를 가져옵니다. 시험 남은 시간. 키 코드는 다음과 같습니다.

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

(7) 페이지 로드 후 자동 타이밍을 구현하려면 <의 onload 이벤트를 통해 window.setInterval() 메서드를 적용해야 합니다. 시험 시작 페이지의 ;body> 태그에서 showStartTime() 함수와 showRemailTime() 함수를 호출하는 키 코드는 다음과 같습니다.

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

위는 구현하기 위해 편집자가 소개한 관련 지식입니다. Ajax 기술을 기반으로 한 시험 카운트다운 및 시험지 자동 제출이 모두에게 도움이 되었으면 좋겠습니다.

Ajax 기술을 기반으로 시험 카운트다운 구현 및 시험지 자동 제출

관련 기사