Ajax.PeriodicalUpdater - Ajaxで指定エレメントの内容を定期的に書き換える

スポンサードリンク

この機能を実行するにはprototype.jsが必要です

構文

Ajax.PeriodicalUpdater(container, url, options)

引数: container=更新する場所のＩＤ, url=Ajaxで取得するＵＲＬ, options=オプション

「Ajaxで指定エレメントの内容を定期的に書き換える」サンプルコード

<html>

<head>
<title>Ajax.PeriodicalUpdater - Ajaxで指定エレメントの内容を定期的に書き換える</title>
</head>

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript">
var myajax;
function execute() {
	myajax = new Ajax.PeriodicalUpdater(
		"container",
		"/samples/ajax/test.php",
		{
			"method": "get",
			"parameters": "p=hoge",
			frequency: 5, // 5秒ごとに実行
			onSuccess: function(request) {
				// 成功時の処理を記述
				// alert('成功しました');
				// jsonの値を処理する場合↓↓
				//  var json;
				//  eval("json="+request.responseText);
				
				// ↓IEでもキャッシュを読み込まずに毎回リモート接続を実行するためのコード(パラメータの書き換え)
				var str = myajax.options.parameters;
				var hash = str.parseQuery();
				hash["ajax_request_id"] = Math.random();
				hash = $H(hash);
				myajax.options.parameters = hash.toQueryString();
			},
			onComplete: function(request) {
				// 完了時の処理を記述
				// alert('読み込みが完了しました');
				// jsonの値を処理する場合↓↓
				//  var json;
				//  eval("json="+request.responseText);
			},
			onFailure: function(request) {
				alert('読み込みに失敗しました');
			},
			onException: function (request) {
				alert('読み込み中にエラーが発生しました');
			}
		}
	);
}
function stop() {
	if (myajax != null && myajax != undefined) {
		myajax.stop();
	}
}
</script>
<body>
<div id="container">content</div>
<button onclick="execute()">Ajax開始</button>
<button onclick="stop()">停止する</button>
</body>

<!--
サーバサイドスクリプト(test.php)

<?php header("Content-type:text/html;charset=utf-8"); ?>
<html>
<body>
<?php
echo "server response:".date("Y/m/d H:i:s")."<br>";
echo "request:".$_SERVER["REQUEST_URI"];
?>
</body>
</html>
-->

</html>

スポンサードリンク

忘却曲線を使って「Ajax.PeriodicalUpdater」を確実に記憶に残す

「Ajax.PeriodicalUpdaterの動作デモ」

新しいウィンドウで実行 | スクリプトを編集＆実行 - スクリプトをWEB上で編集＆動作確認することが出来ます。

Ajax.PeriodicalUpdater - Ajaxで指定エレメントの内容を定期的に書き換える

構文

「Ajaxで指定エレメントの内容を定期的に書き換える」サンプルコード

「Ajax.PeriodicalUpdaterの動作デモ」

関連ページ

ナビゲーション