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

prototype.jsでAjax.PeriodicalUpdaterを使う bookmark

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

コードを見てみよう bookmark

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

new Ajax.PeriodicalUpdater( "container", "/samples/ajax/test.php", { "method": "get", "parameters": "p=hoge", frequency: 5, // 5秒ごとに実行 onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); }, onComplete: function(request) { // 完了時の処理を記述 // alert('読み込みが完了しました'); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } );

コードの解説 bookmark

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

"/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)