Ajax可以實現(xiàn)頁面的無刷新操作但是，也會造成另外的問題，無法前進(jìn)與后退，
如果想既可以使用ajax做數(shù)據(jù)傳輸右想實現(xiàn)前進(jìn)后退該怎么辦？？
1 .利用location.hash
location.hash可以取到或者設(shè)置hash的值，當(dāng)hash改變的時候window.onhashchange事件會被觸發(fā)，但是頁面加載的時候哪怕有hash值，onhashchange事件也不會觸發(fā)，因此需要在onload事件中也讀取hash進(jìn)行同樣的處理，保證刷新頁面也能恢復(fù)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
當(dāng)前URL下對應(yīng)的狀態(tài)信息。如果當(dāng)前URL不是通過pushState或者replaceState產(chǎn)生的，那么history.state是null。
history.pushState(state, title, url)
將當(dāng)前URL和history.state加入到history中，并用新的state和URL替換當(dāng)前。不會造成頁面刷新。
- state：與要跳轉(zhuǎn)到的URL對應(yīng)的狀態(tài)信息。
- title：頁面的題目,假如沒有就穿空字符串就可以。
- url：要跳轉(zhuǎn)到的URL地址，不能跨域。
history.replaceState
用新的state和URL替換當(dāng)前。不會造成頁面刷新。
- state：與要跳轉(zhuǎn)到的URL對應(yīng)的狀態(tài)信息。
- title：頁面的題目,假如沒有就穿空字符串就可以。
- url：要跳轉(zhuǎn)到的URL地址，不能跨域。
window.onpopstate
history.go和history.back（包括用戶按瀏覽器歷史前進(jìn)后退按鈕）觸發(fā)，并且頁面無刷的時候（由于使用pushState修改了history）會觸發(fā)popstate事件，事件發(fā)生時瀏覽器會從history中取出URL和對應(yīng)的state對象替換當(dāng)前的URL和history.state。通過event.state也可以獲取history.state。
支持性判斷
if ('pushState' in history) {...}
