使用ajax和history.pushState无刷新改变页面URL
表现如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。 是什么有这么强大的功能呢?HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。 与传统的AJAX的区别传统的ajax有如下的问题: var state = {
title: title,url: options.url,otherkey: othervalue
};
window.history.pushState(state,document.title,url);
state对象除了要title和url之外,你也可以添加其他的数据,比如:还想将一些发送ajax的配置给保存起来。 如何响应浏览器的前进、后退操作window对象上提供了onpopstate事件,上面传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了。 window.addEventListener('popstate',function(e){
if (history.state){
var state = e.state;
//do something(state.url,state.title);
}
},false);
这样就可以结合ajax和pushState完美的进行无刷新浏览了。 一些限制1、传递的URL必须是同域下的,无法跨域 对应后端的一些处理这种模式下除了当前使用ajax可以无刷新浏览外,还要保证直接请求改变的URL后也可以正常浏览,所以后端要对这些处理下。 function is_pjax(){
return array_key_exists('HTTP_X_PJAX',$_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}
虽然接口上只有pushState、replaceState、onpopstate,但在使用的时候需要做很多的处理。 参考资料: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |