history解决ajax出现的问题

本文的前提是基于后台的，所以这里不会考虑seo的问题。同时，基于后台的管理系统，也不需要被收藏，所以也不会考虑刷新的这种类似直接敲网址的情况！！！

事件描述：

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;
    imovies.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进行交互也能实现监听前进/后台/刷新的功能了。

附浏览器兼容性：

以上就是history解决ajax出现的问题的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！