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

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

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

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

4、ajax異常處理

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

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

介紹

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

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

并且展現(xiàn)方式支持動(dòng)畫技術(shù)，可以使用系統(tǒng)自帶的動(dòng)畫方式，也可以自定義動(dò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)的動(dòng)畫，支持默認(rèn)和fade, 可以自定義動(dòng)畫方式。 cache: true, //是否使用緩存 storage: true, //是否使用本地存儲(chǔ) titleSuffix: ’’ //標(biāo)題后綴})

事件(events)

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

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

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

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

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

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

后端需要做的

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

所以需要一個(gè)判斷是否pjax請(qǐng)求的接口。如：php可以借鑒下面的實(shí)現(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 上，歡迎大家訪問和下載。

其他

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

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