通过history解决ajax不支持前进/后退/刷新的问题

前言:

现在前后端基本都是通过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。

直接贴代码:

/**
 * Created: Aaron.
 * address: http://www.cnblogs.com/aaron-pan/
 */

//var pageIndex=window.history.state===null?0:window.history.state.page;

(function($,window,undefined){
  var loadData={
    pageIndex:window.history.state===null?1:window.history.state.page,
    //pageIndex:0,
    init:function(){
      this.getData(this.pageIndex);
      this.nextPage();
    },
    getData:function(pageIndex){
      var that=this;
      $.ajax({
        type:'post',
        url:'./data/getMovices'+pageIndex+'.json',
        dataType:'json',
        async:false,
        success:function(data){
          that.renderDom(data);
        }
      })
    },
    renderDom:function(movies){
      var bookHtml=
        "<table>"+
        "<tr>"+
        "<th>电影</th>>"+
        "<th>导演</th>"+
        "<th>上映时间</th>"+
        "</tr>";
      for(var 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').html(bookHtml);
    },
    nextPage:function(){
      var that=this;
      $(document).on("click",".nextPage",function(){
        that.pageIndex++;
        that.getData(that.pageIndex);
        window.history.pushState({page:that.pageIndex},null,window.location.href);
        //后退and刷新回到首页 window.history.replaceState({page:that.pageIndex},null,window.location.href);
      })
    },
  };
  loadData.init();
  window.addEventListener("popstate",function(event){
    var page=0;
    if(event.state!==null){
      page=event.state.page;
      console.log('page:'+page);
    }
    console.log('page:'+page);
    loadData.getData(page);
    loadData.pageIndex=page;
  })

})(jQuery,window,undefined);

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

运行结果:

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

附浏览器兼容性:

以上这篇通过history解决ajax不支持前进/后退/刷新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Ajax回退刷新页面问题的解决办法

    Ajax 简介: AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须

  • ajax后退解决方案

    一.使用iframe,通过document.write产生历史 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>0</title> </head> <body> <input type="button" value="加1" onclick="

  • 通过history解决ajax不支持前进/后退/刷新的问题

    前言: 现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器"后退"和"前进"键. 但是,现在我们可以通过H5的histroy属性 解决ajax在交互请求的这个小bug. 事件描述: H5增加了一个事件window.onpopstate,当用户点击那两个按钮就会触 发这个事件.但是光检测到这个事件是不够的,还得能够传些参数,也就是说返回到之前那个页面的时候得知道那个页面的pageIndex.通过 history的pu

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

    以下内容是关于Jquery.history解决ajax的前进后退问题,具体详情请看下文. 本文的前提是基于后台的,所以这里不会考虑seo的问题.同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!! 这里使用的是html5中的history.state 来解决. 网上已经有了js的开源解决方案pushState.详见pjax 但是这个方案不适合我的项目(后台项目),尤其是主要的方法有点不够用. 我使用的是  jquery.history.js  可以参考这个

  • pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash锚点 来解决 不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题 再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度 2. 随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题 通过一个路径定

  • 如何让浏览器支持jquery ajax load 前进、后退功能

    一般在做 ajax load 的时候,很多人都不会考虑到需要浏览器支持前进后退功能,因为大部分人都不知道可以实现. 最近遇到这个问题,经过一小段研究,发现github已经有现成的开源工具使用,主要实现原理是利用html的锚点,即<a href="#xxx"> 主要demo代码如下: html 复制代码 代码如下: <ul> <li><a href="#ttt">ttttttttttttttt</a><

  • 基于h5的history改善ajax列表请求体验

    信息比较丰富的网站通常会以分页显示,在点"下一页"时,很多网站都采用了动态请求的方式,避免页面刷新.虽然大家都是ajax,但是从一些小的细节还是 可以区分优劣.一个小的细节是能否支持浏览器"后退"和"前进"键.本文讨论两种方法,让浏览器可以后退和前进,或者说让ajax就像重定向到新页面一样 拥有能够返回到上一页或者前进到下一页. 数据实现分页显示,最简单的做法是在网址后面加多个page的当数,点"下一页"时,让网页重定向到pa

  • 解决Ajax加载JSon数据中文乱码问题

    一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { enable: true, url: basePath + '/sysMenu/listSysMenu', autoParam: ["id=parentId"] } SpringMvc中文字符处理: Java代码 <mvc:annotation-driven> <mvc

  • 深入浅析Jsonp解决ajax跨域问题

    一.介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,很多人都是复制别人的,如此下去,其实找的资料就那么几份,关键是我还看不懂,可能是能力问题吧,自己经过很多尝试,所以总结了一下,终究还是弄懂了皮毛.注意一点是,这里是用Jsonp解决ajax的跨域问题,具体的实现其实不是ajax. 1.同源策略 浏览器有一个很重要的概念--同源策略(Same-Origin Policy).所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(JavaS

  • 解决nginx不支持thinkphp中pathinfo的问题

    下面小编通过文字加代码的方式给大家详解下,具体内容如下: 其实,要解决nginx不支持pathinfo的问题,有两个解决思路,一是不使用pathinfo模式,二是修改nginx的配置文件,使它支持pathinfo.为了使问题简单化,我选择了第一种方式,因为就第二种方式,我查了很多资料,发现大家的方法不尽相同,有的还差别很大,容易造成误导,所以我选择从简出发,选择普通模式,虽然有一定的风险.当把index.php对应的前台代码修改完毕之后,发现前台基本正常,可是后台仍然出现重定向的问题.折腾了半天

  • springMVC解决ajax请求乱码的三种方法

    springMVC解决ajax请求乱码的问题 前言: 最近在项目的使用过程中发现在springmvc的项目中,使用返回页面的请求方式,数据都能正常显示,但是对于ajax的请求,始终显示乱码.首先第一种是因为我们在web.xml中配置了spring的字符编码过滤器,那么使用ajax请求为什么就不行了呢?下面简单的分析一下,仅供参考. 先列出简单的请求代码: 浏览器端: <script type="text/javascript"> $.ajax({ type: "P

  • 完美解决ajax跨域请求下parsererror的错误

    ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交.返回都正常 XMLHttpRequest.status=200  (正常响应) XMLHttpRequest.readyState=4 (正常接收) ajax也会提示一个parseerror的错误. 出现这个错误,大都是不良书写习惯,或者语法不当造成的. 关于ajax的错误,请使用: error:function(XMLHttpRequest, textStatus, errorThro

随机推荐