pjax學習

PJAX 介紹

紅薯?發布于 2012/04/11 22:06

?

閱讀 61K+

?

收藏?116

?

?評論?11

jQuery.Pjax?kissy

開發四年只會寫業務代碼，分布式高并發都不會還做程序員？->>>???

介紹

pushState是一個可以操作history的api，該api的介紹和使用請見這里：http://www.welefen.com/use-ajax-and-pushstate.html

目前已經有http://github.com/,?http://plus.google.com,?http://www.welefen.com?等網站已經使用。

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

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

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

如何使用

jquery版

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

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

?

qwrap版

qwrap版需要在頁面引入qwrap和對應的ajax組件。

qwrap見：?https://github.com/jkisjk/qwrap

對應的ajax組件見：?https://github.com/jkisjk/qwrap/tree/master/resource/js/wagang/ajax

或者你直接引用我打包好的：?http://www.welefen.com/wp-content/themes/gplus/js/qwrap.js?由于我的空間速度不咋地，建議你另存為。

    QW.pjax(selector: 'a',container: '#container',cache: true, storage: true, titleSuffix: '', filter: function(){}, callback: function(){} })

?

kissy版

kissy版需要在頁面引入kissy。

kissy見：?http://docs.kissyui.com/

        KISSY.pjax(selector: 'a',container: '#container',cache: true, storage: true, titleSuffix: '', filter: function(){}, callback: function(){} })

?

由于kissy核心沒有引用sizzle, 只支持一些簡單的selector, 所以selector參數的值最好只為a， 對于一些不使用pjax的鏈接，可以通過filter函數參數進行過濾，具體的使用方法見下面的參數說明。

參數及含義

=== options.selector

給哪些selector綁定pjax事件，一般的為："a", 如果要去掉一些外連的URL， 這里的selector可以為: "a[href^='http://www.welefen.com']"

，表示域名是www.welefen.com下才有pjax事件（也就是站內）。

=== options.container

內容變換容器，是指哪個容器里的內容發生的變換，如： '#content',

=== options.cache

緩存pjax的內容，對于更新不頻繁的頁面來說，緩存pjax內容可以減少HTTP請求數

options.cache的值是緩存時間，單位為秒，默認為: 24*3600(一天)

=== options.storage

是否使用本地存儲進行內容的緩存，使用本地存儲緩存的話即使關閉瀏覽器后，下次訪問如果緩存時間有效的話會直接讀取緩存的內容，避免重新請求了。

=== options.titleSuffix

標題后綴。

對于pjax顯示標題，首先會從返回內容里查找，如果沒有的話，會取當前a標簽的title值，并可以指定統一的后綴

=== options.filter

過濾函數，雖然options.selector可以寫個比較復雜的選擇器，但有時候還要過濾一些URL，如：后臺的URL。

這時候就可以使用options.filter函數進行過濾了。如：

    {fitler: function(href){//對于wordpress后臺的URL和wp-content里的URL不使用pjaxif(href.indexOf('/wp-admin') || href.indexOf('/wp-content')){ return true; } } }

?

對于要過濾掉的URL， 需要返回值為true。

=== options.callback

回調函數，這個函數不同于pjax.start和pjax.end（這2個事件下面描述）事件。

該函數會在每個階段都會執行，即使pjax發生error的時候，并且會傳遞一個參數標明當前的狀態，如：

    {callback: function(status){ var type = status.type; switch(type){ case 'success': ;break; //正常 case 'cache':;break; //讀取緩存 case 'error': ;break; //發生異常 case 'hash': ;break; //只是hash變化 } } }

?

事件(events)

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

如果需要這樣的功能，可以在事件里實現這種功能。

• pjax.start 在pjax ajax發送request之前調用
• pjax.end 在phax ajax結束時調用

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

    $('#container').bind('pjax.start', function(){ $('#loading').show(); }) $('#container').bind('pjax.end', function(){ $('#loading').hide(); })

瀏覽器支持

提供了history.pushState接口的瀏覽器才支持這個功能

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

后端需要做的

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

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

    function is_pjax(){ return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']; } 

其他

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

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