使用ajax和history.pushState無(wú)刷新改變頁(yè)面URL示例
表現(xiàn)
如果你使用chrome或者firefox等瀏覽器訪問(wèn)本博客、github.com、plus.google.com等網(wǎng)站時(shí),細(xì)心的你會(huì)發(fā)現(xiàn)頁(yè)面之間的點(diǎn)擊是通過(guò)ajax異步請(qǐng)求的,同時(shí)頁(yè)面的URL發(fā)生了了改變。并且能夠很好的支持瀏覽器前進(jìn)和后退。
是什么有這么強(qiáng)大的功能呢?
HTML5里引用了新的API,history.pushState和history.replaceState,就是通過(guò)這個(gè)接口做到無(wú)刷新改變頁(yè)面URL的。
與傳統(tǒng)的AJAX的區(qū)別
傳統(tǒng)的ajax有如下的問(wèn)題:
1、可以無(wú)刷新改變頁(yè)面內(nèi)容,但無(wú)法改變頁(yè)面URL
2、為了更好的可訪問(wèn)性,內(nèi)容發(fā)生改變后,通常改變URL的hash
3、hash的方式不能很好的處理瀏覽器的前進(jìn)、后退等問(wèn)題!
4、進(jìn)而瀏覽器引入了onhashchange的接口,不支持的瀏覽器只能定時(shí)去判斷hash是否改變
5、但這種方式對(duì)搜索引擎很不友好
6、twitter和google約定了使用#!xxx(即hash第一個(gè)字符為!),搜索引擎進(jìn)行支持。
為了解決傳統(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。
如何使用
<strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);</strong>
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了。
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、傳遞的URL必須是同域下的,無(wú)法跨域
2、state對(duì)象雖然可以存儲(chǔ)很多自定義的屬性,但對(duì)于不可序列化的對(duì)象則不能存儲(chǔ),如:DOM對(duì)象。
對(duì)應(yīng)后端的一些處理
這種模式下除了當(dāng)前使用ajax可以無(wú)刷新瀏覽外,還要保證直接請(qǐng)求改變的URL后也可以正常瀏覽,所以后端要對(duì)這些處理下。
1、對(duì)使用pushState的ajax發(fā)送一個(gè)特殊的頭,如: setRequestHeader(‘PJAX', ‘true')。
2、后端獲取到有PJAX=true的header時(shí),將頁(yè)面中通用的部分都不輸出。比如:PHP可以通過(guò)下面的判斷
function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}
雖然接口上只有pushState、replaceState、onpopstate,但在使用的時(shí)候需要做很多的處理。
針對(duì)這個(gè)已經(jīng)寫好了一個(gè)基于jquery的插件,接下來(lái)的文章會(huì)詳細(xì)介紹如何使用pjax(ajax+pushState)進(jìn)行無(wú)刷新改變URL瀏覽。
相關(guān)文章
Ajax上傳實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理的方法
這篇文章主要介紹了Ajax上傳實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理的方法,實(shí)例分析了Ajax請(qǐng)求及java處理并返回服務(wù)器端數(shù)據(jù)請(qǐng)求的相關(guān)技巧2015-07-07ajax請(qǐng)求攜帶自定義請(qǐng)求頭header(跨域和同域)案例實(shí)戰(zhàn)教程
這篇文章主要介紹了ajax請(qǐng)求攜帶自定義請(qǐng)求頭header(跨域和同域)案例實(shí)戰(zhàn)教程,ajax請(qǐng)求是有同源策略的,雖然可以應(yīng)用CORS等手段來(lái)實(shí)現(xiàn)跨域,但是這并不是說(shuō)這樣就是“同源”了,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10簡(jiǎn)單實(shí)現(xiàn)ajax獲取跨域數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)ajax獲取跨域數(shù)據(jù)的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04基于iframe實(shí)現(xiàn)ajax跨域請(qǐng)求 獲取網(wǎng)頁(yè)中ajax數(shù)據(jù)
這篇文章主要介紹了基于iframe實(shí)現(xiàn)ajax跨域請(qǐng)求,并獲取網(wǎng)頁(yè)中ajax數(shù)據(jù),如何利用網(wǎng)頁(yè)ajax請(qǐng)求暴露出來(lái)的接口去抓取網(wǎng)頁(yè)數(shù)據(jù)?需要的朋友可以參考下2016-01-01在Ajax中使用get和post所遇到的問(wèn)題及解決辦法
本文重點(diǎn)給大家介紹在ajax中使用get和post所遇到的問(wèn)題及解決辦法,及get請(qǐng)求和post請(qǐng)求的區(qū)別簡(jiǎn)單介紹,本文介紹的非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-06-06Ajax登陸使用Spring Security緩存跳轉(zhuǎn)到登陸前的鏈接
這篇文章主要介紹了Ajax登陸使用Spring Security緩存跳轉(zhuǎn)到登陸前的鏈接,需要的朋友可以參考下2019-04-04