在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变。并且能够很好的支持浏览器的前进和后退。不禁让人想问,是什么有这么强大的功能呢?
与传统的AJAX的区别
虽然ajax可以无刷新改变页面内容,但无法改变页面URL
有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变
history.pushState, history.replaceState
pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。
var state = { title: title, url: options.url, otherkey: othervalue }; window.history.pushState(state, document.title, url);
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);
一些限制
无法跨域,这个是必然的。引用曾经在网上看到的一句经典的话:“如果javascript可以跨域的话,那他就可以逆天了!”
对应后端的一些处理
1、对结合pushState的ajax可以发送一个特殊的头,如: setRequestHeader(‘PJAX’, ‘true’)。
function is_pjax(){ return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true'; }
虽然接口上只有pushState、replaceState、onpopstate,但在使用的时候还是要做很多处理的。
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
使用ajax和js无刷新改变页面内容和地址栏URL
发现一个可以改变地址栏,而不导致页面刷新的东东. Chrome, FF测试通过,不支持IE. 实现目标 页面的跳转(前进后退,点击等)不重新请求页面 页面URL与页面展现内容一致(符合人们对传统网页的 ...
使用ajax和history.pushState无刷新改变页面URL onpopstate(转)
Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).re ...
使用ajax和history.pushState无刷新改变页面URL
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
使用ajax和history.pushState无刷新改变页面URL(转)
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
通过history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1
HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
随机推荐
洛谷P2412 查单词 [trie树 RMQ]
题目背景 滚粗了的HansBug在收拾旧英语书,然而他发现了什么奇妙的东西. 题目描述 udp2.T3如果遇到相同的字符串,输出后面的 蒟蒻HansBug在一本英语书里面找到了一个单词表,包含N个单词 ...
HTML认识
1.1 认识什么是纯文本文件 txt window自带有一个软件,叫做记事本,记事本保存的格式TXT,就是英文text的缩写,术语上称呼为"纯文本文件" TXT文件,只能保存文本内 ...
2015腾讯web前端笔试题
1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性) 2 请指出一下代码的性能问题,并经行优化. var info="腾讯拍拍网(www.paipai.com)是 ...
DSP using MATLAB 随书示例Example2.8
x = [3, 11, 7, 0, -1, 4, 2]; nx = [-3:3]; h = [2, 3, 0, -5, 2, 1]; nh = [-1:4]; [y,ny] = conv_m(x,nx ...
copy file to docker、
Docker是个Linux Container管理软件. 今天我们来讲解一下从主机复制文件到Docker的几种方法. 在分享之前, 我们看看Docker社区对这个问题的需求是有多么强(ju)烈(jin ...
C++静态代码分析工具推荐——PVS-Studio
长假归来,最近一直没更新,节前本来就想写这篇了,一直到今天才有时间. 关于静态代码分析在维基百科上可以查到很详细的介绍:https://en.wikipedia.org/wiki/List_of_to ...
Data Guard 的三种保护模式
官方文档链接 http://docs.oracle.com/cd/E11882_01/server.112/e41134/protection.htm#SBYDB02000 最大可用模式(Maximu ...
关于String的一些基础小题目
需求一:从键盘输入一串字符串,统计数字,字母,空格,其它字符的个数 import java.util.Scanner; public class Q1 { public static void mai ...
收藏nginx学习
http://blog.csdn.net/u012186351/article/details/50605672 http://blog.csdn.net/qq_25371579/article/de ...
word2vec中文类似词计算和聚类的使用说明及c语言源代码
word2vec相关基础知识.下载安装參考前文:word2vec词向量中文文本相似度计算 文件夹: word2vec使用说明及源代码介绍 1.下载地址 2.中文语料 3.參数介绍 4.计算相似词语 5 ...