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

时间:2012-02-17 23:02:57

标签: ajax forms iframe javascript-events prototypejs

我正在尝试整合一个活泼的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>

上面附带的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()语句。我希望它在页面加载后输出到控制台,然后每次使用表单更新容器。事实是,每次单击指向表单的链接时,控制台的输出数量似乎都会翻倍。为什么呢?

1 个答案:

答案 0 :(得分:0)

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

像魅力一样工作:)