facebook - FB如何在不重新加载页面的情况下刷新页面(xmlHttpRequest)但后退按钮仍然有效？

Question

FB 如何刷新页面而不重新加载它 (xmlHttpRequest) 但后退/前进按钮仍然照常工作？

这与使用 history.pushState() 方法无关。 PushState() 仅更改 URL 字符串，但不会在您单击“后退”按钮后获取之前查看的页面。所以它有点不同。

这是我的代码和示例。

我有这样的网站(见下图)。 Header-div 和 Content-div。当您第一次打开它时，URL 是 mysite.com/page1.php。 我想在不重新加载页面的情况下更改 Content-div 中的内容。新信息应该出现在 Content-div 中。 URL 应更改为 mysite.com/page2.php。

这是 HTML 代码。

<div id="content"></div>

<a href="" id="relaodLink">Reload Content</a>

这是它的 JS 代码。

document.getElementById("relaodLink").onclick = function() {
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open("GET", "page2.php", true);
    xmlHttp.send();

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("content").innerHTML = xmlHttp.responseText;
        }
    }
    return false;
}

所以 Header 在按下 relaodLink 后不应该重新加载，只是 Content-div 中的内容发生变化。最重要的是:URL 应该像页面真正重新加载一样改变。后退按钮允许转到 mysite.com/page1.php，然后前进按钮允许再次返回 mysite.com/page2.php。使用 history.pushState() 方法它不起作用。但在 FB 中，后退和前进按钮工作正常。如何制作？

_{(来源:ljplus.ru)}

Answer 1

这是一个很好的问题。如果您仔细观察，您会注意到后退按钮和前进按钮也可以在 gmail 中使用，尽管它完全基于 Ajax 构建。

浏览器的后退和前进按钮用于存储地址栏中的内容。所以在 Ajax 中，如果您从不更改地址栏中的内容，它就不会进入历史记录，因此后退和前进按钮不起作用。

为此，您需要不断向地址栏添加内容。
例如:在 gmail 中，
单击收件箱时 - https://mail.google.com/mail/ ?tab=mm#inbox
单击加星标时 - https://mail.google.com/mail/ ?tab=mm#starred
单击“发送”时 - https://mail.google.com/mail/ ?tab=mm#sent

这样，gmail 就会一直附加到地址栏。因此，历史得以保存。 facebook 也是如此。虽然页面没有刷新，但地址栏中的位置发生了变化 - 这是这里的关键!

希望对你有帮助!