如何使用AJAX作为iframe的替代方案

我正在尝试组装一个简洁的webapp，一旦GUI加载完毕，就可以使用JS、Prototype和AJAX处理我的所有请求。这个应用程序很简单：一组链接和一个容器元素，可以显示链接指向的任何内容，就像iframe一样。下面是一个大致的HTML片段：

<a class="ajax" href="/somearticle.html">An article</a>
<a class="ajax" href="/anotherarticle.html">Another article</a>
<a class="ajax" href="/someform.html">Some form</a>
<div id="ajax-container"></div>

单击链接时，响应将显示在容器中。在这里，我没有对容器使用iframe，因为我希望页面上的任何元素都能够在某个时刻通过JS相互通信。现在，有一个大问题和一个奇怪的现象：

问题：如果表单返回并显示在容器中，那么上面的JS会尝试将相同的行为应用于表单，以便在提交后收到的任何响应都会显示在容器中。这将失败，因为从未捕获提交事件。为什么？请注意，所有返回的表单元素都具有

class=“ajax”

属性

---

现象：注意

ajaxifyForms（）

中的

console.debug（）

语句。我希望它在页面加载后输出到控制台一次，然后每次用表单更新容器时输出一次。事实是，每次单击指向表单的链接时，控制台的输出数量似乎会加倍。为什么？

我找到了另一种方法来实现我想要的。事实上，这样做的代码更小，更不容易出错。我没有试图确保页面上的每个链接和表单元素在任何给定的时间都被观察到，而是利用事件冒泡，只听文档本身。通过检查每个事件，我可以确定它是否是AJAX请求的主题。以下是新的JS：

document.observe('submit', function(event) {
    if (event.target.hasClassName('ajax')) {
        event.stop();
        event.target.request({
            onSuccess: function(transport) {
                $('ajax-container').update(transport.responseText);
            }
        });
    }
});

document.observe('click', function(event) {
    if (event.target.hasClassName('ajax')) {
        event.stop();
        new Ajax.Updater($('ajax-container'), event.target.href, {
            method: 'get'
        });
    }
});

---

工作起来就像一个符咒：）

因为在页面加载时将事件处理程序附加到链接和表单。然后，当Ajax请求完成时，将事件处理程序附加到链接和表单，依此类推。因此，最初的链接和表单在第一次链接点击后有两个事件处理程序连接到它们，然后在每次点击后连接更多。谢谢，Paul。我怀疑这一定是沿着这些思路。

document.observe('submit', function(event) {
    if (event.target.hasClassName('ajax')) {
        event.stop();
        event.target.request({
            onSuccess: function(transport) {
                $('ajax-container').update(transport.responseText);
            }
        });
    }
});

document.observe('click', function(event) {
    if (event.target.hasClassName('ajax')) {
        event.stop();
        new Ajax.Updater($('ajax-container'), event.target.href, {
            method: 'get'
        });
    }
});