FB如何重新刷新页面而不重新加载它(xmlHttpRequest)但Back按钮仍然有效？

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 Back and Forward Buttons工作正常.怎么做？

一只忙碌的猫http://www.ljplus.ru/img4/a/_/a_ya_vishe/primer-xmlhttp_3.jpg

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/？标签=毫米#发送

因此,通过这种方式,gmail会继续附加到地址栏.因此,历史得以保留.这同样与Facebook的也.虽然页面没有刷新,但地址栏中的位置发生了变化 - 这就是关键!

我希望它对你有所帮助!