pjax介绍

什么是pjax？

简单来说，pushState + ajax = pjax
ajax 在 2005 年被 Jesse James Garrett 提出，如今已不是一个新鲜技术了。

AJAX = Asynchronous JavaScript and XML（异步的JavaScript 和XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

传统的 ajax 也可以异步无刷新动态加载内容，但在页面 URL 切换上不能自然处理，通过 URL hash 的处理方式则不能很好的适配浏览器的前进、后退，实现效果并不理想。

pjax使用了pushState来改变地址栏的url，这是html5中history的新特性。

在 HTML 文档中，history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。

使用语法 history.pushState(state, title[, url])，详见MDN Web Docs。

pjax原理介绍

pjax的基本思路是，在用户点击一个链接后，通过ajax从服务器获取其HTML，然后用得到的HTML替换页面上指定的部分容器元素的内容，避免了全局刷新。然后，它使用pushState更新浏览器的URL。

pjax的优点

减轻服务端压力

每次只需动态加载页面的部分内容，减少了资源文件的传输，也避免了固定页面结构的重复渲染，由此减轻对服务器的带宽压力，有利于页面加载速度的提升。

优化页面跳转体验

使用pjax后，只需要动态刷新部分页面，避免了传统的页面跳转方式，切换效果更加流畅自然，同时也减轻了浏览器的渲染压力，有利于提升等待时的用户体验。

pjax现有实现方案

推荐以下两个pjax的实现 (目前均停止更新)，第二个是jQuery插件，依赖于jQuery。
https://github.com/MoOx/pjax （https://github.com/PaperStrike/Pjax 为其重构版本）
https://github.com/defunkt/jquery-pjax
在这里简要介绍一下 MoOx/pjax 的使用方法，它具有很强大且方便的功能实现。
首先需要在HTML里引入js：<script src="./pjax.min.js"></script>
定义pjax的配置内容：

var pjax = new Pjax({
  elements: 'a', // 绑定所有链接a标签，点击链接时触发请求
  selectors: ["title", ".Navbar"], // 要替换元素的选择器列表
  switches: { // 定义元素的动态刷新方式
    "title": Pjax.switches.outerHTML, // 默认行为
    ".the-content": function(oldEl, newEl, options) {
      // 默认替换outerHTML，这里可以自定义扩展
      oldEl.outerHTML = newEl.outerHTML;
      this.onSwitch();
    },
  }
})

然后便可以使用它所提供的两个事件（请求前、请求后），来实现想要的效果（如显示进度条、加载完成公式重新渲染等）。

1 2	document.addEventListener('pjax:send', func); document.addEventListener('pjax:complete', func);

至此便可以完成pjax刷新技术了。值得注意的是，受ajax跨域和pushState的同域限制，只能用同域的URL替换，而且State对象不存储DOM等不可序列化的对象。

pjax的应用

目前很多的Hugo、Hexo博客站点都运用了pjax技术，不仅如此，一些大型网站如Facebook, Twitter,Youtube均采用了这种技术。在我近期的修改实现后，本站已经全面启用pjax加载。