logo标签列表

我应该使用 AJAX 加载整个 HTML 页面吗？

ajaxgoogle-analytics
11

我的设计师认为在不同页面之间创建转换效果是个好主意。基本上只有内容部分会重新加载（页眉和页脚保持不变），只有内容div应该有过渡效果（淡入淡出或其他的）。创建这种效果并不是问题，让Google Analytics满意才是...

我不喜欢的解决方案及其原因如下：

  • 仅使用ajax加载内容div：谷歌看不到任何内容，这意味着网站将永远无法被发现，或者谷歌只会找到由ajax检索的那些部分，而这些根本不是完整的页面
  • 显示过渡效果，然后“重定向”用户到指定页面（捕获a元素的单击事件）：效果与直接链接到另一个页面几乎相同，例如，用户仍然会看到重新加载页面

我想到了一种可能的解决方法： 当访客点击链接时，捕获事件，使用ajax加载目标，并同时显示过渡效果，然后使用ajax请求获取的内容重写整个文档。

至少这种方法是行得通的，并且有一些优点；无论您的互联网连接速度有多慢，页面重新加载都看起来毫不费力，谷歌也不会介意，因为ajax内容本身是一个完整的html页面，可以按原样爬行，即使是非JavaScript浏览器（如手机）也不会介意，它们只会重新加载页面。

我犹豫是否实施这种方法，因为我将使用ajax重新加载整个页面。我想知道ajax是否就是用于此目的，是否会减慢速度。最重要的是，是否有更好的解决方案，例如我的第一个“不好”的解决方案，但略有不同，以便谷歌喜欢它（分析也一样）？

感谢您对此的思考！

超越“看起来很酷”，问问自己为什么需要这个过渡效果。如果没有合理的理由，就不要使用它。 - Mike Robinson
1
除此之外，在这种情况下，我实际上没有选择，因为这是设计师的选择，有两个原因;它看起来“很酷”，而且用户将拥有“无需等待”（或者有一些事情正在发生的想法）的体验，如果你知道我的意思;) - giorgio
为什么不呢？我认为“看起来很酷”已经足够了。我的意思是，Flash之所以流行就是因为它看起来很酷。为什么不能在没有Flash的情况下实现同样的效果呢？ - Máthé Endre-Botond
4个回答
10

简短回答：我不建议以这种方式加载整个页面。

详细回答：不建议。虽然可能，但这并非XHR/Ajax的真正意图。您实际上正在复制浏览器的本机行为。您将遇到一些问题：

  1. 支持后退/前进按钮。您需要一个URI #方案来解决。
  2. 浏览器必须通过AJAX解析整个页面。这会减慢速度。例如，如果您将HTML块加载到浏览器中，然后用它替换DOM，只有其中包含的任何脚本、CSS或图像开始下载，才能看到页面内容。
  3. 内存-浏览器没有更改页面。随着时间的推移（取决于浏览器），我预计内存使用量会增加。
  4. 可访问性。屏幕阅读器需要在更新页面内容时得到通知。这可能不是您关心的问题，但值得一提。
  5. 缓存。浏览器不知道要缓存哪个页面（超出初始加载范围）。
  6. 关注分离——您的视图基本上已被分解为服务器端片段，以呈现页面的内容以及页面框架的静态HTML，最后与浏览器片段结合的JS。随着时间的推移，这将使维护变得棘手而复杂。
  7. 与其他组件的集成——您已经看到了与Google Analytics相关的问题。您可能会遇到与DOM构建时间有关的其他组件问题。

无论对于页面过渡效果是否值得，都由您决定，但我希望我已经回答了您的问题。

1
呃...不幸的是，你回答得太好了 :) 那我得想点别的... - giorgio
抱歉 ;) 只是好奇，过渡效果是什么？也许可以通过其他方式复制它。 - Francis Shanahan
1
IE 5.5引入了类似的功能。然而，现在通常被认为是糟糕的用户体验。http://www.jansfreeware.com/articles/ie-page-transitions.html - Francis Shanahan
3

  1. 你可以实现AJAX和SEO的双赢：谷歌的提议。

  2. 我认为你可以从Gmail的设计中学到一些东西。

我已经研究过这个问题，但还不是很清楚。等到实际应用时再进行调查！有了更多信息后我会通知大家的！ - giorgio
2
这可能有点奇怪，但我有一个想法。
准备好你的页面以使用'iframe' GET参数加载。
  • 当有'iframe'时，使用一些JavaScript来触发父级show_iframe_content()
  • 当没有'iframe'时，只需加载页面，并使用名为“preloader”的隐藏iframe元素
你的目标是确保你的每个链接都在“preloader”中打开，并带有额外的“iframe”获取参数，当iframe完成加载并调用show_iframe_content()时，将内容复制到父页面。
像这样：点击链接->过渡到加载阶段->iframe已加载->调用show_iframe_content()->将iframe内容复制回父级->恢复正常阶段
整个过程很好，因为如果爬虫访问你的任何页面，它都不会使用'iframe'获取参数，所以它可以像平常一样浏览所有页面，但当你在浏览器中使用它时，你的链接就会做上述魔术。
这只是一个草图，但我相信它可以实现。
编辑：实际上，你可以使用简单的ajax而不是iframe来完成此操作，问题是必须在页面在浏览器中加载后修改页面，以使用ajax加载链接的内容。爬虫也应该看到链接。
示例脚本：
$.fn.initLinks = function() {
    $("a",this).click(function() {
        var url = $(this).attr("href");
        // transition to loading phase ...
        // Ajax post parameter tells the site lo load only the content without header/footer
        $.post(href,"ajax=1",function(data) {
            $("#content").html(data).initLinks();
            // transition to normal phase ...
        });
        return false;
    });
};

$(function() {
   $("body").initLinks();
});
不太喜欢使用iframes，但那只是个人偏好 :) 但你添加“ajax”参数的解决方案听起来非常简单！我喜欢这个！谢谢！ - giorgio
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接