什么是pjax？

　　当你点击一个站内的链接的时候，不是做页面跳转，而是只是站内页面刷新。这样的用户体验，比起整个页面都闪一下来说， 好很多。 其中有一个很重要的组成部分， 这些网站的ajax刷新是支持浏览器历史的， 刷新页面的同时， 浏览器地址栏位上面的地址也是会更改， 用浏览器的回退功能也能够回退到上一个页面。 那么如果我们想要实现这样的功能， 我们如何做呢？

　　我发现pjax提供了一个脚本支持这样的功能，这个jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。pjax可以实现局部刷新，和ajax的区别是，pjax的局部刷新，浏览器地址栏的网址会变化。

怎样使用pjax

先添加必要文件：

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

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

然后在js代码中写如下代码：

$(function(){

    //页面主体内容支持pjax

   $(document).pjax('a', '#container', {

          //这是a标签的pjax。#container 表示执行pjax后会发生变化的id，改成你主题的内容主体id或class。timeout是pjax响应时间限制，如果在设定时间内未响应就执行页面转跳，可自由设置。

            fragment:'#container', timeout:1500

   });

    //支持表单提交事件无刷新

   $(document).on('submit', 'form', function (event) {

          //这是提交表单的pjax。form表示所有的提交表单都会执行pjax，比如搜索和提交评论，可自行修改改成你想要执行pjax的form id或class。#container 同上改成你主题的内容主体id或class。

        $.pjax.submit(event, '#container', {

            fragment:'#container', timeout:6000

        });

    });

    //执行pjax开始，在这里添加要重载的代码，可自行添加loading动画代码。

    $(document).on('pjax:send', function() {

        $('body').append('<div class="loading"></div>');

        $('.main').fadeTo(200,0.0);

    }); 

    //执行pjax结束，在这里添加要重载的代码，可自行添加loading动画结束或隐藏代码。

    $(document).on('pjax:complete', function() {

        $('.loading').remove();

        $('.main').fadeTo(500,1); 

    });

});