使用Ajax可以異步獲取數(shù)據(jù)，可以更高效地渲染頁(yè)面。

但也存在這一些問(wèn)題：

再刷新頁(yè)面，頁(yè)面就會(huì)變成初始的狀態(tài)

瀏覽器的前進(jìn)后退功能無(wú)效

對(duì)搜索引擎的爬蟲(chóng)抓取不友好

1、

早前會(huì)使用瀏覽器的 hash錨點(diǎn) 來(lái)解決

不同的hash標(biāo)記著頁(yè)面不同的部分，能修正頁(yè)面刷新數(shù)據(jù)不正確的問(wèn)題

再通過(guò) onhashchange 事件監(jiān)聽(tīng)hash錨點(diǎn)的變化，手動(dòng)進(jìn)行前進(jìn)后退操作，瀏覽器支持度

2、

隨后出現(xiàn)一種 hashbang 的技術(shù)，即在url后加上標(biāo)記 #!/myPath 來(lái)解決上述的問(wèn)題

通過(guò)一個(gè)路徑定義一個(gè)頁(yè)面部分，在單頁(yè)面應(yīng)用中可常見(jiàn)到（Angular中已經(jīng)封裝了）。但好像只有g(shù)oogle真正支持了對(duì)該路徑的爬取

3、

HTML5的新特性做了助力，通過(guò)pushState、replaceState 這兩個(gè)新的history方法和 onpopstate 這個(gè)window事件，解決了上述三個(gè)問(wèn)題

當(dāng)然，也因?yàn)槭荋TML5的新特性，在舊版本瀏覽器上支持度不好的，建議是再用hashbang的方法來(lái)兼容

本文主要講講pushState這幾個(gè)新東西

文字太枯燥了，先看看圖示直接點(diǎn)感受

這個(gè)栗子目的是：初始值為0，通過(guò)異步請(qǐng)求自增值，可以前進(jìn)或后退以及刷新，新打開(kāi)一個(gè)url后也能獲取相應(yīng)的數(shù)據(jù)

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

其中state是個(gè)json對(duì)象，可以自定義存放一些數(shù)據(jù)，title即是這個(gè)url對(duì)應(yīng)的標(biāo)簽title（不過(guò)好像瀏覽器都忽略了這個(gè)參數(shù)）

url是某個(gè)頁(yè)面的標(biāo)記url（操作只會(huì)改變地址欄的url，并不會(huì)立馬加載這個(gè)url，可以簡(jiǎn)單的標(biāo)記 ?w=a、ajaxPage.html/w=a、&w=a，只是一種標(biāo)記，取值時(shí)對(duì)照著來(lái)就行）

replaceState和pushState的不同是：前者直接替換當(dāng)前值，后者就是向棧中壓入一個(gè)值

window.onpopstate 事件觸發(fā)之后，可以通過(guò) history.state獲取到上述方法的第一個(gè)json對(duì)象

實(shí)現(xiàn)部分

HTML

<div class="push-state-test">
<input type="button" id="ajax-test-btn" value="Ajax獲取">
<p>value: <span id="ajax-test-val">0</span></p>
</div>

JS

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

PHP

<?php
$val = $_REQUEST['val'];
echo $val + 1;
?>

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

Tips:

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

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

可簡(jiǎn)單地存儲(chǔ)相關(guān)標(biāo)記再發(fā)個(gè)請(qǐng)求，或者直接將該標(biāo)記頁(yè)對(duì)應(yīng)的結(jié)果直接存起來(lái)

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

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

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

以上所述是小編給大家介紹的pushState、replaceState、onpopstate 實(shí)現(xiàn)Ajax頁(yè)面的前進(jìn)后退刷新，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論