解决浏览器记住ajax请求并能前进和后退问题

在我们浏览不同网页的时候，我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这都有一个共同点，就是 浏览器地址栏的地址改变了。浏览器自身维护了一个记录用户访问页面历史的栈，栈中记录了用户访问不同页面的先后顺序。

但是在开发中，我们经常会用到ajax技术去提升网页的用户体验。但是ajax本身并不改变浏览器地址栏中的url，是在同一个网页内部操作的，这时，浏览器并不会记录ajax请求的记录。在这种情况下，用户在一个页面触发的5次ajax请求后，点了后 退按钮，浏览器不会再次请求之前的ajax请求，而是返回了上一页。

解决这个问题的第一种方法就是利用location的hash值。当url的hash值改变时，页面并不会跳转，但是浏览器此时会将此带hash的url记录到历史记录中。利用这个特性，我们可以人为的模拟带历史记录功能的ajax请求。下面是这种方法的demo。

ul{
 margin:0;
 padding:0;
}
li{
 list-style: none;
 display: block;
 float: left;
 border: 1px solid #000;
 padding: 10px;
 margin-right: 20px;
 cursor: pointer;
}
li.active{
 background-color: #000000;
 color: #fff;
}
<ul>
 <li data-id="1">1</li>
 <li data-id="2">2</li>
</ul>

先创建两个按钮，点击按钮时，向服务器发送请求，并将data-id通过参数带到服务器，服务器返回对应data-id的结果。
于此同时，改变按钮状态，并将location的hash值改为data-id的值。最后监听location的hash值变化，重复上述步骤。

function sendAjax(hash){
 console.log("recived data:" + hash);
}
function btnStatus(hash){
 $("li").removeClass('active');
 $("li[data-id="+hash+"]").addClass('active');
}
function onHashChange(){
 var curHash = window.location.hash.replace("#","");
 if(curHash){
  btnStatus(curHash);
  sendAjax(curHash);
 }
}
window.onhashchange = onHashChange;
$("li").click(function(){
 var id = $(this).attr('data-id');
 window.location.hash = id;
});

当我们点击按“1-2-1”这样的顺序点击按钮时，控制台的输出如下

recived data:1
recived data:2
recived data:2

此时我们连续按三次返回按钮，控制台输出如下

recived data:1
recived data:2
recived data:1

可见这样就模拟实现了浏览器记录ajax请求的功能。

