プロトタイプ-AJAX Updater（）メソッド

このAJAX _Ajax.Updater_は、AJAXリクエストを実行し、応答テキストに基づいてコンテナのコンテンツを更新します。

Ajax.UpdaterはAjax.Requestの特殊化です。

構文

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

戻り値

AJAX Ajax.Updaterオブジェクト。

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

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

Option

Description

evalScripts

Default value is false.

これにより、応答テキスト内の<script>要素が評価されるかどうかが決まります。

insertion

Default value is None.

デフォルトでは、Element.updateが使用され、コンテナーのコンテンツ全体が応答テキストに置き換えられます。代わりに、既存のコンテンツの周囲に応答テキストを挿入することもできます。

次の例では、AJAXを介して新しいアイテムを作成すると、新しいアイテムのみを表すXHTMLフラグメントが返されます。これは、リストコンテナ内に追加する必要がありますが、既存のコンテンツの下部に追加します。ここに行く-

new Ajax.Updater('items', '/items', {
   parameters: { text: $F('text') },
   insertion: Insertion.Bottom
});

例

以下は、_Ajax.Updater_を使用してシステム時間を更新する例を示しています。毎回下部に追加されています-

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

      <script>
         function insertTime() {
            new Ajax.Updater('datetime', '/cgi-bin/timer.cgi', {
               method: 'get',
               insertion: Insertion.Bottom
            });
         }
      </script>
   </head>

   <body>
      <p>Click update button many time to see the result.</p>
      <br/>

      <div id = "datetime">Date & Time</div>
      <br/>
      <br/>
      <input type = "button" value = "Update" onclick = "insertTime();"/>
   </body>
</html>

*timer.cgi* の内容は次のとおりです。

#!/usr/bin/perl

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

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

出力

単一のコンテナ、または成功/失敗の代替案？

上記の例では、リクエストが成功したか失敗したかにかかわらず、同じコンテナを更新すると仮定します。あなたがそれを望まない時が非常によくあるかもしれません。成功したリクエストに対してのみ更新するか、失敗したリクエストに対して別のコンテナを更新することができます。

次のコードでは、成功したリクエストのみが更新を取得します-

new Ajax.Updater({ success: 'items' }, '/items', {
   parameters: { text: $F('text') },
   insertion: Insertion.Bottom
});

次の例は失敗したリクエストを想定しており、応答テキストとしてエラーメッセージが表示され、さらにステータスゾーンなどの別の要素を更新します。

new Ajax.Updater({success:'items',failure:'notice' },'/items', {
   parameters: { text: $F('text') },
   insertion: Insertion.Bottom
});

Prototype-ajax-updater

目次

プロトタイプ-AJAX Updater（）メソッド

構文

戻り値

例

出力

単一のコンテナ、または成功/失敗の代替案？