Question

我们有非常标准的网站，我有一项任务是将页面之间的链接转换为AJAX调用，但维护直接链接（例如来自搜索引擎）也是如此。

我的目标：

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

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

Answer 1

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

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

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

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

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

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

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

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

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

浏览器为您管理DOM垃圾回收。打开任何JQuery页面，转到firebug / chrome dev工具DOM选项卡并检查文档。然后转到控制台选项卡并键入$（“html”）。remove（）返回DOM选项卡，您将看到它已被完全清理。你正在调用replace（）而不是删除，所以旧的DOM元素将被AJAX调用中的新元素替换。

Answer 2

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

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

这是令人头疼的爬行。你需要编写客户端代码和服务器端代码来实现它（这基本上无论如何真正重要，对吗？）。你想要read Google's developer documentation on making this work with Googlebot.

将站点转换为页面之间的AJAX转换（也称为完整页面AJAX）

2 个答案: