トップページ / Ajaxで定期的に特定部分を更新

Ajaxで定期的に特定部分を更新

スポンサードリンク

prototype.jsでAjax.PeriodicalUpdaterを使う bookmark

prototype.jsというライブラリのAjax.PeriodicalUpdaterという機能を使えば、ページの特定部分を定期的に簡単に書き換えることが出来ます。

コードを見てみよう bookmark

Ajax.PeriodicalUpdaterのコードとしては次のようになっています。

コードの解説 bookmark

上記コードを記述しておくと、id="container" の要素。例えば、<div id="container"></div> のタグの中身が "/samples/ajax/test.php" というURLにアクセスした結果の中身にfrequencyで設定したとおり、5秒ごとに置き換えられます。

"/samples/ajax/test.php" というURLに使われるパラメータとして、"p=hoge" とし、メソッドはGETで投げています。サーバには、"/samples/ajax/test.php?p=hoge" というリクエストが飛んでいることになります。

そして、通信の「成功時」「完了時」「失敗時」「エラー時」においてそれぞれ、onSuccess, onComplete, onFailure, onException というメソッドを割り当てることができ、エラー時に何か処理をすることが出来ます。

これら関数は、「Ajaxで特定部分を書き換える」で説明したAjax.Updaterと同様のタイミングで呼び出されます。

動作確認はAjax.PeriodicalUpdaterのページにて行えます。

次のページ:AjaxによるForm送信 (JavaScript応用編&TIPS)

スポンサードリンク