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

【问题标题】：How to use AJAX as an alternative to iframe如何使用 AJAX 作为 iframe 的替代品
【发布时间】：2012-03-09 08:23:35
【问题描述】：

我正在尝试构建一个快速的 web 应用程序，一旦加载了 GUI，就利用 JS、Prototype 和 AJAX 来处理我的所有请求。该应用程序很简单：一组链接和一个容器元素，用于显示链接指向的任何内容，就像 iframe 一样。这是一个近似的 HTML sn-p：

<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>

上面附带的JS（抱歉有点冗长）是这样的：

document.observe('dom:loaded', function(event) {
    ajaxifyLinks(document.documentElement);
    ajaxifyForms(document.documentElement);
});

function ajaxifyLinks(container) {
    container.select('a.ajax').each(function(link) {
        link.observe('click', function(event) {
            event.stop();
            new Ajax.Updater($('ajax-container'), link.href, {
                method: 'get',
                onSuccess: function(transport) {
                    // Make sure new ajax-able elements are ajaxified
                    ajaxifyLinks(container);
                    ajaxifyForms(container);
                }
            });
        });
    });
}

function ajaxifyForms(container) {
    console.debug('Notice me');
    container.select('form.ajax').each(function(form) {
        form.observe('submit', function(event) {
            event.stop();
            form.request({
                onSuccess: function(transport) {
                    $('ajax-container').update(transport.responseText);
                    // Make sure new ajax-able elements are ajaxified
                    ajaxifyLinks(container);
                    ajaxifyForms(container);
                }
            });
        });
    });
}

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

问题：如果一个表单被返回并显示在容器中，上面的 JS 尝试对表单应用相同的行为，以便提交后收到的任何响应都显示在容器中。这失败了，因为提交事件永远不会被捕获。为什么？请注意，所有返回的表单元素都具有class="ajax" 属性。

现象：注意ajaxifyForms()中的console.debug()语句。我希望它在页面加载后输出到控制台一次，然后每次使用表单更新容器时。事实是，每次单击指向表单的链接时，控制台的输出数量似乎会增加一倍。为什么？

【问题讨论】：

因为您在页面加载时将事件处理程序附加到链接和表单。然后，当 Ajax 请求完成时，将事件处理程序附加到链接和表单，等等。因此，原始链接和表单在第一次链接点击后有 2 个事件处理程序连接到它们，然后每次点击更多，然后更多。
谢谢，保罗。我怀疑它一定是这样的。

标签： ajax forms iframe prototypejs dom-events

【解决方案1】：

我找到了另一种方法来实现我想要的。事实上，这样做的代码更小，更不容易出错。我没有尝试确保页面上的每个链接和表单元素在任何给定时间都被观察到，而是利用事件冒泡并只收听文档本身。检查每个冒泡的事件，我可以确定它是否受 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'
        });
    }
});

像魅力一样工作:)

【讨论】：