通過(guò)pjax實(shí)現(xiàn)無(wú)刷新翻頁(yè)(兼容新版jquery)

更新時(shí)間：2014年01月31日 19:10:29 作者：

這篇文章主要介紹了通過(guò)pjax實(shí)現(xiàn)無(wú)刷新翻頁(yè)，兼容新版jquery，使用心得方法,需要的朋友可以參考下

pushState是一個(gè)可以操作history的api，該api的介紹和使用請(qǐng)見(jiàn)這里：http://www.welefen.com/use-ajax-and-pushstate.html

目前已經(jīng)有http://github.com/, http://plus.google.com, http://www.welefen.com 等網(wǎng)站已經(jīng)使用。

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

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

并且展現(xiàn)方式支持動(dòng)畫(huà)技術(shù)，可以使用系統(tǒng)自帶的動(dòng)畫(huà)方式，也可以自定義動(dòng)畫(huà)展現(xiàn)方式。

關(guān)于pjax這里就不多介紹了，簡(jiǎn)單易用，輕松地實(shí)現(xiàn)部分刷新，告別鏈接帶來(lái)的閃爍。
之前看過(guò)pjax并實(shí)現(xiàn)了demo，還寫(xiě)了篇筆記，不過(guò)jquery 1.9把live()方法刪掉了，新版pjax也隨之換了用on()方法實(shí)現(xiàn)，最近項(xiàng)目有用到，所以了解了新的使用方法，這里也做一個(gè)新的筆記。

環(huán)境：
jquery 1.10.2 下載
jquery.pjax.js 下載

使用方法：
監(jiān)控所有class為pjaxlink的鏈接，采用pjax更新鏈接頁(yè)面中id為T(mén)oInsert的容器內(nèi)容到本頁(yè)面中id為Content的容器中。若獲取內(nèi)容時(shí)間超過(guò)5秒，則直接跳轉(zhuǎn)：

復(fù)制代碼代碼如下:

$(document).pjax('a.pjaxlink', '#Content', {fragment:'#ToInsert', timeout:5000});

使用實(shí)例：
原始頁(yè)面是通過(guò)跳轉(zhuǎn)的翻頁(yè)，我在不改變頁(yè)面內(nèi)容的前提下，使用pjax監(jiān)控翻頁(yè)鏈接，僅更新列表（保證列表容器是分頁(yè)容器的父節(jié)點(diǎn)）的內(nèi)容。

復(fù)制代碼代碼如下:

if ($.support.pjax) {
    //遍歷所有分頁(yè)容器
    $('.pagercontainer').each(function(){
        //取得列表容器
        $listcontainer=$(this).parent();
        //取得列表容器的ID
        var listcontainerid=$listcontainer.attr('id');
        //用pjax監(jiān)控所有分頁(yè)鏈接并定義pjax來(lái)實(shí)現(xiàn)更新
        $(document).pjax('#'+listcontainerid+' .pagercontainer a', '#'+listcontainerid, {fragment:'#'+listcontainerid, timeout:5000});
    });
    $(document).on('pjax:send', function() {
        //在pjax發(fā)送請(qǐng)求時(shí)，顯示loading動(dòng)畫(huà)層
        $('#loading').show();
    });
    $(document).on('pjax:complete', function() {
        //在pjax處理完成后，隱藏loading動(dòng)畫(huà)層
        //由于速度太快會(huì)導(dǎo)到loading層閃爍，影響體驗(yàn)，所以在此加上500毫秒延遲
        setTimeout(function(){$('#loading').hide()},500);
    });
}