ホームページ > 記事 > ウェブフロントエンド > Ajax技術に基づく試験カウントダウンの実装と試験問題の自動提出

Ajax技術に基づく試験カウントダウンの実装と試験問題の自動提出

韦小宝オリジナル: 2018-01-09 09:52:271706ブラウズ

この記事は、Ajax テクノロジーに基づいた試験カウントダウンの実装とテスト用紙の自動提出に関する関連情報を主に紹介しています。非常に優れており、Ajax に興味のある友人は参考にしてください。 . 概要

オンライン試験システムを開発する場合、試験タイミングと試験問題の自動提出は必須の機能です。解答プロセス中に試験用紙を更新できないため、Ajax を使用して更新なしの操作を実装する必要があります。この例を実行し、試験準備ページのindex.jspにアクセスします。このページで、「試験の開始」ボタンをクリックすると、図10.1に示すように、試験を開始するページが表示されます。試験時間が終了すると、自動的に試験用紙の価格が上がります。

2. 技術的なポイント

は、主にAjax非同期送信技術とサーブレット技術を使用して実装されています。試験ページに表示される計測時間はサーブレットに設定されており、サーバーから返される最新の計測時間データを取得するには、Ajax 非同期送信を通じてサーブレットを継続的にリクエストする必要があります。メンテナンスとコードの再利用を容易にするために、Ajax の request メソッドを JS ファイルにカプセル化できます。このメソッドはパブリックメソッドとして使用でき、プログラム内で使用するときに直接呼び出すことができます。

3. 特定の実装コード

次のコードに示すように、JS ファイルで XMLHttpRequest オブジェクトとリクエストメソッドを構築します。 Index.jsp ページ、このページはユーザーが最初に訪問するページです。このページには主に「試験開始」ボタンが含まれており、このボタンの onclick イベントは試験ウィンドウを開く JavaScript 関数を呼び出します。キーコードは次のとおりです。

(2) StartExam クラスという名前の新しいサーブレット実装。試験の開始時刻と残り時間を作成するために使用されます。このクラスでは、試験時間を記録するグローバル変数 ExamTime を作成し、この変数の値を web に設定し、ページを試験開始ページに転送するメソッド startExam() を記述します。キーコードは次のとおりです。

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

(4) 計時開始時刻を出力する新しい showStartTime.jsp ページを作成します。キーコードは以下の通りです:

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

(5) 残り時間を出力する新しいshowRemainTime.jspページを作成します。キーコードは次のとおりです。

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

(6) 新しい開始試験ページ startExam.jsp ページを作成します。このページでは、Ajax リクエストメソッドを呼び出して開始時間と開始時間を取得することによって 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);
}

(7) ページがロードされた後に自動タイミングを実装するには、< の onload イベントを通じて window.setInterval() メソッドを適用する必要があります。 showStartTime() 関数と showRemailTime() 関数を呼び出すための試験開始ページの ;body> タグ、キーコードは次のとおりです:

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

上記は、実装するためにエディターによって導入された関連知識です。試験カウントダウンと Ajax テクノロジに基づく試験用紙の自動提出が皆様のお役に立てば幸いです。

Ajax技術に基づく試験カウントダウンの実装と試験問題の自動提出

関連記事