Ajax は試験カウントダウンと試験用紙の自動提出を実装します-jsチュートリアル-php.cn

Ajax は試験カウントダウンと試験用紙の自動提出を実装します

php中世界最好的语言

リリース： 2018-04-04 11:40:28

オリジナル

3275 人が閲覧しました

今回は、試験カウントダウンを実装し、試験用紙を自動的に提出するための Ajax 機能について説明します。試験カウントダウンを実装し、試験用紙を自動的に提出するための注意事項について説明します。見てみましょう。

1. 概要

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

2. 技術的なポイント

は、主にAjax非同期送信技術とサーブレット技術を使用して実装されています。試験ページに表示される計測時間はサーブレットに設定されており、サーバーから返される最新の計測時間データを取得するには、Ajax 非同期送信を通じてサーブレットを継続的にリクエストする必要があります。メンテナンスとコードの再利用を容易にするために、Ajax のrequest メソッドを 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 という名前の新しいサーブレット実装クラスを作成します。これは試験の開始時間と残り時間を作成するために使用されます。このクラスでは、試験時間を記録するグローバル変数examTimeを作成します。この変数の値は次のとおりです: web.xmlに設定されます:

 StartExam com.lh.servlet.StartExam  examTime 20

ログイン後にコピー

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

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。その他の関連記事は php 中国語 Web サイトにあります。

推奨書籍:

Ajax の RESTful インターフェイスを介して Json データを送信する方法

Ajax はどのように XML ファイルを追加、削除、変更、確認するのか

以上がAjax は試験カウントダウンと試験用紙の自動提出を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。