pjax學習

開發四年只會寫業務代碼，分佈式高併發都不會還作程序員？->>>

介紹

pushState是一個能夠操做history的api，該api的介紹和使用請見這裏：http://www.welefen.com/use-ajax-and-pushstate.htmljavascript

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

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

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

而且展示方式支持動畫技術，可使用系統自帶的動畫方式，也能夠自定義動畫展示方式。java

如何使用

jquery版

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

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

qwrap版

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

qwrap見： https://github.com/jkisjk/qwrap程序員

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

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

    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不使用pjax if(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

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

PJAX 介紹

介紹