前言:

现在前后端基本都是通过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进行交互也能实现监听前进/后台/刷新的功能了。

附浏览器兼容性:

更多参考:

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

通过history解决ajax不支持前进/后退/刷新的更多相关文章

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

    使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash ...

  2. 让浏览器支持 jquery ajax load 前进、后退 功能

    BEGIN; 一般在做 ajax load 的时候,非常多人都不会考虑到须要浏览器支持前进后退功能,由于大部分人都不知道能够实现. 近期遇到这个问题,经过一小段研究,发现github已经有现成的开源工 ...

  3. 使用h5的history改善ajax列表请求体验

    信息比较丰富的网站通常会以分页显示,在点“下一页”时,很多网站都采用了动态请求的方式,避免页面刷新.虽然大家都是ajax,但是从一些小的细节还是 可以区分优劣.一个小的细节是能否支持浏览器“后退”和“ ...

  4. html5解决ajax破坏浏览器机制

    pjax是一种基于ajax+history.pushState的新技术,该技术可以无刷新改变页面的内容,并且可以改变页面的URL.pjax是ajax+pushState的封装,同时支持本地存储.动画等 ...

  5. Unit02: JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持,编码问题

    Unit02: JSON . 使用JSON实现数据交换 . jQuery对AJAX的支持 1. 编码问题 (1)发送get请求 为什么会产生乱码? ie浏览器提供的ajax对象,对中文会使用gbk来编 ...

  6. 解决AJAX跨域:1、利用JSONP;2、JS设置Header

    一.利用JSONP: 首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版: $(document).ready(function(){ var url='http://localho ...

  7. 解决Ajax请求跨域问题

    from:https://blog.csdn.net/wang379275614/article/details/53333775 上篇文章提到,由于浏览器的同源策略,使得,AJAX请求只能发给同源的 ...

  8. e3mall商城总结11之sso系统的分析、应用以及解决ajax跨域问题

    说在前面的话 一.sso系统分析 什么是sso系统 SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次 ...

  9. 使用JavaScript的history对象来实现页面前进后退(go/back/forward)。

    我们都知道JavaScript有history对象,主要是用来记录浏览器窗口的浏览记录.但是,JS脚本是不允许访问到这个记录里面的内容(隐私). 常见的用法是: history.back();//返回 ...

随机推荐

  1. 超声波 HC-SR04

    三.实验原理 1. 超声波传感器简介 超声波测距系统主要应用于汽车的倒车雷达.及机器人自动避障行走.建筑施工工地以及一些工业现场例如:液位.井深.管道长度等场合.超声波是一种在弹性介质中的机械振荡,有 ...

  2. 【转】jQuery Validate验证框架详解

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...

  3. How to use data analysis for machine learning (example, part 1)

    In my last article, I stated that for practitioners (as opposed to theorists), the real prerequisite ...

  4. VR全景智慧城市——宣传再华丽,不如用户亲身参与

    在当今社会上,VR和AI已经成为黑科技的代名词了.同样都是很热门的科技,但是它们的出场方式却差距不小.AI的出场方式是很有科技范,而VR的出场方式却是土豪气十足. 营销是什么,是通过制造爆点,用爆点实 ...

  5. Syntax error on tokens, delete these tokens.问题解决

    问题:Syntax error on tokens, delete these tokens.(在标记语法错误,删除这些标记) 原因:存在中文字符或者符号(包括空格):单引号.双引号不匹配:复制的代码 ...

  6. Java中的框架基础面试知识

    spring mvc 工作机制(原理): DispatcherServlet主要用作职责调度工作,本身主要用于控制流程 Spring mvc运行原理 1.springmvc将所有的请求都提交给Disp ...

  7. LANMP一键安装包 版本服务任你选 可安装单一服务

    介绍与使用 更多内容请到 乌龟运维 wuguiyunwei.com 请保证在系统原有yum源文件存在的情况下运行此脚本 以下以centos7.3为例: 下面以安装LNMP为例: ? 1 wget ht ...

  8. [UWP]用Shape做动画(2):使用与扩展PointAnimation

    上一篇几乎都在说DoubleAnimation的应用,这篇说说PointAnimation. 1. 使用PointAnimation 使用PointAnimation可以让Shape变形,但实际上没看 ...

  9. angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件

    时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制 ...

  10. Unity3D常用 API 之实例化与销毁

    1.实例化游戏物体 1.1.游戏中的案例介绍 在很多 MMORPG 类的游戏中都有类似于“金钱副本”的副本关卡.在这类副 本中通常都是限定一个时间,在这个时间内玩家可以尽情的破坏,然后收集金钱. 分析 ...