Prototype-ajax-periodicalupdater

提供:Dev Guides
移動先:案内検索

プロトタイプ-AJAX PeriodicalUpdater()メソッド

このAJAXメソッドは定期的にAJAXリクエストを実行し、応答テキストに基づいてコンテナのコンテンツを更新します。

コンテナは、分割や段落などのHTML要素のIDを指定することにより指定されます。 下記の例をご覧ください。

コールバックは、リクエストのライフサイクルのさまざまな時点で呼び出され、常に同じ引数リストを備えています。 それらは、他のオプションとともに要求者に直接渡されます。

構文

new Ajax.PeriodicalUpdater(container, url[, options]);

Ajax.PeriodicalUpdaterは、すべてのlink:/prototype/prototype_ajax_options [共通オプション]とコールバックに加えて、link:/prototype/prototype_ajax_updater [Ajax.Updater()]によって追加されたものを備えています。

この方法に固有の2つのオプションがあります-

Option Description
frequency

Default value is 2.

これは、AJAXリクエストが行われる最小間隔です。

decay

Default value is 1.

これは、応答が変更されていないときに要求間隔が拡大する速度を制御します。

戻り値

AJAX PeriodicalUpdaterオブジェクトを返します。

PeriodicalUpdaterの無効化と有効化

stopメソッドを呼び出すだけで、実行中のPeriodicalUpdaterのブレーキを引くことができます。 後で再度有効にする場合は、startメソッドを呼び出すだけです。 どちらも引数を取りません。

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>

      <script>
         function startTimer() {
            new Ajax.PeriodicalUpdater('datetime', '/cgi-bin/timer.cgi', {
               method: 'get', frequency: 3, decay: 2
            });
         }
      </script>
   </head>

   <body>
      <p>Click start button to see how Current Time changes.</p>
      <p>This example may not work in IE.</p>
      <br/>

      <div id = "datetime">Current Time</div>
      <br/>
      <br/>
      <input type = "button" value = "Start" onclick = "startTimer();"/>
   </body>
</html>

ここに timer.cgi スクリプトの内容があります-

#!/usr/bin/perl

print "Content-type: text/html\n\n";

$datetime = localtime;
print $datetime;
print "<br/>";

出力