pjax = pushState + ajax

pjax是一个jQuery插件，它通过ajax和pushState技术提供了极速的（无刷新ajax加载）浏览体验，并且保持了真实的地址、网页标题，浏览器的后退（前进）按钮也可以正常使用。

pjax的工作原理是通过ajax从服务器端获取HTML，在页面中用获取到的HTML替换指定容器元素中的内容。然后使用pushState技术更新浏览器地址栏中的当前地址。以下两点原因决定了pjax会有更快的浏览体验：

  • 不存在页面资源（js/css）的重复加载和应用；
  • 如果服务器端配置了pjax，它可以只渲染页面局部内容，从而避免服务器渲染完整布局的额外开销。

项目现状

jquery-pjax的维护方向：可能会继续修复重要的bug，但其功能不会再发生变化，即不会再实现新功能，也不会再扩展现有功能。

安装

pjax依赖于jQuery 1.8或者更高版本。

通过npm安装

$ npm install jquery-pjax

通过js引入

下载 jquery.pjax.js 插件并在页面中引用：

curl -LO https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js

方法

$.fn.pjax

最简单常见的pjax使用方法如下：

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

通过这种方式可以让页面中所有的链接都实现pjax加载，并指定#pjax-container作为容器元素。

如果您正在迁移已有网站，可能不希望在每个地方都使用pjax。那么您可以用data-pjax来注明这是一个pjax链接，然后使用a[data-pjax]来代替全局选择器a。或者，您也可以使用在<div data-pjax>容器中的<a data-pjax href="...">链接作为选择器。

$(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-container')

欢迎欢迎~热烈欢迎~