這篇文章主要介紹了pushState、replaceState、onpopstate 實現Ajax頁面的前進後退刷新的相關資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
使用Ajax可以非同步獲取數據，可以更有效率地渲染頁面。
但也存在這一些問題：
#再刷新頁面，頁面就會變成初始的狀態
瀏覽器的前進後退功能無效
對搜尋引擎的爬蟲抓取不友善
1、
早前會使用瀏覽器的hash錨點來解決
不同的hash標記著頁面不同的部分，能修正頁面刷新資料不正確的問題
再透過onhashchange 事件監聽hash錨點的變化，手動進行前進後退操作，瀏覽器支援度
2、
接著出現一種hashbang 的技術，即在url後面加上標記#!/myPath 來解決上述的問題
透過一個路徑定義一個頁面部分，在單頁面應用程式中可常見到（Angular中已經封裝了）。但好像只有google真正支援了對該路徑的爬取
3、
HTML5的新特性做了助力，透過pushState、replaceState 這兩個新的history方法和onpopstate 這個window事件，解決了上述三個問題
當然，也因為是HTML5的新特性，在舊版瀏覽器上支持度不好的，建議是再用hashbang的方法來兼容
本文主要講講pushState這幾個新東西
文字太枯燥了，先看看圖示直接點感受
##這個栗子目的是：初始值為0，透過非同步請求自增值，可以前進或後退以及刷新，新打開一個url後也能獲取相應的數據
history.pushState(state, title, url)
history.replaceState(state, title, url)
登入後複製
其中state是個json對象，可以自訂存放一些數據，title也就是這個url對應的標籤title（不過好像瀏覽器都忽略了這個參數）
url是某個頁面的標記url（操作只會改變網址列的url，並不會立刻載入這個url ，可以簡單的標記?w=a、ajaxPage.html/w=a、&w=a，只是一種標記，取值時對照著來就行）
replaceState和pushState的不同是：前者直接取代目前值，後者就是向堆疊中壓入一個值
window.onpopstate 事件觸發之後，可以透過history.state取得到上述方法的第一個json物件
實作部分
HTML
<p class="push-state-test">
<input type="button" id="ajax-test-btn" value="Ajax获取">
<p>value: <span id="ajax-test-val">0</span></p>
</p>
登入後複製
JS
var $val = $('#ajax-test-val'),
// 获取当前页面的标记
m = window.location.search.match(/\?val=(\d+)/);
// 新进入页面，通过url中的标记初始化数据
if (m) {
increaseVal(m[1] - 1);
}
// 请求
function increaseVal(val) {
$.post('ajax-test.php', {
val: val
}, function(newVal) {
$val.text(newVal);
// 存储相关值至对象中
var state = {
val: newVal,
title: 'title-' + newVal,
url: '?val=' + newVal
}
// 将相关值压入history栈中
window.history.pushState && window.history.pushState(state, state.title, state.url);
});
}
$('#ajax-test-btn').click(function() {
increaseVal(parseInt($val.text(), 10));
});
// 浏览器的前进后退，触发popstate事件
window.onpopstate = function() {
var state = window.history.state;
console.log(state)
// 直接将值取出，或再次发个ajax请求
$val.text(state.val);
window.history.replaceState && window.history.replaceState(state, state.title, state.url);
};登入後複製
PHP
<?php
$val = $_REQUEST['val'];
echo $val + 1;
?>
登入後複製
這裡透過?val=num 的方式，標記了不同的ajax結果頁
Tips:
使用pushState之後，當前進後退觸發了popstate事件，獲取到對應的json物件
json物件的資料可自訂
可簡單地儲存相關標記再發個請求，或直接將該標記頁對應的結果直接存起來
隨著後退操作，網址列url得到了更新，異步的資料也得到了更新
#刷新頁面或新開啟頁面，就要根據url中的標記去請求資料了
要記住的是，瀏覽器並不會自動載入url這部分標記對應的這個非同步內容頁，需要我們去獲取
上面是我整理給大家的，希望以後會對大家有幫助。
相關文章：
AJAX請求佇列實作
#使用ajax非同步提交表單的幾種方法總結
解決AJAX請求中含有陣列的方法
以上是pushState、replaceState、onpopstate 實作Ajax頁面的前進後退刷新的詳細內容。更多資訊請關注PHP中文網其他相關文章！
