FB 如何刷新页面而不重新加载它（xmlHttpRequest）但“后退”按钮仍然有效？

发布于 2024-12-24 02:06:50 字数 1516 浏览 2 评论 0原文

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

这与使用 history.pushState() 方法无关。 PushState() 仅更改 URL 字符串，但在单击后退按钮后不会执行任何操作来获取上一个查看页面。所以这是不同的。

这是我的代码和示例。

我有这样的网站（看下图）。标题 div 和内容 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;
}

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

_{（来源：ljplus.ru）}

原文

How FB refreshes the page without reloading it (xmlHttpRequest) but Back/Forward Buttons still work as usual?

It's not about using history.pushState() methods. PushState() only changes URL-string but does nothing to get previous looking page after you click Back Button. So it's smth different.

Here's my code and example.

I have such site (look at the pic below). Header-div and Content-div. At the begining when you first time open it, the URL is mysite.com/page1.php. I want to change content in Content-div without reloading page. Just new info should appear in Content-div. And the URL should change to mysite.com/page2.php.

Here's HTML-code.

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

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

Here's JS-code to it.

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;
}

So Header should not reload after pressing relaodLink, just content in Content-div changes. And most important: URL should change like page was really reloaded. Back Button allows to go to mysite.com/page1.php and then Forward Button allows to go back to mysite.com/page2.php again. With history.pushState() methods it doesn't work. But in FB Back and Forward Buttons work fine. How to make it?

_{(source: ljplus.ru)}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尛丟丟 2024-12-31 02:06:50

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

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

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

这样，gmail 就会不断追加到地址栏。因此，历史得以保留。 facebook 也是如此。虽然页面没有刷新，但地址栏的位置发生了变化——这就是关键！

我希望它对你有帮助！