您当前的位置:首页 > 新闻资讯 > 产品动态 > 正文

【东网技术大咖】HTML5 history api搭配ajax实现前进后退

发布时间: 2017-04-01 15:16:39  
分享到:

 

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

 

在良品铺子生命周期系统开发中,遇到过这样一种情况,我们使用ajax来加载不同标签页的数据,用户在使用的时候想用前进后退来切换标签页,发现直接退出了当前功能,于是向我们反馈了这一问题。确实,在用户使用中,不同标签页的切换对于他们来说是意味着不同的页面,自然而然会想前进后退来切换,但是实际中ajax是无法前进后退的,便造成很糟糕的体验,比如填好的表单后退后全部消失,查询好的数据后退一下又需要重新查询。

 

那么如何解决这一问题呢?在实际开发中,单纯使用ajax,浏览器地址是不会发生变化,前进后退是无法控制标签切换的,这个时候我们必须借助HTML5里新的history api搭配ajax来解决这个问题。

 

我们先来回顾一下现有html规范中,history对象的三个方法:

 

方法

描述

back()

加载 history 列表中的前一个 URL。

forward()

加载 history 列表中的下一个 URL。

go()

加载 history 列表中的某个具体页面。

 

使用ajax时,由于地址未发生变化,这三个api是无法进行页面控制的。

 

新的HTML5标准为我们解决了这一难题,html5标准中history对象增加了两个方法。

 

方法

描述

pushState()

存储当前历史记录点

replaceState()

替换当前历史记录点

 

还有一个搭配使用的popstate事件,用于监听url的变化。

 

pushState能改变当前url(添加新的历史记录点),popstate监听url的变化,浏览器的前进后退改变url(在历史记录点之间切换),三者结合便能解决ajax中前进后退的问题。

 

让我们先来看下pushState,replaceState,popstate这个三个新的api的详细介绍。

 

 

1.pushState()存储当前历史记录点
 

 

存储的方式类似于数组的入栈(Array.push()),在window.history里新增一个历史记录点,例如:

// 当前的url为:http://www.example.com/demo.html

var json={time:new Date().getTime()};

//@状态对象:记录历史记录点的额外对象,可以为空

//@页面标题:目前所有浏览器都不支持

//@可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域

window.history.pushState(json,"","http://www.example.com/demo.html#test");

var state = {title: title,

        url: options.url,

        otherkey: othervalue

};

window.history.pushState(state, document.title, url);

执行了pushState方法后,页面的url地址为:

http://www.example.com/demo.html#test

 

 

2.replaceState替换当前历史记录点
 

 

window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。

 

 

3.popstate监听历史记录点
 

 

监听历史记录点,直观的可认为是监听URL的变化,但会忽略URL的hash部分,可以通过window.onpopstate来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的json对象。

 

值得注意的是:window.history.pushState和window.history.replaceState不会触发onpopstate事件。

 

了解了这三个新的api,再让我们看看如何实际开发中来进行应用。

 

 

代码示例
 

 

一个分页的例子,点击不同页面使用ajax加载不同的地市编号和地市名称,默认加载第一页,如果带有页码n会加载第n页的数据,前进后退能够在不同页面进行切换

页面部分:

 

 

 

 

 

 

 

 

    

 

    

 

数据待加载...

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Js代码:

 

效果截图:

 

 

 

可以看到,浏览器里面的链接变为url+#+页码,这个时候可以通过前进后退来触发onpopstate 来实现ajax加载不同页面的数据,监听事件触发后可以根据json对象和链接里的参数来进行不同的处理,以达到切换标签的效果,用户体验时的感觉和前进后退是没有任何差异的,由于没有刷新页面,体验甚至会更好。

 

至此,问题得到圆满解决。

 

分享到:
地址:福建省福州市铜盘路软件大道89号软件园A区26号楼 电话:0591-83519233 传真:0591-87882335 E-mail:doone@junchaosh.com
版权所有 重庆时时彩计划群 沪ICP备12029368号-1