Prototype.jsコトハジメ

原井彰弘
2008-01-29 15:00:00
  • このエントリーをはてなブックマークに追加

Ajax.Updater

 Ajax.UpdaterはAjax.Requestオブジェクトの拡張だ。Ajax.Updaterでは、Ajaxリクエストを処理すると共に、サーバから返された情報でページの更新を行う。

new Ajax.Updater(container, url[, options])

 コードを見てお分かりのように、Ajax.Updaterは3つのパラメータを受け取る。新しく増えたパラメータ「container」では、サーバから返された情報の表示を行うHTMLのコンテナもしくは位置を指定する。以下の例では、利用者がボタンをクリックすると、

要素の内容に異なった種類の果物が表示される。


  
Empty

 fruitSalad()関数のコードを以下に示そう。関数の内部ではAjax.Updaterオブジェクトが作成され、パラメータとして

要素のid、リクエストの送信先URL、そしてHTTPメソッド(この場合は「get」)が渡されている。

function fruitSalad () {
  new Ajax.Updater('saladContainer', 'fruit.php', { method: 'get' });
}

 次はfruit.phpスクリプトである。このスクリプトでは、配列から異なった種類の果物を取得する処理を行う。

";
?>

 補足だが、Ajax.PeriodicalUpdaterを利用すると、サーバからの応答が変化しない場合でも一定の間隔で内容を更新することが可能だ。この処理を行うには、frequency属性に、何秒後に内容を更新したいのかを指定すればよい。たとえば、frequency: 5という設定を行うと、内容は5秒ごとに更新される。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]