pjax：ajax和pushState結合的js函式庫

將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 在pjax ajax發送request之前調用

end.pjax 在phax ajax結束時調用

這樣你可以在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

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