pjax初探
用过Github的同学一定对其Ajax局部刷新感到神奇吧,既实现了局部刷新,又修改了浏览器地址,并且做到了前进后推的效果,这其实是HTML5
History API实现的效果 其技术叫 pjax 也就是 pushState + ajax。
Pjax比较重要的几个地方:
1、 Pjax需要jquery版本支持在1.8.0及其以上。
2、
其源码没有对内容做深度拷贝,回退后按钮事件可能失效,因此修改了clone()为clone(true)。
3、
Pjax对IE的支持至少要10以上的版本,对于其它版本以提交form的形式提交请求整个页面。而对ff,chrome支持良好,会发送ajax请求,这也是上面需要判断请求头做分别处理的原因,因此要修改为ajax请求的工作量是巨大的。
Pjax请求加入的两种方法:
1、
如果请求没有上面参数,直接通过url链接就可以请求,则可以通过如下方式加入,例如:
<a id="mainProjectNavigation"data-pjax='\#gitBody' href='/userName/projectName'>
点击此超链接后发送一个pajax请求则只需要$('#mainProjectNavigation').pjax();其中a标签里的data-pjax为返回来后更新的container。
2、
如果带有请求参数,比如以前发送的ajax请求中的data参数中需要传递某些数据,那么就需要在触发事件的函数里手动触发pjax请求。例如,点击一个id为test的按钮后触发一个pjax请求:
$("\#test").click(function(){
$.pjax({
url:"/busi/personZone/personZone",
container:'#gitBody',
data: {
userName:"cloud\_test"
},
type:"POST"
});
});
各个参数说明:
url:请求链接
container:返回内容更新的container
data:请求参数
type:请求方式,默认为get
除此之外,还有多个配置很多个属性:
jquery ajax的所有属性名一样的属性
如:beforeSend
Complete
Success
Timeout等。
自身扩展属性
如:maxCacheLength 最大缓存堆栈数
scrollTo
replace等。