使用 pjax 实现网站无刷新加载

之前也没有研究过pjax，但是没事走访别人博客时看到不少经过pjax优化的网站，响应速度很快，今天看到玖梦博客的一篇《一行代码实现全站pjax无刷新加载》测试后发发现效果确实不错，故发文记录一下。

pjax是什么

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

pjax的工作原理是通过ajax从服务器端获取HTML，在页面中用获取到的HTML替换指定容器元素中的内容。然后使用pushState技术更新浏览器地址栏中的当前地址。

以下两点原因决定了pjax会有更快的浏览体验：

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

项目现状

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

如何使用

1. 客户端

客户端设置分两步：

1. 下载插件，包括jquery1.8+，或者npm安装，这部分参考文档，不赘述。
2. 初始化pjax插件，并有条件的拦截a标签跳转。

初始化

$.fn.pjax

下面代码表示：当selector被点击时，执行ajax请求，并将返回的HTML字符串填充在container标记的位置。

$(document).pjax(selector, [container], options)

参数说明

• selector：string类型，用于click 事件委托 的选择器。
• container：string类型，用于标识唯一pjax容器的选择器。
• options object类型，包含下列选项。

pjax配置选项

可以在全局使用$.pjax.defaults对象改变默认配置：

$.pjax.defaults.timeout = 1200

2. 服务端

服务端也比较简单，监听HTTP的header中有X-PJAX的ajax请求，如果有则返回HTML片段，而不是整个HTML。

API介绍

这部分用于更细粒度的控制。

$.fn.pjax

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

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

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

$.pjax.click

这是一个$.fn.pjax内部使用的底层方法，通过此方法可以在pjax事件之上做更多的事情。本示例使用当前的click上下文来设置一个祖先元素作为容器：

if ($.support.pjax) {
  $(document).on('click', 'a[data-pjax]', function(event) {
    var container = $(this).closest('[data-pjax-container]')
    var containerSelector = '#' + container.id
    $.pjax.click(event, {container: containerSelector})
  })
}

$.pjax.submit

通过pjax提交表单。

$(document).on('submit', 'form[data-pjax]', function(event) {
  $.pjax.submit(event, '#pjax-container')
})

$.pjax.reload

使用pjax机制发起一个当前URL的请求到服务器，并且通过响应的内容替换容器元素中的内容，同时不添加浏览器历史记录。

$.pjax.reload('#pjax-container', options)

$.pjax

手动调用pjax。主要用于非click事件发起pjax请求的情况。

function applyFilters() {
  var url = urlForFilters()
  $.pjax({url: url, container: '#pjax-container'})
}

事件

除了pjax:click和pjax:clicked，其他所有pjax事件都是在pjax容器元素上触发的。

如果您使用了加载指示（如loading图标或“加载中”的文字），pjax:send和pjax:complete这两个事件会比较有用。它们只有在XHR请求（而不是从缓存中加载内容）时才会被触发：

$(document).on('pjax:send', function() {
  $('#loading').show()
})
$(document).on('pjax:complete', function() {
  $('#loading').hide()
})

以下是禁用 pjax:timeout 事件的示例。

$(document).on('pjax:timeout', function(event) {
  // Prevent default timeout redirection behavior
  event.preventDefault()
})