使用ajax实现无刷新改变页面内容和地址栏URL

所属分类: 网络编程 / AJAX相关 阅读数: 774
收藏 0 赞 0 分享

在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变。并且能够很好的支持浏览器的前进和后退。不禁让人想问,是什么有这么强大的功能呢?

HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。

与传统的AJAX的区别

传统的ajax有如下的问题:

虽然ajax可以无刷新改变页面内容,但无法改变页面URL

其次为了更好的可访问性,内容发生改变后,改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题

有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变

再有,ajax的使用对搜索引擎很不友好,往往蜘蛛爬到的区域是空的

为了解决传统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、无法跨域,这个是必然的。引用曾经在网上看到的一句经典的话:“如果javascript可以跨域的话,那他就可以逆天了!”

2、state对象虽然可以存储很多自定义的属性,但值不能是个对象。

对应后端的一些处理

这种模式下除了当前使用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 ajax中的datatype属性选项值

jquery中ajax的dataType属性用于指定服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断,如果datatype选项不填写的话,会将返回的数据当成字符串处理。
收藏 0 赞 0 分享

基于Jquery ajax技术实现间隔N秒向某页面传值

这篇文章给大家介绍jquery ajax技术实现每隔一段时间向某页面传值,以及setinterval()方法的语法介绍,对本文感兴趣的朋友可以参考下
收藏 0 赞 0 分享

通过Ajax两种方式讲解Struts2接收数组表单的方法

使用struts2表单传值,可以传一个或者是作为一个对象的各个属性传,都非常灵活便捷。但是如果我们需要传一个数组并希望struts正确接收,该怎么处理呢?接下来,通过本文给大家介绍通过Ajax两种方式讲解Struts2接收数组表单的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

基于Jquery.history解决ajax的前进后退问题

本文主要给大家介绍基于Jquery.history解决ajax的前进后退问题,涉及到jquery前进后退相关方面的知识,本文内容经典,非常具有参考价值,特此把jquery前进后退相关知识分享在脚本之家网站供大家参考
收藏 0 赞 0 分享

使用HTML5中postMessage知识点解决Ajax中POST跨域问题

这篇文章主要介绍了使用HTML5中postMessage知识点解决Ajax中POST跨域问题的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

谈谈你对aja的理解(一、二)

Ajax是Asynchronous Javascript And XML的缩写,其作用通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。
收藏 0 赞 0 分享

关于ajax对象一些常用属性、事件和方法大小写比较常见的问题总结

最近比较空闲,于是抽个时间整理些关于ajax方法的东东。在项目中经常发现ajax板块好多问题都是属性,方法,事件大小写不区分问题,最终导致了程序运行出现麻烦,下面给大家介绍关于ajax对象一些常用属性、事件和方法大小写比较常见的问题总结
收藏 0 赞 0 分享

Ajax请求session失效该如何解决

HTML + Servlet + Filter + jQuery 一般来说我们的项目都有登录过滤器,一般请求足以搞定。但是AJAX却是例外的,所以解决方法是设置响应为session失效。
收藏 0 赞 0 分享

编写轻量ajax组件02--浅析AjaxPro

ajaxpro虽然是一个比较老的组件,不过实现思想和源码还是很有借鉴价值的。接下来通过本篇文章给大家介绍编写轻量ajax组件02--浅析AjaxPro,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

编写轻量ajax组件01-与webform平台上的各种实现方式比较

这篇文章主要介绍了编写轻量ajax组件01-与webform平台上的各种实现方式比较,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多