pjax：ajax和pushState結合的js庫——實現網站無刷新加載頁面

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

1、改變內容的時候也要改變title

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

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

4、ajax異常處理

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

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

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

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

并且展現方式支持動畫技術，可以使用系統自帶的動畫方式，也可以自定義動畫展現方式。

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

如何使用

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

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

事件(events)

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

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

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

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

如果瀏覽器不支持這個功能而調用pjax方法的話，實際上什么都沒做，還是使用默認的鏈接響應機制

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

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

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

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

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

對其增加了緩存、本地存儲和動畫等功能，并且將一些參數進行了優化。