首頁 web前端 js教程 基於Ajax技術實現考試倒數並自動提交試卷

基於Ajax技術實現考試倒數並自動提交試卷

Jan 09, 2018 am 09:52 AM
ajax 實現 考試

這篇文章主要介紹了基於Ajax技術實現考試倒數計時並自動提交試卷的相關資料,非常不錯,具有參考和學習ajax的價值,對ajax感興趣的朋友可以參考下

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(&#39;StartExam?action=startExam&#39;,&#39;&#39;,&#39;width=750,height=500,scrollbars=1&#39;);
}
登入後複製


(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 ){
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)為了實現頁面載入後自動計時,需要在開始考試頁面的< ;body>標籤中透過onload事件應用window.setInterval()方法呼叫showStartTime()函數和showRemailTime()函數,關鍵程式碼如下:


<body onLoad="showStartTime();showRemainTime();" onkeydown="keydown()">
登入後複製


以上所述是小編給大家介紹的基於Ajax技術實現考試倒數計時並自動提交試卷的相關知識,希望對大家有所幫助!

相關推薦:

ajax快速解決參數過長無法提交成功如何解決

Ajax提交Form表單頁面仍會刷新j解決方法

AJAX顯示載入中並彈出圖層遮擋頁面

以上是基於Ajax技術實現考試倒數並自動提交試卷的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

華為手機如何實現雙微信登入? 華為手機如何實現雙微信登入? Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入?隨著社群媒體的興起,微信已成為人們日常生活中不可或缺的溝通工具之一。然而,許多人可能會遇到一個問題:在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說,實現雙微信登入並不困難,本文將介紹華為手機如何實現雙微信登入的方法。首先,華為手機自帶的EMUI系統提供了一個很方便的功能-應用程式雙開。透過應用程式雙開功能,用戶可以在手機上同

PHP程式設計指南:實作斐波那契數列的方法 PHP程式設計指南:實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具,能夠支援多種不同的程式設計邏輯和演算法。其中,實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中,將介紹如何使用PHP程式語言來實作斐波那契數列的方法,並附上具體的程式碼範例。斐波那契數列是一個數學上的序列,其定義如下:數列的第一個和第二個元素為1,從第三個元素開始,每個元素的值等於前兩個元素的和。數列的前幾元

PHP 與 Ajax:建立一個自動完成建議引擎 PHP 與 Ajax:建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎:伺服器端腳本:處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本:發送Ajax請求並顯示建議(autocomplete.js)。實戰案例:在HTML頁面中包含腳本並指定search-input元素識別碼。

如何在華為手機上實現微信分身功能 如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視,微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號,方便管理和使用。在華為手機上實現微信分身功能並不困難,只需要按照以下步驟操作即可。第一步:確保手機系統版本和微信版本符合要求首先,確保你的華為手機系統版本已更新至最新版本,以及微信App

掌握Golang如何實現遊戲開發的可能性 掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

在現今的軟體開發領域中,Golang(Go語言)作為一種高效、簡潔、並發性強的程式語言,越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發,並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言,Golang正在建構大型遊戲系統

如何解決jQuery AJAX報錯403的問題? 如何解決jQuery AJAX報錯403的問題? Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題?在開發網頁應用程式時,經常會使用jQuery來發送非同步請求。然而,有時在使用jQueryAJAX時可能會遇到錯誤代碼403,表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的,但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題,並提供具體的程式碼範例。一、使

PHP遊戲需求實作指南 PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實現指南隨著網路的普及和發展,網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲,而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求,並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中,遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性,例如姓名、等級、經驗值等,並提供方法來操作這些

如何使用Ajax從PHP方法取得變數? 如何使用Ajax從PHP方法取得變數? Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景,透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中,將介紹如何使用Ajax從PHP方法中取得變量,並提供具體的程式碼範例。首先,我們需要寫一個PHP檔案來處理Ajax請求,並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼:

See all articles