window history ajax,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)...

在访问现在很火的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对 ...

随机推荐

tomcat的安全配置(禁用http方法，部署多个应用，启用从安全cookie，指定错误页面和显示信息)

配置版本:tomcat6 1,虚拟路径,可以配置多个host在一个tomcat中,docbase是web应用目录,此处在server.xml中添加应用配置,要让server.xml配置生效需要重启to ...

JAVA GUI

JAVA GUI中的事件处理:   委托事件模型:事件源对象和监听器对象具有绑定关系   一个监听器可以绑定多个事件源 一个事件源也可以绑定多个监听器 监听器有各自监听的事件类型   设置容器的布局管 ...

android EditText inputType说明

在开发的过程中,通常会用到EditText,如何让虚拟键盘来适应输入框中内容的类型,通常我们都会在xml文件中加入android:inputType="". android:inp ...

【转】Unity利用WWW http传输Json数据

http://blog.csdn.net/h570768995/article/details/50386935 首先去下载LitJson.dll,放在Plugins 目录下: LitJson可以从下 ...

Heritrix源码分析(七) Heritrix总体介绍(转)

本博客属原创文章,欢迎转载!转载请务必注明出处:http://guoyunsky.iteye.com/blog/642794         本博客已迁移到本人独立博客: http://www.yun ...

快速优化yum (for centos5.5)

定义yum超时时间:vi /etc/yum.conftimeout=120 修改源:(全部复制粘贴即可)cd /etc/yum.repos.d/mv rhel-debuginfo.repo rhel- ...

使用Core Animation对象来实现动画