使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。
与传统的AJAX的区别
传统的ajax有如下的问题:
1、可以无刷新改变页面内容,但无法改变页面URL
2、为了更好的可访问性,内容发生改变后,通常改变URL的hash
3、hash的方式不能很好的处理浏览器的前进、后退等问题
4、进而浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变
5、但这种方式对搜索引擎很不友好
6、twitter和google约定了使用#!xxx(即hash第一个字符为!),搜索引擎进行支持。
为了解决传统ajax带来的问题,HTML5里引入了新的API,即:history.pushState, history.replaceState
可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。
pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。
如何使用
var state = {title: title,url: options.url,otherkey: othervalue
};
window.history.pushState(state, document.title, url);
state对象除了要title和url之外,你也可以添加其他的数据,比如:还想将一些发送ajax的配置给保存起来。
replaceState和pushState是相似的,这里就不多介绍了。
如何响应浏览器的前进、后退操作
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必须是同域下的,无法跨域
2、state对象虽然可以存储很多自定义的属性,但对于不可序列化的对象则不能存储,如:DOM对象。
对应后端的一些处理
这种模式下除了当前使用ajax可以无刷新浏览外,还要保证直接请求改变的URL后也可以正常浏览,所以后端要对这些处理下。
1、对使用pushState的ajax发送一个特殊的头,如: setRequestHeader('PJAX', 'true')。
2、后端获取到有PJAX=true的header时,将页面中通用的部分都不输出。比如:PHP可以通过下面的判断
function is_pjax(){return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}
虽然接口上只有pushState、replaceState、onpopstate,但在使用的时候需要做很多的处理。
针对这个已经写好了一个基于jquery的插件,接下来的文章会详细介绍如何使用pjax(ajax+pushState)进行无刷新改变URL浏览。
转载于:https://www.cnblogs.com/liweisong/p/5270342.html
使用ajax和history.pushState无刷新改变页面URL相关推荐
- 阻止微信后退,阻止微信页面关闭 history.pushState 无刷新改变页面URL
阻页面后退 防止页面关闭 <!DOCTYPE html> <html> <head><title>阻止微信后退按钮</title> < ...
- ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
- 通过history.pushState无刷新改变url
背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越来越多的网站采用ajax来加载资源.因为异步加载的特性, ...
- popstate_HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- popstate_详解HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- HTML5网页页面无刷新更新页面URL
HTML5可通过history.pushState修改网页的URL地址,在配合相关代码显示隐藏相应界面便可以实现单页面多界面相互操作.该方法比直接访问URL地址速度快,执行效率高,UI体验好,但会增加 ...
- Php无刷新修改url,history 实现无刷新更改url和页面内容
在访问google plus 和网易m站时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强 ...
- Ajax弹出式无刷新城市选择特效
为什么80%的码农都做不了架构师?>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
最新文章
- hibernate中的hql查询语句list查询所有与iterate查询所有的区别
- Android编程: MVC模式、应用的生命周期
- JAVA数据结构与算法【简单介绍】
- I春秋第四季CTF-Web-Writeup(部分)
- Ubuntu千万不要运行的命令
- Angular2 指令
- 文本框获取焦点时,去掉边框
- 【分布式架构】企业级分布式应用服务EDAS使用攻略(上篇)
- WES 软件安装 及Bundel数据的下载
- mozilla开源项目学习----智能指针(AutoPtrAutoArrayPtr)(上)
- 互联网+医疗考验无线部署 飞塔SAA同频部署模式巧妙化解
- 基于OHCI的USB主机 —— USB设备其它数据结构
- 智能手机的硬件组成部分及结构图
- 阿里云iconfont使用方法
- 2019就业率最高专业TOP20出炉,哪些专业最好找工作?
- 《游戏设计艺术(第2版)》——所有透镜合集
- html让图片悬浮在网页,网页制作灰度图片悬浮效果利用HTML5和jQuery实现
- yarn.lock、package-lock.json、npm-shrinkwrap.json的理解
- MEM/MBA英语基础(08)复合句-状语从句
- zookeeper关闭默认管理端口admin.serverPort=8080