在訪問現(xiàn)在很火的google plus時(shí)，細(xì)心的用戶也許會發(fā)現(xiàn)頁面之間的點(diǎn)擊是通過ajax異步請求的，同時(shí)頁面的URL發(fā)生了了改變。并且能夠很好的支持瀏覽器的前進(jìn)和后退。不禁讓人想問，是什么有這么強(qiáng)大的功能呢？

HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通過這個(gè)接口做到無刷新改變頁面URL的。

與傳統(tǒng)的AJAX的區(qū)別

傳統(tǒng)的ajax有如下的問題：

雖然ajax可以無刷新改變頁面內(nèi)容，但無法改變頁面URL

其次為了更好的可訪問性，內(nèi)容發(fā)生改變后，改變URL的hash。但是hash的方式不能很好的處理瀏覽器的前進(jìn)、后退等問題

有的瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時(shí)去判斷hash是否改變

再有，ajax的使用對搜索引擎很不友好，往往蜘蛛爬到的區(qū)域是空的

為了解決傳統(tǒng)ajax帶來的問題，HTML5里引入了新的API，即：history.pushState, history.replaceState

可以通過pushState和replaceState接口操作瀏覽器歷史，并且改變當(dāng)前頁面的URL。

pushState是將指定的URL添加到瀏覽器歷史里，replaceState是將指定的URL替換當(dāng)前的URL。

如何調(diào)用

state對象除了要title和url之外，也可以添加其他的數(shù)據(jù)，比如：還想將一些發(fā)送ajax的配置給保存起來。

replaceState和pushState是相似的，不需要多做解釋。

如何響應(yīng)瀏覽器的前進(jìn)、后退操作

window對象上提供了onpopstate事件，上面?zhèn)鬟f的state對象會成為event的子對象，這樣就可以拿到存儲的title和URL了。

一些限制

1、無法跨域，這個(gè)是必然的。引用曾經(jīng)在網(wǎng)上看到的一句經(jīng)典的話：“如果javascript可以跨域的話，那他就可以逆天了！”

2、state對象雖然可以存儲很多自定義的屬性，但值不能是個(gè)對象。

對應(yīng)后端的一些處理

這種模式下除了當(dāng)前使用ajax可以無刷新瀏覽外，還要保證直接請求改變的URL后也可以正常瀏覽，所以后端要對這些處理下。

1、對結(jié)合pushState的ajax可以發(fā)送一個(gè)特殊的頭，如： setRequestHeader(‘PJAX', ‘true')。

2、后端獲取到有PJAX=true的header時(shí)，將頁面中通用的部分都不輸出。比如：PHP可以通過下面的判斷

雖然接口上只有pushState、replaceState、onpopstate，但在使用的時(shí)候還是要做很多處理的。

以上就是本文的全部內(nèi)容了，希望大家能夠喜歡。

最新評論