介绍
这篇文章主要介绍如何通过历史解决ajax不支持前进/后退/刷新的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>前言:
现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器”后退”和“前进”键。
但是,现在我们可以通过H5的历史属性解决ajax在交互请求的这个小bug。
<强>事件描述:
H5增加了一个事件窗口。onpopstate,当用户点击那两个按钮就会触发这个事件。但是光检测到这个事件是不够的,还得能够传些参数,也就是说返回到之前那个页面的时候得知道那个页面的pageIndex。通过历史的pushState方法可以做到,pushState (pageIndex)将当前页的pageIndex存起来,再返回到这个页面时获取到这个pageIndex。
<强> window.history。pushState描述:
window.history.pushState(标题、状态,还以为;url); <强>状态对象:是一个JavaScript对象,它关系到由pushState()方法创建出来的新历史的实体。用以存储关于你所要插入到历史记录的条目的相关信息.State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取状态对象,这个对象的最大存储空间为640 k。如果大于这个数值,则pushState()方法会抛出一个异常。
<强>标题: firefox现在回忽略这个参数,虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串,以防止将来的修改。
<强> url: 用来传递新历史的实体的url,浏览器将不会在调用pushState()方法后加载这个url。也许会过一会尝试加载这个url。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新url的必须和现有url的同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为文档当前的url。
<强>直接贴代码:
/* *
,*创建:亚伦。
*大敌;地址:http://www.cnblogs.com/aaron-pan/,*///var pageIndex=window.history.state===null ? 0: window.history.state.page;
(函数(美元、窗口定义){
var loadData={才能
,,,pageIndex: window.history.state===null ? 1: window.history.state.page,
,,,//pageIndex: 0,
,,,init:函数(){
,,,,,this.getData (this.pageIndex);
,,,,,this.nextPage ();
,,,},
,,,getData:函数(pageIndex) {
,,,,,var 这=;
,,,,,. ajax({美元
,,,,,,,类型:& # 39;文章# 39;
,,,,,,,url: & # 39;。/数据/getMovices& # 39; + pageIndex + & # 39; . json # 39;
,,,,,,,数据类型:& # 39;json # 39;
,,,,,,,异步:假的,
,,,,,,,成功:功能(数据){
,,,,,,,,,that.renderDom(数据);
,,,,,,,}
,,,,,})
,,,},
,,,renderDom:函数(电影){
,,,,var bookHtml=,,,,,,,“& lt; table>“+
,,,,,,,“& lt; tr>“+
,,,,,,,“& lt; th>电影& lt;/th>在“+
,,,,,,,“& lt; th>导演& lt;/th>“+
,,,,,,,“& lt; th>上映时间& lt;/th>“+
,,,,,,,“& lt;/tr>“;
,,,,,,(var 我=0;i“+
,,,,,,,,,,,,& lt; td>“, +,电影[我].moviesName +,“& lt;/td>“+
,,,,,,,,,,,,& lt; td> & lt; a>“, +,电影[我].moviesEditor +,“& lt;/a> & lt;/td>“+
,,,,,,,,,,,,& lt; td>“, +,电影[我].times +,“& lt;/td>“+
,,,,,,,,,“& lt;/tr>“;
,,,,,}
,,,,,bookHtml +=? lt;/table>“;
,,,,,bookHtml +=,,,,,,,“& lt; button>上一页& lt;/button>“+
,,,,,,,“& lt; button 类=& # 39;全心全意# 39;在下一页& lt;/button>“;
,,,,,美元(& # 39;身体# 39;). html (bookHtml);
,,,},
,,,全心全意地:函数(){
,,,,,var 这=;
,,,,,美元(文档)。(“click",“.nextPage",函数(){
,,,,,,,that.pageIndex + +;
,,,,,,,that.getData (that.pageIndex);
,,,,,,,window.history.pushState({页面:that.pageIndex}, null, window.location.href);
,,,,,,,//后退和刷新回到首页,window.history.replaceState({页面:that.pageIndex}, null, window.location.href);
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
