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