以上所述是小编给大家介绍的让浏览器记住ajax请求并能前进和后退方法(一)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题

    需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片ping) 的跨域能力,将它们的 src 属性指向统计地址,但是这次用了 ajax 进行统计,遂出现了这个问题. demo 代码如下: <a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe&q

  • 浅谈Ajax请求与浏览器缓存

    在现代Web应用程序中,前端代码充斥着大量的Ajax请求,如果对于Ajax请求可以使用浏览器缓存,那么可以显著地减少网络请求,提高程序响应速度. 1. Ajax Request 使用jQuery框架可以很方便的进行Ajax请求,示例代码如下: $.ajax({ url : 'url', dataType : "xml", cache: true, success : function(xml, status){ } }); 非常简单,注意其中的第4行代码:cache:true,显式的要

  • Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因

    看到别人写的JS,ajax请求地址后加随机参数,比如XXXX?t= + new Date().getTime(). 一开始搞不懂为什么,网上查了资料,原因是防止浏览器缓存. 浏览器为了提高用户访问同一页面的速度,会对页面数据进行缓存.当url请求地址不变时, 有时候会导致浏览器不发送请求,直接从缓存中读取之前的数据. 如果数据改变了,而没加随机数,读取的数据会跟之前一样. 加上随机数,就是欺骗浏览器url改变了,会每次都向服务器发送请求而不去读缓存

  • js与jQuery实现的兼容多浏览器Ajax请求实例

    ajax我们经常会用到的,但网上找到的大部份ajax兼容性都不强,下面自己改了一个不错的兼容性很强的ajax函数,同时后面介绍的jquery ajax 兼容性也很强. 一.纯js实现的Ajax实例: 复制代码 代码如下: var ajax = function() {}; ajax.prototype = {     request: function(method, url, callback, postVars) {         var xhr = this.createXhrObjec

  • 基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题

    需要使用的 jquery.history.js插件 在巨人的肩膀之上,以下前进后退工作基于插件完成! 做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求.发现浏览器的刷新,后退,前进按钮失效.于是乎google了一下.发现了一些解决方法.其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求. 换另外一个插件测试下,完美达到我的要求. 总的思路,在url上加上参数,一切工作基于这个参数完成. 复制代码 代码如下: //截取传入字符串中第一次出

  • 解决浏览器记住ajax请求并能前进和后退问题

    在我们浏览不同网页的时候,我们可以通过浏览器的前进.后退键来去到我们前后访问过的页面.这都有一个共同点,就是 浏览器地址栏的地址改变了.浏览器自身维护了一个记录用户访问页面历史的栈,栈中记录了用户访问不同页面的先后顺序. 但是在开发中,我们经常会用到ajax技术去提升网页的用户体验.但是ajax本身并不改变浏览器地址栏中的url,是在同一个网页内部操作的,这时,浏览器并不会记录ajax请求的记录.在这种情况下,用户在一个页面触发的5次ajax请求后,点了后 退按钮,浏览器不会再次请求之前的aja

  • 解决laravel 出现ajax请求419(unknown status)的问题

    如下所示: 这个是因为laravel自带CSRF验证的问题 解决方法 方法一:去关掉laravel的csrf验证,但这个人不建议,方法也不写出来了. 方法二:把该接口写到api.php上就好了 方法三: 首先在页面加上 <meta name="csrf-token" content="{{ csrf_token() }}" /> 然后请求的在header里面加上 'X-CSRF-TOKEN': $('meta[name="csrf-token&

  • Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)

    程序内容相关:Laravel+ajax+CSRF 好吧还有好多能扯出来好像有点多而且微不足道得像面前鼠标垫上的纤维不重要所以就不扯了啊我废话好多 贴上自己的解决办法,两行内容 1.在页面上添加 <meta name="csrf-token" content="{{ csrf_token() }}"> 2.然后在页面的script标签{{– 这句是废话,但是,啊我的博客好短不想删 – }}中添加 $.ajaxSetup({headers: {'X-CSRF

  • 解决Shiro 处理ajax请求拦截登录超时的问题

    目录 Shiro 处理ajax请求拦截登录超时 配置全局ajax配置 Shiro session超时页面跳转的处理 问题描述 ajax请求超时处理 后端Filter代码 前端通用ajax处理 非ajax请求超时跳转 Shiro 处理ajax请求拦截登录超时 配置全局ajax配置 $.ajaxSetup({ complete:function(XMLHttpRequest,textStatus){ if(textStatus=="parsererror"){ $.messager.ale

  • 防止重复发送Ajax请求的解决方案

    在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后显示出来. 一.问题解决 解决这种问题有两种方式: 1.当连续进行多个请求,并且请求的url地址相同时.放弃前面的所有请

  • ajax请求成功后新开窗口window.open()被拦截解决方法

    问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限制),即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所

  • ie发送ajax请求返回上一次结果的解决方法

    问题出现原因: 1. ie下面只会建立一次 ajax 请求,将响应结果放在浏览器缓存里 下次调用该ajax请求时 从缓存里读取 get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题 2. 火狐下面 每次激活事件 都会重新建立一次ajax请求 解决方法: 1: 在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数 在javascript发送的URL后加上t=Math.random() 例如这样:URL

  • 如何解决Ajax请求结果的缓存问题说明

    如何解决Ajax请求结果的缓存问题说明

    在默认情况下,IE会针对请求地址缓存Ajax请求的结果.换句话说,在缓存过期之前,针对相同地址发起的多个Ajax请求,只有第一次会真正发送到服务端.在某些情况下,这种默认的缓存机制并不是我们希望的(比如获取实时数据),这篇文章就来简单地讨论这个问题,以及介绍几种解决方案.目录 一.问题重现 二.通过为URL地址添加后缀的方式解决问题 三.通过JQuery的Ajax设置解决问题 四.通过定制响应解决问题一.问题重现我们通过一个ASP.NET MVC应用来重现IE针对Ajax请求结果的缓存.在一个空

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

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

  • Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来分析一下失败的原因 一.失败的原因 那是因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png.文件下载等,然而ajax请求只是个"字符型"的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白

随机推荐