PeriodicalUpdaterを使って時計を作る

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

カテゴリーAjax

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です