怎么在html中加入pjax,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才能实现该操作
怎么在html中加入pjax,PJAX技术相关推荐
- usb禁止重定向_远程桌面中的USB重定向技术解析(功能篇)
在运行远程和虚拟桌面的数据中心内,网络管理员可以对计算环境的各个方面进行控制.只有一点除外,就是本地外围设备. 本地外围设备包括所有连接到终端上的设备,例如USB驱动器.鼠标或打印机.它们逐渐成为终端 ...
- Maya 2022中的硬表面建模技术学习视频教程
Maya 2022中的硬表面建模 信息: 使用正确的拓扑和边流在Maya中建模硬曲面对象. 你会学到什么 硬质表面工具和技术 细分工作流程 边缘流动控制 正确拓扑 材料设置 Studio Lightn ...
- freemarker中运算符_如何在Web应用系统表示层开发中应用Velocity模板技术
软件项目实训及课程设计指导--如何在Web应用系统表示层开发实现中应用Velocity模板技术 1.分离Web表示层的数据处理和展现逻辑的常见的应用技术 分离Web表示层的数据处理和展现逻辑是目前企业 ...
- 游戏中应用强化学习技术,目的就是要打败人类玩家?
来源:AI前线 作者:凌敏 采访嘉宾:黄鸿波 2016 年,DeepMind 公司开发的 AlphaGo 4:1 大胜韩国著名棋手李世石,成为第一个战胜围棋世界冠军的人工智能机器人,一时风头无两.Al ...
- 29个月过去了,CSDN排名前200了:排名不断靠前的过程中,自己的技术水平和竞争力一定会不断向上...
2019独角兽企业重金招聘Python工程师标准>>> 刚刚在csdn博客又发表了一篇,工作问题总结,突然发现,我的博客排名终于进入前200了. 这又是一个伟大的里程碑啊. 在过去2 ...
- DotNET企业架构应用实践-系统架构与性能-缓存技术与ORM中的缓存查询技术
系列回顾 在前面的文章DotNET企业架构应用实践-系统架构与性能-理论依据及相关做法一文中我介绍了系统性能优化的理论做了一个概括的介绍,也简单的介绍了性能优化的过程及相关的技术关注点或者说是做法. ...
- 服务总线yali测试_中国信登加快技术测试体系建设支撑系统高质量运行
↑ 点击上方蓝字关注我们 为支撑中国信登信息系统高质量运行,提升服务我国信托行业综合能力,中国信登加快技术测试体系建设,从信息系统建设的事前.事中和事后入手,在信息系统的功能测试.非功能测试及软件全生 ...
- 计算机网络技术在农业中的应用,计算机网络技术在农业节水灌溉系统中的运用——评《计算机网络技术与应用实践》...
计算机网络技术在农业节水灌溉系统中的运用--评<计算机网络技术与应用实践> 计算机网络技术日臻成熟,在农业领域的应用也更加普及,尤其是节水灌溉系统与计算机网络技术的整合,大大提升了农业节水 ...
- linux 占用缓存前10_Linux 中的零拷贝技术
什么是拷贝 要知道零拷贝,需要先知道什么是拷贝.其实这个"拷贝"来自于 Linux 中的标准 I/O 接口的基本数据拷贝的操作,而这一操作会导致数据在操作系统内核地址空间的缓冲区和 ...
- 在.NET程序中使用PIPE(管道技术)
在.NET程序中使用PIPE(管道技术) 这几天不知道做什么, 受朋友影响, 看完了"新天龙八部", 深受感动, 所以打算做点好事. =) 关于PIPE的应用, 其实原理很简单, ...
最新文章
- 在sql server里,日期字段按天数进行group by查询的方法
- html显示假的图片路径,实现自己网站的图片假水印功能
- live555 源码分析: PLAY 的处理
- mysql 授权创建数据库_MySQL创建数据库与创建用户以及授权
- 小米平板2的win11生存指北
- 数论学习笔记1之积性函数与线性筛求积性函数
- 锐聘学院oracle上机题
- cacheable更新_详解Spring缓存注解@Cacheable,@CachePut , @CacheEvict使用
- 2011深信服校园招聘笔试面试
- 3.2 0.96寸OLED显示屏的使用
- 产品读书《高效能人士的七个习惯》
- java io 对象_JAVA基础知识之IO——对象序列化
- Java File类创建目录文件
- [NOI2005]聪聪与可可 解题报告
- android 没有地磁, gps如何导航,室内没有GPS信号,要怎么精确导航?
- 诡异的Connection reset
- Java计算机毕业设计水果商城源码+系统+数据库+lw文档
- FontForge:免费字库设计软件
- plt.text() 函数
- Java面试题全集(C)
热门文章
- SILKYPIX Developer Studio Pro 9E for Mac(图像编辑器)
- 麦克风输入不进去声音
- JavaScript删除数组中某个元素的几种方式
- Android中实现系统声音录制(内置声源的录制)-音频通道及framework调用流程分析
- python爬携程上出境游数据_python爬取携程旅游评价信息词云图分析
- Dao层、Service层和Controller层之间的关系
- deferred对象详解
- java实现排列组合算法
- Android 中ScrollView垂直滚动视图之隐藏滚动条的三种方法
- 怎么设置控制台前景和背景颜色