关于PJAX

PJAX = pushState + ajax,它是是一个jQuery插件，它通过ajax和pushState技术提供了无刷新ajax加载，并且保持了真实的网址、标题等。pjax的工作原理是通过ajax从服务器端获取HTML，在页面中用获取到的HTML替换指定容器元素中的内容。然后使用pushState技术更新浏览器地址栏中的当前地址。

这样的用户体验相比起整个页面重新加载在访问者面前闪一下来说真的是好很多。

使用PJAX

加载PJAX前必须先加载Jquery,当然pjax也有不依赖框架的独立版本。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

调用部分

$(function(){
   // 页面主体内容支持pjax
   $(document).pjax('a', '#container', {
      //这是a标签的pjax。#container 表示执行pjax后会发生变化的容器id(或class)
      //timeout是pjax响应时间限制，如果在设定时间内未响应就执行页面转跳
      fragment:'#container', timeout:6000
   });
  // 支持表单提交事件无刷新
   $(document).on('submit', 'form', function (event) {
      // 这是提交表单的pjax。form表示所有的提交表单都会执行pjax，比如搜索和提交评论
      // 可自行修改改成你想要执行pjax的form id或class
        $.pjax.submit(event, '#container', {
            fragment:'#container', timeout:6000
        });
    });
    // 执行pjax开始，在这里添加要重载的代码，可添加如loading动画一类的代码
    // 比如你用了NProgress，可以直接在这里添加 NProgress.start();
    $(document).on('pjax:send', function() {
        $('body').append('<div class="loading"></div>');
    }); 
    // 执行pjax结束，在这里添加要重载的代码，可添加loading动画结束或隐藏代码
    $(document).on('pjax:complete', function() {
        $('.loading').remove();
    });
});

Typecho全站ajax示例

上面这是比较通用的方法，以Typecho为例，你可以这么写，首先是文章链接等：

$(document).pjax('a[href^="<?php Helper::options()->siteUrl();?>"]:not(a[target="_blank"], a[no-pjax], button[no-pjax])', '#main', {
  fragment:'#main', timeout:6000
});

这里通过选择a标签指向站内Helper::options()->siteUrl()链接，避免错误加载评论者链接或其它站外链接；通过not(a[target="_blank"]和a[no-pjax]避免错误地选择我们希望在新选项卡打开或不希望ajax加载的链接。

接下来是搜索功能的应用，这属于表单提交的pjax加载，和上面是不一样的。

$(document).on('submit', '#search', function(event) {
var theurl = "//" + window.location.hostname + "/search/" + $(this).find("input").val();
  $.pjax.submit(event, '#main', {
    fragment:'#main', timeout:6000 ,url:theurl
  });
});

我的搜索栏form id为#search，根据自己的情况填写即可。

最后，是评论区的pjax加载，这和上面一步是一样的，替换容器为评论列表即可。
事实上，很多网站之前都已经单独开启了评论功能的ajax（ajaxcomment）；这里直接将评论区的提交按钮添加上no-pjax就行了，也就是评论还走原来的ajax方案。