Pjax的使用

什么是pjax?

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

为什么要用pjax?

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属性里面）:

?

$(‘a[data-pjax]‘).pjax()

当加载了pjax脚本之后， 它会拦截这些链接的事件， 然后包装成一个ajax请求， 发送给服务器。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$.fn.pjax = function( container, options ) {

  return this.live(‘click.pjax‘, function(event){

    handleClick(event, container, options)

  })

}

function handleClick(event, container, options) {

  $.pjax($.extend({}, defaults, options))

  ...

  event.preventDefault()

}

var pjax = $.pjax = function( options ) {

  ...

  pjax.xhr = $.ajax(options)

}

这个请求带有X-PJAX的HEADER标识， 服务器在收到这样的请求的时候， 就知道只需要渲染部分页面返回就可以了。

?


1

2

xhr.setRequestHeader(‘X-PJAX‘, ‘true‘)

xhr.setRequestHeader(‘X-PJAX-Container‘, context.selector)

pjax接受到返回的请求之后， 更新data-pjax指定的区域， 同时也会更新浏览器的地址。

?


1

2

3

4

5

6

options.success = function(data, status, xhr) {

  var container = extractContainer(data, xhr, options)

  ...

  if (container.title) document.title = container.title

  context.html(container.contents)

}

为了能够支持浏览器的后退， 利用到了history的api， 记录下来对应的信息，

?


1

2

3

4

5

6

7

8

9

10

11

pjax.state = {

  id: options.id || uniqueId(),

  url: container.url,

  container: context.selector,

  fragment: options.fragment,

  timeout: options.timeout

}

if (options.push || options.replace) {

  window.history.replaceState(pjax.state, container.title, container.url)

}

当浏览器后退的时候， 拦截事件， 根据记录的历史信息， 产生一个新的ajax请求。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

