pushState、replaceState、onpopstate如何實現(xiàn)Ajax頁面的前進后退刷新功能

history.pushState(state, title, url)
history.replaceState(state, title, url)

value: 0

JS

var $val = $('#ajax-test-val'),
// 獲取當(dāng)前頁面的標(biāo)記
m = window.location.search.match(/\?val=(\d+)/);
// 新進入頁面，通過url中的標(biāo)記初始化數(shù)據(jù)
if (m) {
increaseVal(m[1] - 1);
}
// 請求
function increaseVal(val) {
$.post('ajax-test.php', {
val: val
}, function(newVal) {
$val.text(newVal);
// 存儲相關(guān)值至對象中
var state = {
val: newVal,
title: 'title-' + newVal,
url: '?val=' + newVal
}
// 將相關(guān)值壓入history棧中
window.history.pushState && window.history.pushState(state, state.title, state.url);
});
}
$('#ajax-test-btn').click(function() {
increaseVal(parseInt($val.text(), 10));
});
// 瀏覽器的前進后退，觸發(fā)popstate事件
window.onpopstate = function() {
var state = window.history.state;
console.log(state)
// 直接將值取出，或再次發(fā)個ajax請求
$val.text(state.val);
window.history.replaceState && window.history.replaceState(state, state.title, state.url);
};

PHP

這里通過?val=num 的方式，標(biāo)記了不同的ajax結(jié)果頁

Tips:

使用pushState之后，當(dāng)前進后退觸發(fā)了popstate事件，獲取到相應(yīng)的json對象

json對象的數(shù)據(jù)可自定義

可簡單地存儲相關(guān)標(biāo)記再發(fā)個請求，或者直接將該標(biāo)記頁對應(yīng)的結(jié)果直接存起來

隨著后退操作，地址欄url得到了更新，異步的數(shù)據(jù)也得到了更新

刷新頁面或新打開頁面，就要根據(jù)url中的標(biāo)記去請求數(shù)據(jù)了

要記住的是，瀏覽器并不會自動加載url這部分標(biāo)記對應(yīng)的這個異步內(nèi)容頁，需要我們?nèi)カ@取

什么是ajax

ajax是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)，可以通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，使網(wǎng)頁實現(xiàn)異步更新。

以上是“pushState、replaceState、onpopstate如何實現(xiàn)Ajax頁面的前進后退刷新功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！