有没有办法快速轻松地将标准网站加载转换为整个网站上的AJAX?

时间:2013-01-01 20:06:10

标签: javascript ajax html5 html5-history

也许这不是一个好问题,但我想知道它是否会以某种方式轻松快速地(只有1个功能?)可以将网站上的所有链接从刷新网页更改为加载用户通过AJAX点击的URL?

我的网站到处都有标准链接,但是如果你想从中获得iPhone的移动应用程序,你需要在任何地方使用AJAX(也许是HTML5 History API),因为任何链接都会打开Safari浏览器。

您认为有没有办法快速转换每个链接以删除当前源代码并加载全新页面而无需刷新浏览器窗口?或者它是否需要为每组链接进行手动编码和单独的功能?

示例:

jQuery(document).on('a', 'click', function(){
// STEP1: AJAX call that will make PHP download page from link
// STEP2: Delete current source code and load new one (in this case including deletion of this function itself)
});

你认为这是可能还是有任何陷阱?

1 个答案:

答案 0 :(得分:2)

我做过类似的事情。这是可能的,但您可能需要在服务器端更改一些内容。 在我的情况下,我有一些与href = #的链接,其中一些有点击触发器,所以我想让它们出来。

在这个函数中,我检查没有href = #的每个链接,如果他们没有点击事件,我绑定ajax。

bindAjaxLinks: function() {
   $('a[href!="#"]').each(function() {
            var eventObj = $(this).data('events');
            if (!eventObj || !eventObj.click) {
                // not a javascript link, do your thing
                var link = $(this).attr('href');
                if (link) {
                    $(this).click(function(event) {
                        event.preventDefault();
                        // do your ajax calling here.
                    });
                }
            }
    });

一些注意事项:在我的情况下,我为每个使用此函数的请求添加了一个额外的参数,例如isAjax,而在后端,我只发送了整个页面的一部分(没有头部和其他一些标记) )。后来我用这个新的html替换了用户可见的内容。

这导致了一个问题:如果服务器响应了重定向,我得到了整个页面,我不想要,所以我确保在重定向后保留这个isAjax参数,这解决了这个问题。