在訪問(wèn)現(xiàn)在很火的google plus時(shí)，細(xì)心的用戶也許會(huì)發(fā)現(xiàn)頁(yè)面之間的點(diǎn)擊是通過(guò)ajax異步請(qǐng)求的，同時(shí)頁(yè)面的URL發(fā)生了了改變。并且能夠很好的支持瀏覽器的前進(jìn)和后退。不禁讓人想問(wèn)，是什么有這么強(qiáng)大的功能呢？
HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通過(guò)這個(gè)接口做到無(wú)刷新改變頁(yè)面URL的。
與傳統(tǒng)的AJAX的區(qū)別
傳統(tǒng)的ajax有如下的問(wèn)題：
雖然ajax可以無(wú)刷新改變頁(yè)面內(nèi)容，但無(wú)法改變頁(yè)面URL
其次為了更好的可訪問(wèn)性，內(nèi)容發(fā)生改變后，改變URL的hash。但是hash的方式不能很好的處理瀏覽器的前進(jìn)、后退等問(wèn)題
有的瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時(shí)去判斷hash是否改變
再有，ajax的使用對(duì)搜索引擎很不友好，往往蜘蛛爬到的區(qū)域是空的
為了解決傳統(tǒng)ajax帶來(lái)的問(wèn)題，HTML5里引入了新的API，即：history.pushState, history.replaceState
可以通過(guò)pushState和replaceState接口操作瀏覽器歷史，并且改變當(dāng)前頁(yè)面的URL。
pushState是將指定的URL添加到瀏覽器歷史里，replaceState是將指定的URL替換當(dāng)前的URL。
如何調(diào)用
復(fù)制代碼 代碼如下:
var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);
state對(duì)象除了要title和url之外，也可以添加其他的數(shù)據(jù)，比如：還想將一些發(fā)送ajax的配置給保存起來(lái)。
replaceState和pushState是相似的，不需要多做解釋。
如何響應(yīng)瀏覽器的前進(jìn)、后退操作
window對(duì)象上提供了onpopstate事件，上面?zhèn)鬟f的state對(duì)象會(huì)成為event的子對(duì)象，這樣就可以拿到存儲(chǔ)的title和URL了。
復(fù)制代碼 代碼如下:
window.addEventListener('popstate', function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);
這樣就可以結(jié)合ajax和pushState完美的進(jìn)行無(wú)刷新瀏覽了。
一些限制
1、無(wú)法跨域，這個(gè)是必然的。引用曾經(jīng)在網(wǎng)上看到的一句經(jīng)典的話：“如果javascript可以跨域的話，那他就可以逆天了！”
2、state對(duì)象雖然可以存儲(chǔ)很多自定義的屬性，但值不能是個(gè)對(duì)象。
對(duì)應(yīng)后端的一些處理
這種模式下除了當(dāng)前使用ajax可以無(wú)刷新瀏覽外，還要保證直接請(qǐng)求改變的URL后也可以正常瀏覽，所以后端要對(duì)這些處理下。
1、對(duì)結(jié)合pushState的ajax可以發(fā)送一個(gè)特殊的頭，如： setRequestHeader(‘PJAX', ‘true')。
2、后端獲取到有PJAX=true的header時(shí)，將頁(yè)面中通用的部分都不輸出。比如：PHP可以通過(guò)下面的判斷
復(fù)制代碼 代碼如下:
function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) $_SERVER['HTTP_X_PJAX'] === 'true';
}
雖然接口上只有pushState、replaceState、onpopstate，但在使用的時(shí)候還是要做很多處理的。
以上就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:- jQuery實(shí)現(xiàn)AJAX定時(shí)刷新局部頁(yè)面實(shí)例
- JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn)
- 基于Jquery 解決Ajax請(qǐng)求的頁(yè)面 瀏覽器后退前進(jìn)功能，頁(yè)面刷新功能實(shí)效問(wèn)題
- Ajax實(shí)現(xiàn)頁(yè)面自動(dòng)刷新實(shí)例解析
- django+js+ajax實(shí)現(xiàn)刷新頁(yè)面的方法
- Ajax回退刷新頁(yè)面問(wèn)題的解決辦法
- ajax頁(yè)面無(wú)刷新 IE下遭遇Ajax緩存導(dǎo)致數(shù)據(jù)不更新的問(wèn)題
- Ajax+php數(shù)據(jù)交互并且局部刷新頁(yè)面的實(shí)現(xiàn)詳解
- 淺談Ajax技術(shù)實(shí)現(xiàn)頁(yè)面無(wú)刷新
- AJAX實(shí)現(xiàn)指定部分頁(yè)面刷新效果
