前言：

现在前后端基本都是通过ajax实现前后端接口数据的交互，但是，ajax有个小小的劣势，即：不支持浏览器“后退”和“前进“键。

但是，现在我们可以通过H5的histroy属性 解决ajax在交互请求的这个小bug。

事件描述：

H5增加了一个事件window.onpopstate，当用户点击那两个按钮就会触 发这个事件。但是光检测到这个事件是不够的，还得能够传些参数，也就是说返回到之前那个页面的时候得知道那个页面的pageIndex。通过 history的pushState方法可以做到，pushState(pageIndex)将当前页的pageIndex存起来，再返回到这个 页面时获取到这个pageIndex。

window.history.pushState描述：

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

state对象：是一个JavaScript对象，它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象，这个对象的最大存储空间为640k。如果大于这个数 值，则pushState()方法会抛出一个异常。

title：firefox现在回忽略这个参数，虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串，以防止将来的修改。

url：用来传递新的history实体的URL，浏览器将不会在调用pushState()方法后加载这个URL。也许会过一会尝试加载这个URL。比如在用户重启了浏览器后，新的url可以不是绝对路径。如果是相对路径，那么它会相对于现有的url。新的url必须和现有的url同域，否则pushState()将抛出异常。这个参数是选填的，如果为空，则会被置为document当前的url。

直接贴代码：

         (      loadData=         pageIndex:window.history.state===?1                  init:             .getData(                       getData:              that=                  type:'post'                 url:'./data/getMovices'+pageIndex+'.json'                 dataType:'json'                 async:                 success:             renderDom:              bookHtml=                 "<table>"+                 "<tr>"+                 "<th>电影</th>>"+                 "<th>导演</th>"+                 "<th>上映时间</th>"+                 "</tr>"             ( i=0;i<movies.length;i++                 bookHtml +=                     "<tr>" +                     "   <td>" + movies[i].moviesName + "</td>" +                     "   <td><a>" + movies[i].moviesEditor + "</a></td>" +                     "   <td>" + movies[i].times + "</td>" +                     "</tr>"              bookHtml+="</table>"             bookHtml +=                 "<button>上一页</button>" +                 "<button class='nextPage'>下一页</button>"             $('body'          nextPage:              that=             $(document).on("click",".nextPage",                 that.pageIndex++                  window.history.pushState({page:that.pageIndex},                          window.addEventListener("popstate",          page=0         (event.state!==             page=             console.log('page:'+          console.log('page:'+          loadData.pageIndex=   })(jQuery,window,undefined);

通过直接在html页面调用js文件就可看到运行结果。

运行结果：

这样就可以达到通过ajax进行交互也能实现监听前进/后台/刷新的功能了。

 附浏览器兼容性：

更多参考：

ajax与HTML5 history pushState/replaceState实例：http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

使用h5的history改善ajax列表请求体验：http://www.cnblogs.com/yincheng/p/h5-history.html

http://www.cnblogs.com/aaron-pan/p/7122385.html

延伸阅读

• 向着Java前进 2023-04-15 14:27:04.883
• 不忘初心，继续前进 2023-04-15 14:03:26.567
• 珍惜每一次的机会继续前进 2022-09-07 13:37:44.32
• 为解决困难而存在 2019-03-13 16:26:59.81
• 没有什么不是一个好的团队不可以解决的—由*潮 2017-10-27 14:41:00.813
• 在IT的前进道路上我们还有许多路要走—于*健 2017-10-20 15:02:14.73
• 解决Win7(x64)Anaconda3报错：AttributeError: '_NamespacePath' object has no attribute 'sort' 2017-07-25 16:36:02.62
• 解决element-ui 中upload组件使用多个时无法绑定对应的元素 2017-07-25 16:17:28.727
• Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理 2017-07-21 15:48:49.943
• 通过简单示例来理解什么是机器学习 2017-07-21 15:47:35.41

向着Java前进