pjax实践

学习了pjax技术，并尝试自己写了一款wordpress主题作为实践。 <!-- more -->

pjax是什么

pjax是对ajax + pushState的封装，让你可以很方便的使用pushState技术。 pushState是一个可以操作history的api，该api的介绍和使用请见这里： http://www.welefen.com/use-ajax-and-pushstate.html

pjax项目

pjax的github项目 welefen的pjax 相对于前者，后者支持了缓存和本地存储，下次访问的时候直接读取本地数据，无需在次访问。 并且展现方式支持动画技术，可以使用系统自带的动画方式，也可以自定义动画展现方式。

pjax实例

pjaxphp简单实例 我就是根据上面这个例子，写了我的运用pjax的主题。

本主题

本主题是为了满足我自己的需要，极简。

相关代码

完整代码见我的github 我这贴出重要代码来解释

header.php

必须含的代码

<script src="jquery.min.js"></script>
<script src="jquery.pjax.js"></script>

相关设置

<script type="text/javascript">
        $(document).ready(function(){
        $.pjax({selector: 'a',
        container: '#main', //内容替换的容器
        show: 'fade',  //展现的动画，支持默认和fade, 可以自定义动画方式，这里为自定义的function即可。
        titleSuffix: ' | Golmic', //标题后缀
        filter: function(){},
        callback: function(){}
        })});
   </script>

结尾处应该这样写：

<div id='main'>

index.php

<?php if (!is_pjax()){include('header.php');};?>
<div></div>
<?php if (!is_pjax()){include('footer.php');};?>

footer.php

</div></body></html>

functions.php

后台需要有判断是否为pjax请求的函数，在wordpress中就是functions.php

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

jquery.pjax.js

pjax.defaultOptions = {
    timeout : 60000,//请求时间，如果超过这个时间将会采用通常的加载方式
    element : null,
    cache : 24 * 3600, // 缓存时间, 0为不缓存, 单位为秒
    storage : true, // 是否使用localstorage将数据保存到本地
    url : '', // 链接地址
    push : true, // true is push, false is replace, null for do nothing
    show : '', // 展示的动画
    title : '', // 标题
    titleSuffix : '',// 标题后缀
    type : 'GET',
    data : {
        pjax : true
    },
    dataType : 'html',
    callback : null, // 回调函数
    // for jquery
    beforeSend : function(xhr) {
        $(pjax.options.container).trigger('pjax.start', [ xhr, pjax.options ]);
        xhr && xhr.setRequestHeader('X-PJAX', true);
        /*开始pjax加载前运行的函数*/
        /*$("#wrapper").css("display","block");*/
        $(".wrap").css("display","block");
        $('.zb').css("display","block");
        /*开始pjax加载前运行的函数*/
    },
    error : function() {
        pjax.options.callback && pjax.options.callback.call(pjax.options.element, {
            type : 'error'
        });
        location.href = pjax.options.url;
    },
    complete : function(xhr) {
        $(pjax.options.container).trigger('pjax.end', [ xhr, pjax.options ]);
        /*结束pjax加载后进行的函数*/
        /*$("#wrapper").css("display","none");*/
        $(".wrap").css("display","none");
        $('.zb').css("display","none");
        /*结束pjax加载后进行的函数*/
    }
};