PJAX技术
pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。
表现
如果你使用chrome或者firefox等浏览器访问github.com网站,你会发现大多数结构相同的页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变(例如:个人资料页,项目管理页,代码浏览等),但能够支持浏览器前进和后退。
HTML5里引用了新的API,history.pushState和history.replaceState
在HTML4,Histroy对象有下面属性方法:
- length:历史堆栈中的记录数。
- back():返回上一页。
- forward():前进到下一页。
- go([delta]):delta是个数字,如果不写或为0,则刷新本页;如果为正数,则前进到相应数目的页面;若为负数,则后退到相应数目的页面。
在HTML5中,新增了两个方法:
- pushState(data, title [, url]):往历史堆栈的顶部添加一条记录。data为一个对象或null,它会在触发window的popstate事件(window.onpopstate)时,作为参数的state属性传递过去;title为页面的标题,但当前所有浏览器都忽略这个参数;url为页面的URL,不写则为当前页。
- replaceState(data, title [, url]):更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。
就是通过以上2个接口做到无刷新改变页面URL的,在配合ajax,也就是现在的pjax技术的产生。
首先说下目前ajax为了实现以上效果(更改页面URL,并支持前进后退)的一些问题:
- 可以无刷新改变页面内容,但无法改变页面URL
- 为了更好的可访问性,内容发生改变后,通常改变URL的hash
- hash的方式不能很好的处理浏览器的前进、后退等问题
- 进而浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变,这种方式对搜索引擎很不友好
Pjax的操作流程
- 用ajax加载新内容。
- 用history.pushState将原来的页面加入历史记录。
- 加载完成新页面后,用history.replaceState方法修改当前的url。
- 使用document.title修改当前页的标题。
加入历史记录:
var state = { title: title, url: options.url, otherkey: othervalue }; window.history.pushState(state, document.title, url);
state对象除了要title和url之外,你也可以添加其他的数据
replaceState和pushState是大致相同
在流程外,为了保证前进后退操作的体验一致:
响应页面中的onpopstate事件:
window.addEventListener('popstate', function(e){ if (history.state){ var state = e.state; //do something(state.url, state.title); } }, false);
window对象上提供了onpopstate事件,history传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了(或者其他当时存储的数据)
对应后端的一些处理:
这种模式下除了当前使用ajax可以无刷新浏览外,还要保证直接请求改变的URL后也可以正常浏览,所以
对使用pushState的ajax发送一个特殊的头,如: setRequestHeader(‘PJAX’, ‘true’)。
则后端程序通过判断请求头确定当前请求是否是pjax请求,从而改变响应的内容
通过以上3步的补充,则完成pjax的整体过程
限制
- 传递的URL必须是同域下的,无法跨域
- state对象虽然可以存储很多自定义的属性,但对于不可序列化的对象则不能存储,如:DOM对象。
- 最关键的是只有HTML5才能实现该操作
说明:
本文内容大多转载于:http://www.welefen.com/use-ajax-and-pushstate.html(添加并组织了部分内容)
该作者的项目地址: https://github.com/welefen/pjax, 目前支持jquery, qwrap, kissy 3个版本
以上项目的封装借鉴于https://github.com/defunkt/jquery-pjax
对其增加了缓存、本地存储和动画等功能,并且将一些参数进行了优化。
写的不错,前几天也写了一篇文章介绍 http://barretlee.com/history-api-in-html5/
简明扼要,言简意赅!
Pingback: Youtube的跳转方式如何做到? | segment-解决方案
我记得有个兼容破ie的代码来着
兼容IE的代码大多指的是通过链接锚点进行类似操作
几个支持pjax技术的框架都是用这个技术实现相同效果的
Backbone.js
兼容IE的代码大多指的是通过链接锚点进行类似操作 几个支持pjax技术的框架都是用这个技术实现相同效果的 Backbone.js
终于明白了一点github的url 显示,原来很奇怪。
谢谢:)
这个教程很实用 感谢分享!