不刷新改变URL: pushState + Ajax
如果你玩过Google+,看到过YouTube的新界面,便会体验到这个HTML5的新功能。使用pushState + Ajax(pjax),可以实现网页的ajax加载,同时又能完成URL的改变而没有网页跳转刷新的迹象,就像是改变了网页的hash(#)一样。
旧的解决方案
曾说SEO和ajax是天敌。此前从Twitter开始流行Ajax+hash的方式调用内容,Google给出的解决方案是“#!~string”自动转换为“?_excaped_fragment_=~string”来抓取动态内容。但这无疑会非常麻烦:首先你需要对网站进行“?_excaped_fragment_=~string”的处理配置,而且,如果用户把网址“http://example.com/#!/~string”直接复制并分享的话,意味着网页还必须监听hashchange。不过如果你觉得这个#!很好看就没关系了。
新的解决方案: pushState
然而HTML5的新接口pushState / replaceState就可以比较完美的解决问题,它避免了改变hash的问题,避免了用户不理解URL的形式感到疑惑,同时还有onpopstate提供监听,良好响应后退前进。而且它不需要这个URL真实存在。
HTML5 的 pushState+Ajax
HTML5提供history接口,把URL以state的形式添加或者替换到浏览器中,其实现函数正是 pushState 和 replaceState。
pushState 例子
pushState() 的基本参数是:
window.history.pushState(state, title, url);
其中state和title都可以为空,但是推荐不为空,应当创建state来配合popstate监听。
例如,我们通过pushState现改变URL而不刷新页面。
var state = ( {url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE} );window.history.pushState(state, ~title, ~href);
其中带有“~”符号的是自定义内容。就可以把这个~href(URL)推送到浏览器的历史里。如果想要改变网页的标题,应该:
document.title= ~newTitle;
注意只是pushState是不能改变网页标题的哦。
replaceState 同理
window.history.replaceState( state, ~title, ~href);
pushState、replaceState 的区别
pushState()可以创建历史,可以配合popstate事件,而replaceState()则是替换掉当前的URL,不会产生历史。
限制因素
只能用同域的URL替换,例如你不能用http://baidu.com去替换http://google.com。而且state对象不存储不可序列化的对象如DOM。
Ajax 配合 pushState 例子
现在用Ajax + pushState来提供全新的ajax调用风格。以jQuery为例,为了SEO需要,应该为a标签的onclick添加方法。
$("~target a").click(function(evt){evt.preventDefault(); // 阻止默认的跳转操作var uri=$(this).attr('href');var newTitle=ajax_Load(uri); // 你自定义的Ajax加载函数,例如它会返回newTitledocument.title=newTitle; // 分配新的页面标题if(history.pushState){var state=({url: uri, title: newTitle});window.history.pushState(state, newTitle, uri);}else{ window.location.href="#!"+~fakeURI; } // 如果不支持,使用旧的解决方案return false;});function ajax_Load(uri){ ... return newTitle; } // 你自定义的ajax函数,例如它会返回newTitle
即可完成pushState。至于新标题newTitle的获取就是另外的问题了,例如你可以为a标签分配data-newtitle=~title属性并届时读取,或者如果你用的$.ajax()函数,可以用$(result).filter("title").text()来获取。
另外如果需要对新加载的页面的连接同样使用这个ajax,则需要对新内容的a标签重新部署,例如
$("~newContentTarget a").click(function(evt){ ... });
pushState 配合 popstate 监听
想要良好的支持浏览器的历史前进后退操作,应当部署popstate监听:
window.addEventListener('popstate', function(evt){var state = evt.state;var newTitle = ajax_Load(state.url); //你自定义的ajax加载函数,例如它会返回newTitledocument.title=newTitle;}, false);
提醒,你可以通过setRequestHeader()来让服务器端配合你的ajax请求输出专门的内容。
流程图示意
这个例子的大致过程如下图所示
jQuery + PJAX 插件
已经在github上发布,有人把PJAX做成了jQuery插件,方便调用,节省大量代码:
if ($.support.pjax) {$(document).on('click', 'a[data-pjax]', function(event) {var container = $(this).closest('[data-pjax-container]')$.pjax.click(event, {container: container})});}
谢谢收看,如有不正请指出。
下载:jquery-pjax-master
原文:http://blog.netsh.org/posts/pushstate-ajax_1339.netsh.html
justcode.ikeepstudying.com
不刷新改变URL: pushState + Ajax相关推荐
- 通过history.pushState无刷新改变url
背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越来越多的网站采用ajax来加载资源.因为异步加载的特性, ...
- 使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的 ...
- 快速修改HTML5,HTML5无刷新修改URL(示例代码)
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...
- 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" ...
- html页面跳转后url不变,使用pushState()改变url而不刷新
编者注:这个pushState()是一个HTML5的新接口,你可能在一些科技博客如36kr上看到过,ajax加载新的文章,并且改变网址却不需要刷新页面,本站也用到了这个,当你在首页往下拉时,加载分页内 ...
- popstate_详解HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- html+a+不刷新页面,前端路由实现:通过pushState()改变URL,同时不刷新页面
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 在前端框架层出不穷的当今时代,页面的变化变得更加具有迷惑性.页面地址变了的话,是否就意味着一定请求了新的页面么 ...
- popstate_HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
最新文章
- Ubuntu16.04桌面系统如何配置和启动wireshark
- socket read阻塞_go tcp中的ioutil.ReadAll阻塞的问题
- OpenGL_Qt学习笔记之_05(纹理映射)
- nik collection滤镜
- Python的常见几道数学运算题
- 【生成模型】关于无监督生成模型,你必须知道的基础
- Linux进程分配内存的两种方式--brk() 和mmap()
- .mysql的配置文件是正确的,为啥启动后一查所展示的并不是自己设置的配置
- 秦时明月更新了?青春回来了
- 【人工智能】重磅发布人工智能与机器学习全景式概览
- 克里希纳驼奶粉食疗可养生?
- GDKOI2021普及组滚粗记
- 2.2.7 虚拟Ethernet以太网卡
- 棋盘效应(Checkerboard Artifacts)
- 对应到对象 数据库驼峰_驼峰
- python中常用的utils
- android台湾 apk.tw,台湾SWAG app
- php 命格算法,命格是怎么个算法???
- Android 开发简单记事本程序(附源码)
- APK安装失败:[INSTALL_FAILED_VERIFICATION_FAILURE]
热门文章
- 最优乘车(信息学奥赛一本通-T1377)
- 计算浮点数相除的余(信息学奥赛一本通-T1029)
- 44 SD配置-销售凭证设置-定义状态参数文件
- 22 SD配置-主数据-定义付款条款
- linuxPci驱动获取指定设备bus、device以及devfn数据方式
- MATLAB中disp的用法
- CMake使用介绍(2)
- OpenCV中基本数据结构(8)_Complex
- 图像质量评价指标: PSNR 和 SSIM
- transform.SimilarityTransform()==>图像的相似变换=等距变换(平移+旋转变换)+均匀尺度缩放