$(window).bind(‘popstate‘, function(event){

  var state = event.state

  if (state && state.container) {

    var container = $(state.container)

    if (container.length) {

      ...

      var options = {

        id: state.id,

        url: state.url,

        container: container,

        push: false,

        fragment: state.fragment,

        timeout: state.timeout,

        scrollTo: false

      }

      if (contents) {

        // pjax event is deprecated

        $(document).trigger(‘pjax‘, [null, options])

        container.trigger(‘pjax:start‘, [null, options])

        // end.pjax event is deprecated

        container.trigger(‘start.pjax‘, [null, options])

        container.html(contents)

        pjax.state = state

        container.trigger(‘pjax:end‘, [null, options])

        // end.pjax event is deprecated

        container.trigger(‘end.pjax‘, [null, options])

      } else {

        $.pjax(options)

      }

      ...

    }

  }

}

为了支持fallback， 一个是在加载的时候判断浏览器是否支持history push state API：

?


1

2

3

4

5

// Is pjax supported by this browser?

$.support.pjax =

  window.history && window.history.pushState && window.history.replaceState

  // pushState isn‘t reliable on iOS until 5.

  && !navigator.userAgent.match(/((iPod|iPhone|iPad).+\bOS\s+[1-4]|WebApps\/.+CFNetwork)/)

另一个是当发现请求一段时间没有回复的时候（可以设置参数timeout）， 直接做页面跳转。

?


1

2

3

4

5

6

7

8

9

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呢？ 有那么多好处， 我觉得几乎所有网站都应该采用pjax。 赶紧用起来吧！

时间： 2024-11-10 08:27:28

Pjax的使用的相关文章

jquery.pjax.js bug问题解决集锦

jquery.pjax 是一个很好的局部刷新插件,但实际应用过程是还是会有很多小问题,部分问题解决如下: 1.pjax 局部加载时候,IE 存在缓存问题,很容易理解,pjax是通过jquery的ajax加载局部内容的,默认cache=true,这会导致ie下get数据从缓存中获取,解决办法是设置pjax options的cache=false,这样请求会自动变成如下方式: /XXXX?_pjax=%23pjax-container&_=1455092848927 2.pjax 与 jquery

Ajax保留浏览器历史的两种解决方案（Hash&Pjax）

总是在github down点东西,github整个界面做的不错,体验也很好~对于其中的源代码滑动的特效最为喜欢了~刚开始以为这个只是普通的ajax请求效果,但是发现这个特效能够导致浏览器地址栏跟随变化,并且再点击前进后退按钮后又可以将代码滑回滑出~~于是乎就来研究下吧~ 一.通过锚点Hash实现: 在这方面其实国内很早就有做了,比如淘宝画报,通过的是在地址栏后面加#锚点实现的,浏览器是可以识别锚点为单位的历史记录的.但不是说页面本身有这个锚点,锚点的Hash只是起到一个引导浏览器将这次的记录推

Yii2 Pjax的简单使用

有两个例子:刷新时间和数据显示排序 1.刷新时间 (1)控制器中的方法:Time 1 2 3 4 public function actionTime()   {       return $this->render('time',['time'=>date("h:i:s")]);   } (2)视图中的显示:Time.php 1 2 3 4 5 6 7 8 9 <?php   use yii\widgets\Pjax;   use yii\helpers\Html;

PJax在jQuery 3.0无法运行问题修复

PJax在jQuery 3.0无法运行 [现象] 页面报错:Uncaught TypeError: Cannot read property 'push' of undefined [原因] jQuery3.0开始去除了$.event.props Breaking change: jQuery.event.props and jQuery.event.fixHooks removed jQuery's event handling performance increased thanks to

pjax不再神秘，hash、state那点事

如果最近打电话给武汉的小伙伴,他说信号不好,那么相信我,他肯定不是真的信号不好,也不是不想和你说话,而是他可能在冰箱里...武汉的天气从来都是喜怒无常的,是吧,屌丝气十足,今年也是丝毫看不出有任何逆袭的迹象和可能性,当然咱也没必要去操那个心:好吧,其实你把他看作是我也是可以的:不要联想,赶快进入正题: JS能一路从小丑变为白天鹅,跟ajax技术的风靡有莫大的关系,伴随H5.ES6.Nodejs的发展与普及,不断将前端推向新的高度,如今JS的地位如日中天啊! 用过backbone.Angular.

PJAX的实现与应用

一.前言 web发展经历了一个漫长的周期,最开始很多人认为Javascript这们语言是前端开发的累赘,是个鸡肋,那个时候人们还享受着从一个a链接蹦 到另一个页面的web神奇魔术.后来随着JavaScript的不断更新换代,他的功能不仅仅是为网页添加一点特效了,语言本身的加强以及对DOM操作能 力的提升让他在前端大放光彩.尤其是ajax的出现,让JavaScript以及整个web的发展翻开了崭新的一页. 利用ajax局部刷新页面,相信很多人玩得相当熟练了.如果整个页面的刷新都是使用ajax,我们

Pjax.js防刷新技术

自我感觉良好,所以拿出现在自己用的 Pjax.js 分享给大家 当然 这个版本是 经过本人修改后的版本,跟其它 拿过来就用的 不一样 而且区别还不小 大多的 Pjax 都是 跟后台无关的,而这个版本是跟后台有密切联系的 下面就是说下 代码 以及使用方法,包括后台 内容输出格式 先说说方法吧 引入 jQuery + Pjax.js (本站提供的代码) 下面就关键 运行代码 所接受的参数详解 selector: 绑定 Pjax 的链接 默认:"a[href]" container: 替换内

node+pjax实现不刷新跳转

做前端的都知道如果通过a标签去访问跳转到某一个页面,浏览器会自动刷新.那么如何实现不刷新跳转? html5的出现让我们可以实现不刷新跳转页面.主要使用的方法:history.pushState(data,str,url) .不知道的百度 h5  history api. 现在不用自己来造轮子,我们直接引入jquery.pjax.使用方法 https://github.com/defunkt/jquery-pjax/ 先来看我的前端代码: //$('document').pjax('html元素'

yii2 Pjax的使用

有两个例子:刷新时间和数据显示排序 1.刷新时间 (1)控制器中的方法:Time public function actionTime() { return $this->render('time',['time'=>date("h:i:s")]); } (2)视图中的显示:Time.php <?php use yii\widgets\Pjax; use yii\helpers\Html; ?> <? Pjax::begin()?> <?=Ht

jQuery pjax 简单入门

工作站要做一个类似百度云盘的项目,其中提到了pajx技术,之前从来没接触过这个玩意,今天小试牛刀.去网上找了一些教程,只能说百度相当不靠谱,找到的东西几乎都不能用,还是GitHub好,么么哒!https://github.com/defunkt/jquery-pjax! Pjax是ajax的升级版,怎么理解呢,当初学习ajax的时候讲了ajax的优缺点,其中一个缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中.pjax就不一样了,pjax被解释成ajax+pushState的封