上篇文章講到如何使用ajax+pushState打造無刷新改變URL的方式。雖然這種方式是將ajax、history.pushState、history.replaceStatte、window.onpopstate等幾個技術(shù)點結(jié)合，但在具體使用中還是要考慮到很多情況的，如：

1、改變內(nèi)容的時候也要改變title

2、不支持的瀏覽器如何處理

3、事件如何綁定，是否使用了delegate模式

4、ajax異常處理

5、ajax前后的自定義事件等

介于有上面等多的疑問，將ajax和pushState封裝下，供后面使用還是非常有幫助的。本文就是對pjax(ajax+pushState)的一個介紹

介紹

pjax是對ajax + pushState的封裝，讓你可以很方便的使用pushState技術(shù)。

同時支持了緩存和本地存儲，下次訪問的時候直接讀取本地數(shù)據(jù)，無需在次訪問。

并且展現(xiàn)方式支持動畫技術(shù)，可以使用系統(tǒng)自帶的動畫方式，也可以自定義動畫展現(xiàn)方式。

目前只提供了基于jquery的版本，后續(xù)將增加基于qwrap, tangram等版本。

如何使用

將jquery.pjax.js部署到你的頁面中，將需要使用pjax的a鏈接進(jìn)行綁定（不能綁定外域的url），如:

$(’a’).pjax({ container: ’#container’, //內(nèi)容替換的容器 fx: ’fade’, //展現(xiàn)的動畫，支持默認(rèn)和fade, 可以自定義動畫方式。 cache: true, //是否使用緩存 storage: true, //是否使用本地存儲 titleSuffix: ’’ //標(biāo)題后綴})

事件(events)

一般情況下使用ajax來獲取數(shù)據(jù)的時候，我們都希望有個loading的效果，pjax本身不提供這個功能，但提供了2個相關(guān)的事件。 如果需要這樣的功能，可以在事件里實現(xiàn)這種功能。

start.pjax 在pjax ajax發(fā)送request之前調(diào)用end.pjax 在phax ajax結(jié)束時調(diào)用

這樣你可以在start.pjax事件里顯示loading效果，在end.pjax事件里隱藏loading了。如：

$(’#container’).bind(’start.pjax’, function(){ $(’#loading’).show();})$(’#container’).bind(’end.pjax’, function(){ $(’#loading’).hide();})瀏覽器支持

提供了history.pushState接口的瀏覽器才支持這個功能，$.support.pjax是用來判斷瀏覽器是否支持的。

如果瀏覽器不支持這個功能而調(diào)用pjax方法的話，實際上什么都沒做，還是使用默認(rèn)的鏈接響應(yīng)機(jī)制

后端需要做的

類似于ajax, 異步請求的時候后端不能將公用的內(nèi)容也返回。

所以需要一個判斷是否pjax請求的接口。如：php可以借鑒下面的實現(xiàn)

function gplus_is_pjax(){ return array_key_exists(’HTTP_X_PJAX’, $_SERVER) && $_SERVER[’HTTP_X_PJAX’] === ’true’;}下載源代碼

pjax已經(jīng)開源，代碼放在https://github.com/welefen/pjax 上，歡迎大家訪問和下載。

其他

實際上該類的封裝借鑒于https://github.com/defunkt/jquery-pjax

對其增加了緩存、本地存儲和動畫等功能，并且將一些參數(shù)進(jìn)行了優(yōu)化。