Pjax局部无刷新技术教程

https://github.com/defunkt/jquery-pjax

将jquery.pjax.js部署到你的页面中，将需要使用pjax的a链接进行绑定（不能绑定外域的url），如:

$.pjax({

    selector: 'a',

    container: '#container', //内容替换的容器

    show: 'fade',  //展现的动画，支持默认和fade, 可以自定义动画方式，这里为自定义的function即可。

    cache: true,  //是否使用缓存

    storage: true,  //是否使用本地存储

    titleSuffix: '', //标题后缀

    filter: function(){},

    callback: function(){}

})

参数及含义

=== 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的准备工作；

    检查你的网站是否引入1.7.0版本以上的jquery.js，如果没有请全局引入

1.新浪CDN提速：

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>

2.下载本地化jq：（本文底部）

<script type="text/javascript" src="....自己写...../jquery.js"></script>

    1.7.0版本以上的才有pushState的封装。

二：开始整合Pjax；

     1.下载pjax.js （本文底部）；

     2.在你喜欢的位置（最好body代码结束前）引入pjax.js；

三：使用pjax；

    编辑模版footer.php在</body>标记结束前插入：

<script>

    $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});

</script>

    这句话是什么意思呢？--绑定本页面非新窗口打开的所有本域链接，链接点击之后，替换contentleft的容器的内容为新内容contentleft，ajax超时时间8秒；

    OK，因为每个模版的替换区不同，修改掉contentleft容器，保存。

    现在看看，是否可以无刷新加载了？

四：解决pjax的缓冲--加入等待动画；

    pjax.js提供了两个接口；

<div class="pjax_loading"></div>

<script>

$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画；

    $(".pjax_loading").css("display", "block");

});

$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画；

    $(".pjax_loading").css("display", "none");

});

</script>

    当然要为pjax_loading定义css，这里就不多说了。

五：解决pjax之后，容器中一些jq事件失效的问题；

    问题比如：pjax之后多说评论框不加载，ajax评论不能提交等等问题。

    问题原因：原先容器绑定的事件被新容器替换掉了，新容器的div没有绑定事件，所以点击无效。

    解决方法：利用pjax的加载完成回调函数，重新绑定事件。

    例：

六：全部代码汇总一下，就是这样：

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script> 

<script type="text/javascript" src="你的域名/pjax.js"></script>

<div class="pjax_loading"></div>

<script>

$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});

$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画；

    $(".pjax_loading").css("display", "block");

});

$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画；

    $(".pjax_loading").css("display", "none");

    pajx_loadDuodsuo();

});

function pajx_loadDuodsuo(){

    var dus=$(".ds-thread");

    if($(dus).length==1){

        var el = document.createElement('div');

        el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数

        el.setAttribute('data-url',$(dus).attr("data-url"));

        DUOSHUO.EmbedThread(el);

        $(dus).html(el);

    }

}

</script>

OK，我们发现多说可以正常载入了。

打赏

感谢支持与鼓励～