目录

前言

传统ajax,只能异步获取到数据,但是不能动态的改变网页地址。

pjax即ajax+history.pushState

HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。

最典型的应用网站是github.com,本站也加入了pjax

我使用的是welefen封装过的pjax的jQuery版本

  • 同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。
  • 并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。

使用步骤

1. 下载jquery.pjax.js
下载地址
引用下载到的jquery.pjax.js到header.php中

2. 对a链接进行使用pjax绑定

//本站实例
jQuery(document).ready(function(){
    var $=jQuery; 
        //绑定链接
    $.pjax({
        selector: "a[href^='http://iyanlei.com'][href$='.html']",
        container: '.ajaxdiv', //内容替换的容器
        show: 'slide',  //展现的动画,支持默认和fade, 可以自定义动画方式,这里为自定义的function即可。
        cache: false,  //是否使用缓存
        storage: true,  //是否使用本地存储
        titleSuffix: ' | Ray', //标题后缀
        filter: function(){},
        callback: function(status){
            $("#nav-menu").addClass("animated fadeInUp");
        }
    }); 
        //绑定跳转开始事件
    $(".ajaxdiv").bind("pjax.start",
         function() { 
            $(".ajaxdiv").css("opacity","0.6");
            $(".spinner").css("opacity","1");
            $(".spinner").show();               
            
     });
        //绑定跳转结束事件
    $(".ajaxdiv").bind("pjax.end",
         function() {  
            $(".spinner").hide();
            $(".ajaxdiv").css("opacity","1");
            // Main
            initHeader();
            addListeners();
            if (navigator.userAgent.indexOf('Firefox') >= 0){
                document.documentElement.scrollTop=120;
            }
            else
            {
               $('body').animate({scrollTop: 120});
            }
             
     }); 
     
});   

3. typecho后端修改
因为pjax使用的还是AJAX,所以 异步请求的时候后端不能将公用的内容也返回。
即需要一个判断是否pjax请求的接口,判断如果是pjax请求时,仅返回公共的数据即可
在主题下的functions.php中声明如下函数

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

4. typecho页面修改
可以在head.php和footer.php等的页面中添加判断,如:

//请在公共部分加入下面的判断
<?php if (!is_pjax()) { ?>
... //公共数据
<?php } ?>

参考资料

HTML 5 Web 存储
pjax
HTML5/history