1.概述
在開發網路考試系統時，考試計時並自動認可試卷是必不可少的功能。由於在答卷過程中，試卷不能重新整理，所以需要使用Ajax實現無重新整理操作。運行本執行個體，訪問準備考試頁面index.jsp，在該頁面中，單擊“開始考試”按鈕，將開啟新視窗顯示開始考試的頁面，如圖10.1所示，頁面會自動計時，當考試時間結束時，將自動提價試卷。
2.技術要點
主要是利用Ajax非同步提交技術和Servlet技術實現的。顯示在考試頁面中的計時時間是在Servlet中設定的，需要通過Ajax的非同步提交不斷的請求Servlet，從而獲得伺服器返回的最新的計時時間的資料。為了便於維護和代碼的重用，可以將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('StartExam?action=startExam','','width=750,height=500,scrollbars=1');}
（2）建立名為StartExam的Servlet實作類別，該類用建立考試的開始時間和剩餘時間。在該類中，建立一個全域變數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類中，編寫用於將頁面轉寄到開始考試頁面的方法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 ){showStartTimediv.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;showRemainTimediv.innerHTML=h;h=h.replace(/\s/g,""); //去除字串中的Unicode空白符showRemainTimediv.innerHTML=h;if(h=="00:00:00"){form1.submit();}}}}
（7）為了實現頁面載入後自動計時，需要在開始考試頁面的 <body>標籤中通過onload事件應用window.setInterval()方法調用showStartTime()函數和showRemailTime()函數，關鍵代碼如下：
<body onLoad="showStartTime();showRemainTime();" onkeydown="keydown()">
以上所述是小編給大家介紹的基於Ajax技術實現考試倒計時並自動認可試卷 的相關知識，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
