Ryongyon!

这世界上假绅士太多,缺少训练有素的流氓

· 实践教程 · · 2677次浏览

如何使用 PJAX 让你的网站飞起来

前言

在通常的网站中,如果需要链接到其它的页面(不是数据),只能刷新整个网站 做一次链接的跳转.

<body>
    <header>Header</header>
    <main>Content</main>
    <footer>Footer</footer>
</body>

其实 headerfooter 已经不需要重新加载了 如果只去加载主要的数据页面 (Content) 会不会更快一点?

你想到的 Jquery 已经想到了,在 Jquery API 中,提供了这样一个方法

load(url, [data], [callback])

发起 ajax 请求去拿数据页面,获取到页面之后进行选定节点到标签渲染(修改),最终执行完毕 callback.
如果你使用了 load 方法完成了整站的编写,那我想告诉你的是 这是一个悲伤的事情,因为你的网站没有后退功能!!!
使用 load 方法确实能获取一部分页面进行渲染,增加用户的交互性,但是浏览器的地址永远不会改变!,这是因为你并没有跳转页面,你只是一直在发送 ajax 请求而已。终于切入主题了 今天给大家介绍的 PJAX

什么是PJAX?

PJAX 并不是什么新的技术 , 只是在HTML5推出之后 提供了一个 pushState 的方法 可以让你改变浏览器的 url 地址 和 title 而 PJAX 就是 对 Ajax + pushState 的封装 , 同时支持了缓存和本地存储 , 并且支持动画展现渲染的标签(支持自定义动画)

项目主页: https://pjax.herokuapp.com

PJAX 开源项目地址:https://github.com/defunkt/jquery-pjax

有哪些公司在使用?

Github,Facebook,Weibo,知乎 ……

如何使用?

使用方式非常简单 , 首先下载好jquery.pjax.js 导入到你项目

$.pjax({
    selector : 'a[data-pjax]',
    container : '#main-container', //内容替换的容器
    show : 'fade', //展现的动画,支持默认和fade, 可以自定义动画方式,这里为自定义的function即可。
    cache : false, //是否使用缓存
    storage : false, //是否使用本地存储
    titleSuffix : '-pjax', //标题后缀
    filter : function() {} //过滤器
})

当点击标签带 data-pjax 的 a 标签时 , PJAX 会自动拦截默认 a 标签事件 , 并且会发起一个 Ajax 请求 (触发 pjax.start) 去获

取数据页面 , 当获取到页面之后(触发 pjax.end) 进行页面渲染.

而我们的服务端只需要判断在 request 请求头里面是否含有 X-PJAX 就知道返回什么页面了。

Java代码:

String pjax = request.getHeader("X-PJAX");
if(pjax != null && pjax.equals("true")){
    //返回部分页面
}else{
    //返回正常页面
}

强烈推荐 PJAX 配合 NProgress 使用 , 因为这样用户体验会更好。

container.on("pjax.start", function() {
    NProgress.start();
})

container.on("pjax.end", function() {
    NProgress.done();
})

总结

说了 PJAX 这么多好处 , 那有没有什么坏处呢 ? 答案是肯定的。

由于 PJAX 几乎所有的请求都是基于 Ajax 的 , 那么在获取到部分页面的时候 页面会带上处理当前页面数据的 js 代码 , 那么每一次点击都会让浏览器去执行这些代码。

由于浏览器一旦加载了 js 就不能释放 , 除非让当前页面刷新 , 如果需要加载的页面非常多 页面可能会出现卡顿 不过解决方法也非常简单: 刷新一下就好了。

评论 (12条)
  1. 朋友 交换链接吗

    回复
    1. 拾叁 博主
      @Namesilo

      可以噢,留个QQ

      回复
  2. 拾叁 博主
    @

    谢谢!

    回复
  3. 很好!!!!!!谢谢!!!!!!

    回复
  4. 谢谢博主分享 :grin:

    回复
  5. 寂寞

    :oops: :oops: :oops: :oops: :oops: :oops: 棒棒的

    回复
  6. :eek: 测试一下ua

    回复
    1. 拾叁 博主
      @何炜

      是不是很酷 :cool:

      回复
      1. @拾叁

        :shock: 对!我也弄了 :mrgreen:

        回复
        1. 拾叁 博主
          @何炜

          哈哈哈对,多说早就有啦。不过我用不习惯多说,就把这个功能扒到自带的评论系统了

          回复
  7. 博客开了pjax,然后卡死了~带着机子一起卡

    回复
    1. 拾叁 博主
      @xema

      那么博主应该检查一下代码方面了。如果你访问本站不会卡死的话代表是没有问题的,因为本站就是开启了PJAX

      回复