pjax 用法

  1. pjax 是什么
  2. Demo
  3. 详细文档
    1. 参数
    2. pjax options
    3. Events

最近在开发一款 hexo 主题 3-hexo,其中使用了 pjax 大大提高了用户体验和加载速度,在此简单介绍一下 pjax 的用法 github 链接

pjax 是什么

pjax 是一款 jQuery 插件,使用了 ajax 和 pushState 的技术,在保留真正永久链接,网页标题和可用的返回功能的情况下,带来一种快速的浏览体验。 – 官方介绍

用人话说,就是当跳转过去的网页和当前网页的一部分是一样的,这时可以通过 pjax 就会从响应页面中取出 不同的那部分 (需指定),替换掉原来的内容。 如果在服务端判断处理,直接返回 不同的那部分内容,这样就可以减少带宽占用,提升加载速度。

这样做的优势:

  1. 由于从服务器取回的数据量变少,加载速度将会提升。
  2. 并且采用异步刷新页面中的不一样的地方,用户体验也是满满的。
  3. 保留了浏览器回退的功能(解决了 ajax 的尴尬)

好了,开始操作。

Demo

第一步:引入 jQuery 和 jQuery.pjax

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>

第二步:将指定的 a 的链接,转为 pjax 风格

/* 将 #menu 中的 a 的链接的页面,只取回 class=pjax 元素中的内容,替换掉当前页面 class=pjax 元素中的内容 */
$(document).pjax ('.#menu a', '.pjax', {fragment:'.pjax', timeout:8000});

第三步:如果需要在请求的过程中做一些自定义的事件,可以使用下面的方法

$(document).on ({
  'pjax:click': function () {
    // 点击链接时,需要触发的事件写到这里
  },
  'pjax:start': function () {
    // 当开始获取请求时,需要触发的事件写在这里
  },
  'pjax:end': function () {
    // 当请求完成后,需要触发的事件写在这里
  }
});

结束。

详细文档

翻译于官方

参数

$(document).pjax (selector, [container], options)
  1. selector 触发点击事件的选择器,String 类型
  2. container 一个选择器,为唯一的 pjax 容器
  3. options 一个可以包含下面这些选项的对象

pjax options

key default description
timeout 650 ajax 超时时间,单位毫秒,超时后将请求整个页面进行刷新
push true 使用 pushState 添加一个浏览器历史导航条目
replace false 替换 URL,而不添加浏览器历史条目
maxCacheLength 20 历史内容 cache 的最大 size
version string : 当前 pjax 版本
scrollTo 0 垂直位置滚动,为了避免改变滚动条位置
type “GET” 可以查看 jQuery.ajax ()
dataType “html” 可以查看 jQuery.ajax ()
container css 选择器,此元素内容将被替换
url link.href string: ajax 请求的 URL
target link eventually the relatedTarget value for pjax events
fragment 从 ajax 响应的页面中抽取的‘片段’

Events

除了 pjax:clickpjax:clicked 外的所有 pjax 事件从 pjax 容器中触发,是不需要点击链接的。
** 所有事件的生命周期在通过 pjax 请求链接的过程中 **

event cancel arguments notes
pjax:click ✔︎ options 在一个链接被激活(点击)时触发此事件,可以在此取消阻止 pjax
pjax:beforeSend ✔︎ xhr, options 可以设置 XHR 头
pjax:start xhr, options
pjax:send xhr, options
pjax:clicked options 当链接被点击,并且已经开始 pjax 请求后触发
pjax:beforeReplace contents, options 从服务器已经加载到 HTML 内容,在替换 HTML 内容之前触发
pjax:success data, status, xhr, options 从服务器已经加载到 HTML 内容,在替换 HTML 内容之后触发
pjax:timeout ✔︎ xhr, options 页面将会在 options.timeout 之后直接发起请求刷新页面,除非取消 pjax
pjax:error ✔︎ xhr, textStatus, error, options ajax 错误,将会请求刷新页面,除非取消 pjax
pjax:complete xhr, textStatus, options 不管结果是什么,在 ajax 后,都触发
pjax:end xhr, options

** 生命周期在浏览器返回或前进时触发 **

event cancel arguments notes
pjax:popstate 事件方向 (前进,后退) 属性: “back”/“forward”
pjax:start null, options 替换内容前
pjax:beforeReplace contents, options 从 cache 中读取内容后,替换 html 前
pjax:end null, options 替换内容后

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com

×

喜欢就点赞,疼爱就打赏