Ajax
prototype.jsを使ったサンプルスクリプトです。
刻々と変化する数値や更新される内容などをなるべく定期的(あるいはリアルタイム)にアップデートしたいと思うときはありませんか?
prototype.jsのAjax.PeriodicalUpdaterを使うと、たった数行のコードでそれができてしまうので、サンプルを書いておきます。
ここでは、PHPのプログラムで時刻を表示し、その時刻をAjaxを使用するHTMLファイルで表示するというサンプルです。
用意するのは、下記の2つのファイルです。
time.php…時刻用のプログラム
time_updater.html…時刻を表示させるhtmlファイル(Ajaxはここに書きます)
prototype.jsは事前に取得して(prototype.js)time_updater.htmlが読み込めるように設置しておきます。
PHPが動作する環境も、もちろん必要です。
それぞれの内容を下記のようにします。
例:time.php PHPプログラムで時刻を表示させる
<?php
$now=date('r');
print $now;
?>
例:time_updater.html…上記のphpプログラムから時刻を受け取って表示する
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="prototype.js"></script>
<script>
var myAjax=new Ajax.PeriodicalUpdater(
'time','time.php',
{
method:’get’,
frequency: 1,
decay: 2,
}
);
</script>
</head>
<body>
<div id="time"> </div>
</body>
</html>
time_updater.htmlを実行すると、時刻が刻々と変化するようになりましたか?
time_updater.html内のAjax.PeriodicalUpdaterの引数の意味を書いておきます。
‘time’ …
とあるように、html内のどこに書き込むか
‘time.php’ …どのファイルを取得するか
method:’get’…どの方法で取得するか
frequency: 1 …どのような頻度で更新するか 単位は秒です。つまり、ここでは1秒ごとに内容が更新されます。
decay: 2 …上記のfrequencyで更新がされますが、内容が変わらなくっても毎秒更新してたらサーバーへかかる負荷とか大変だよね?!というわけで、このパラメーターの登場です。
GETしにいき、更新がなければ、次はこのdecayで指定した値をかけた秒数後に見に行くのです。
と説明しても分かりにくいと思うので、例をあげます。
このサンプルでは時間を表示するので、毎秒変わってしまうので、別のサンプルを考えます。
たとえば、登録してある商品内容などを定期的に更新するなどの場合、しばらくは変わりませんよね。
PeriodicalUpdaterが取得するファイルを取得しにいき、その応答内容が変わらない場合、
1秒×2 =2秒後
に次は見に行きます。また内容が変わらなければ、
2秒×2 =4秒後
に次に見に行きます。
この2、という数字がdecayで指定する数字です。
内容が変わっていれば、貯められた数字(4秒後)などはリセットされ、最初の1秒からカウントが始まります。
細かくは、
http://www.prototypejs.org/api/ajax/periodicalUpdater
で見てください。
ちなみに、IEでは上記だけではアップデートがされません。
下記のサイトに解決方法がありますので、参考にしてみてください。
http://phpspot.org/blog/archives/2006/12/prototypejsajax.html