Ajax可以实现页面的无刷新操作但是，也会造成另外的问题，无法前进与后退，
如果想既可以使用ajax做数据传输右想实现前进后退该怎么办？？
1 .利用location.hash
location.hash可以取到或者设置hash的值，当hash改变的时候window.onhashchange事件会被触发，但是页面加载的时候哪怕有hash值，onhashchange事件也不会触发，因此需要在onload事件中也读取hash进行同样的处理，保证刷新页面也能恢复ajax的页面显示。
测试代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var processHash = function () {
var hashStr = location.hash.replace("#", "");
if (hashStr) $("#test").html(hashStr);
}
$(function () {
$("#test").click(function () {
var i = parseInt($("#test").html());
i++;
$("#test").text(i);
location.hash = "#" + i;
});
window.onload = processHash;
window.onhashchange = processHash;
});
</script>
</head>
<body>
<span id="test">1</span>
</body>
</html>
2.利用HTML5 history pushState/replaceState
history.state
当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的，那么history.state是null。
history.pushState(state, title, url)
将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。
- state：与要跳转到的URL对应的状态信息。
- title：页面的题目,假如没有就穿空字符串就可以。
- url：要跳转到的URL地址，不能跨域。
history.replaceState
用新的state和URL替换当前。不会造成页面刷新。
- state：与要跳转到的URL对应的状态信息。
- title：页面的题目,假如没有就穿空字符串就可以。
- url：要跳转到的URL地址，不能跨域。
window.onpopstate
history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。
支持性判断
if ('pushState' in history) {...}
网友评论