リクエストしてレスポンスが返ってくるまでタイマーでメーター(?)を表示する


※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

var time;
Element.observe(window, 'load', function(){
// レスポンスが返ってくるまでの処理を呼び出す
timerStart();
// リクエストするパスの設定
var requestPath = '/home/html/test.html';
// リクエストパラメータの設定
var param = 'name=test&age=20';
// ajaxRequestオブジェクトの生成
var ajaxObj = 
	new Ajax.Request(
		requestPath, 
		{
			method: 'get',
			parameters: param,
			// 通信完了時の処理
			onComplete: complete,
			// 通信失敗時の処理
			onFailure: fail
		}
	);
}

function timerStart(){
time = 0;
// タイマーで繰り返し(1秒おきにcount()呼び出し)
objCount = new PeriodicalExecuter(count, 1);
}

function count(){
// タイマー作動中の処理
time++;
$('field').innerHTML = time + '秒';
}

function complete(req) {
// タイマー停止
objCount.stop();
// レスポンスオブジェクトの取得
var resObj = eval(req.responseText);
finished();
}

function fail(){
// タイマー停止
objCount.stop();
// 失敗時の処理
alert('失敗しました');
}

function finished(){
// 完了後の処理
alert('通信が完了しました');
}