首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Pjax的引见及妙用

2013-09-05 
Pjax的介绍及妙用  什么是pjax?  现在很多网站( facebook, twitter)都支持这样的一种浏览方式, 当你点击一

Pjax的介绍及妙用

  什么是pjax?

  现在很多网站( facebook, twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳转, 而是只是站内页面刷新。 这样的用户体验, 比起整个页面都闪一下来说, 好很多。 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。 那么如果我们想要实现这样的功能, 我们如何做呢? 我发现pjax提供了一个脚本支持这样的功能。 pjax项目地址在 https://github.com/defunkt/jquery-pjax 。 实际的效果见: http://pjax.heroku.com/ 没有勾选pjax的时候, 点击链接是跳转的。 勾选了之后, 链接都是变成了ajax刷新。


  为什么要用pjax?

 

    好处

  用户体验提升

  页面跳转的时候人眼需要对整个页面作重新识别, 刷新部分页面的时候, 只需要重新识别其中一块区域。自从我在自己的网站 GuruDigger 上面采用了pjax技术后, 不由觉得访问其他只有页面跳转的网站难受了许多。 同时, 由于刷新部分页面的时候提供了一个loading的提示, 以及在刷新的时候旧页面还是显示在浏览器中, 用户能够容忍更长的页面加载时间。

  极大地减少带宽消耗和服务器消耗

  由于只是刷新部分页面, 大部分的请求(css/js)都不会重新获取, 网站带有用户登录信息的外框部分都不需要重新生成了。 虽然我没有具体统计这部分的消耗, 我估计至少有40%以上的请求, 30%以上的服务器消耗被节省了。


   坏处有:

  IE6等历史浏览器的支持

  虽然我没有实际测试, 但是由于pjax利用到了新的标准, 旧的浏览器兼容会有问题。 不过pjax本身支持fallback, 当发现浏览器不支持该功能的时候, 会回到原始的页面跳转上面去。

  复杂的服务器端支持

  服务器端需要根据过来的请求, 判断是作全页面渲染还是部分页面渲染, 相对来说系统复杂度增大了。 不过对于设计良好的服务器代码, 支持这样的功能不会有太大的问题。

  综合起来, 由于用户体验和资源利用率的提升, 坏处是可以完全得到弥补的。若将来不要求支持老旧版本的浏览器的话推荐大家使用。


   如何使用pjax?

  直接看 官方文档 就可以了。 我觉得做技术的人要养成看一手的技术资料的习惯。 有一个rails针对pjax的 gem插件 可以直接使用。 也有 django的支持 。


  pjax的原理

  为了能够处理问题, 我们需要能够理解pjax的运作方式。 pjax的代码只有一个文件: https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js 如果有能力, 可以自己去看一遍。 我这里解释一下原理。 首先, 我们在html里面指定, 需要做pjax的链接内容是哪些, 以及点击之后需要更新的部分(放在data-pjax属性里面):


options.beforeSend = function(xhr, settings) {  if (settings.timeout > 0) {    timeoutTimer = setTimeout(function() {      if (fire('pjax:timeout', [xhr, options]))        xhr.abort('timeout')    }, settings.timeout)    // Clear timeout setting so jquerys internal timeout isn't invoked    settings.timeout = 0}

  说到这里,Pjax就像大家介绍到这里了,这么多的好处呈现到你的面前,还有啥理由不去试一试它的妙用呢?!

1楼mynote昨天 19:05
代码写得不错。

热点排行