pjax 是如何工作的?

GitHub repo: github.com/defunkt/jque 最近用了用 Google+, 发现它好像使用了 pjax,效果很赞。对于减少 HTTP 请求和重复请求很有帮助,同时也改善了用户体验。我知道它使用了 Ajax,但跟 Ajax 又有区别。就是在点击导航链接时发生变化的是网页局部,但浏览器的 url 也跟着变了(跟链接加#!方式不同)。在 GitHub 上也同样使用类似东东。 我想问题它的工作原理,是如何做到不刷新页面改变 url 的(非#号带参数方式)? 还有,有没…
关注者
237
被浏览
49,469

7 个回答

pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。
同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。
并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。

这是它的开源主页 : github.com/welefen/pjax
其实pjax出现之前就有人用hash代替(就是#号),做全页面ajax跳转。
因为html5的新api:pushState和replaceState的出现,让url脱离了#号。更重要的是支持了浏览器前进后退的事件触发onpopstate。

pushState的功能具体来说就是修改url而页面无跳转,并且该url会被存放在历史记录中
当然为了满足某些需要你不需要存放在历史记录中就需要使用replaceState
而浏览器上前进和后退都会触发onpopstate能获取你设置的State对象

拿welefen的pjax说下原理:
1.在用户超链请求的时候拦截超链
2.拦截后同时发出两种行为 ajax请求 以及 pushState

实际上他的设计是线性的,在超链被拦截后才会触发。
我更倾向于观察者模式,state被改变的时候触发。
如果你真的想用在项目中我推荐你直接使用 balupton/history.js · GitHub
在不支持html5的浏览器上采用了hash作为代替并且监听了statechange事件