0

我们有非常标准的网站，我的任务是将页面之间的链接转换为 AJAX 调用，但保持直接链接（例如来自搜索引擎）也能正常工作。

我的目标：

  • 让直接链接像以前一样工作（以及旧 IE 的哈希回退），从直接链接到达平滑过渡，并使用 AJAX 进行进一步浏览
  • 实现一些“垃圾收集”（以前查看过的页面的 DOM、脚本处理程序等）

我在 jQuery Mobile 中看到过类似的东西，但我正在寻找更通用的解决方案来从中获得灵感（或借用代码）:)

4

2 回答 2

2

好的，首先您需要能够分离外部和内部链接。为此，我编写了以下 JQuery 选择器：

$.expr[':'].internal = function (obj) {
    return (obj.hostname == location.hostname);
};

$.expr[':'].external = function (obj) {
    return (obj.hostname != location.hostname);
};

这使您可以选择所有内部或外部链接$("a:internal")....

接下来，您需要覆盖所有内部链接上的点击事件，覆盖默认行为抓取 Href url 并对 href URL 执行 ajax 请求并将结果吐到正文中

    $("a:internal").click(ajaxLinkHandler);

    function ajaxLinkHandler() {
       $.get($(this).attr("href"), function(data) {
       $('body').html(data);
     });
}

您还需要查看history.js以启用浏览器历史记录/后退按钮和地址栏更新。您还需要在服务器端检测 AJAX 请求并仅返回<body>or 否则返回所有内容并将上面的示例更改为$("html").html(data).

您需要处理 onLoad/DOM 事件或使用新的 JQuery“On”处理$(document).on("click", "a", ajaxLinkHandler)程序这样，当点击事件冒泡到文档时，它将检查它是否是从锚标记启动的，因此不需要 onReady 事件。

浏览器为您管理 DOM 垃圾收集。打开任何 JQuery 页面，转到 firebug/chrome 开发工具 DOM 选项卡并检查文档。然后转到控制台选项卡并键入 $("html").remove() 回到 DOM 选项卡，您会看到它已被完全清理。您调用的是 replace() 而不是删除，因此旧的 DOM 元素将替换为来自 AJAX 调用的新元素。

于 2012-05-08T10:43:31.370 回答
1

通过 AJAX 而不是自然的 HTTP 行为来加载页面相对容易实现。这只是劫持链接、停止默认点击行为和执行 AJAX 魔术的问题。

$(document).on('a', 'click', function (e) {
    e.preventDefault();
    // perform your AJAX
});

爬行有点让人头疼。您将需要编写客户端和服务器端代码才能为 Google 实现（这基本上是真正重要的，对吧？）。您将需要阅读 Google 的开发人员文档，了解如何使用 Googlebot 进行这项工作。

于 2012-05-08T10:23:48.213 回答