原型 - AJAX 更新器() 方法

这个 AJAX Ajax.Updater 执行 AJAX 请求并根据响应文本更新容器的内容。

Ajax.Updater 是 Ajax.Request 的一个特例。

语法

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

返回值

一个 AJAX Ajax.Updater 对象。

Ajax.Updater 包含所有常用选项和回调函数，以及 Ajax.Updater(). 添加的那些。

此方法还有两个特定选项：

选项	描述
evalScripts	默认值为 false. 这决定了是否评估响应文本中的 <script> 元素。
insertion	默认值为 None. 默认情况下，使用 Element.update，它用响应文本替换容器的全部内容。您可能希望改为在现有内容周围插入响应文本。

选项

描述

evalScripts

默认值为 false.

这决定了是否评估响应文本中的 <script> 元素。

insertion

默认值为 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_tutorial.htm

打印页面