表現(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。

如何使用

replaceState和pushState是相似的，這里就不多介紹了。
如何響應(yīng)瀏覽器的前進(jìn)、后退操作

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

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ò)下面的判斷

針對(duì)這個(gè)已經(jīng)寫好了一個(gè)基于jquery的插件，接下來(lái)的文章會(huì)詳細(xì)介紹如何使用pjax(ajax+pushState)進(jìn)行無(wú)刷新改變URL瀏覽。

最新評(píng)論