谈谈IE针对Ajax请求结果的缓存

最新推荐文章于 2022-05-30 13:52:54 发布
最新推荐文章于 2022-05-30 13:52:54 发布
阅读量545 收藏
点赞数
分类专栏： 编程技巧

在默认情况下，IE会针对请求地址缓存Ajax请求的结果。换句话说，在缓存过期之前，针对相同地址发起的多个Ajax请求，只有第一次会真正发送到服务端。在某些情况下，这种默认的缓存机制并不是我们希望的（比如获取实时数据），这篇文章就来简单地讨论这个问题，以及介绍几种解决方案。

目录 
一、问题重现 
二、通过为URL地址添加后缀的方式解决问题 
三、通过JQuery的Ajax设置解决问题 
四、通过定制响应解决问题

一、问题重现

我们通过一个ASP.NET MVC应用来重现IE针对Ajax请求结果的缓存。在一个空ASP.NET MVC应用中我们定义了如下一个默认的HomeController，其中包含一个返回当前时间的Action方法GetCurrentTime。

   1: public class HomeController : Controller
   2: {
   3:     public ActionResult Index()
   4:     {
   5:         return View();
   6:     }
   7:  
   8:     public string GetCurrentTime()
   9:     {
  10:         return DateTime.Now.ToLongTimeString();
  11:     }
  12: }

默认Action方法Index对应的View定义如下。我们每隔5秒钟利用JQuery的方法以Ajax的方式调用GetCurrentTime操作，并将返回的结果显示出来。

   1: <!DOCTYPE html>
   2: <html>
   3:     <head>
   4:         <title>@ViewBag.Title</title>  
   5:         <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js"></script>
   6:         <script type="text/javascript">
   7:             $(function () {
   8:                 window.setInterval(function () {
   9:                     $.ajax({
  10:                         url:'@Url.Action("GetCurrentTime")',
  11:                         success: function (result) {
  12:                             $("ul").append("<li>" + result + "</li>");
  13:                         }
  14:                     });
  15:                 }, 5000);
  16:             });
  17:         </script>
  18:     </head>
  19:     <body> 
  20:         <ul></ul>
  21:     </body>
  22: </html>

采用不同的浏览器运行该程序会得到不同的输出结果，如下图所示，Chrome浏览器中能够显示出实时时间，但是在IE中显示的时间都是相同的。

 

二、通过为URL地址添加后缀的方式解决问题

由于IE针对Ajax请求的返回的结果是根据请求地址进行缓存的，所以如果不希望这个缓存机制生效，我们可以在每次请求时为请求地址添加不同的后缀来解决这个问题。针对这个例子，我们通过如下的代码为请求地址添加一个基于当前时间的查询字符串，再次运行程序后IE中将会显示实时的时间。

   1: <!DOCTYPE html>
   2: <html>
   3:     <head>        
   4:         <script type="text/javascript">
   5:             $(function () {
   6:                 window.setInterval(function () {
   7:                     $.ajax({
   8:                         url:'@Url.Action("GetCurrentTime")?'+ new Date().toTimeString() ,
   9:                         success: function (result) {
  10:                             $("ul").append("<li>" + result + "</li>");
  11:                         }
  12:                     });
  13:                 }, 5000);
  14:             });
  15:         </script>
  16:     </head>
  17: </html>

 

三、通过jQuery的Ajax设置解决问题

实际上jQuery具有针对这个的Ajax设置，我们只需要按照如下的方式调用$.ajaxSetup方法禁止掉Ajaz的缓存机制。

   1: <!DOCTYPE html>
   2: <html>
   3:     <head>        
   4:         <script type="text/javascript">
   5:             $(function () {
   6:                 $.ajaxSetup({ cache: false }); 
   7:                 window.setInterval(function () {
   8:                     $.ajax({
   9:                         url:'@Url.Action("GetCurrentTime")',
  10:                         success: function (result) {
  11:                             $("ul").append("<li>" + result + "</li>");
  12:                         }
  13:                     });
  14:                 }, 5000);
  15:             });
  16:         </script>
  17:     </head>
  18: </html>

实际上jQuery的这个机制也是通过为请求地址添加不同的查询字符串后缀来实现的，这可以通过Fiddler拦截的请求来证实。

四、通过定制响应解决问题

我们可以通过请求的响应来控制浏览器针对结果的缓存，为此我们定义了如下一个名为NoCacheAttribute的ActionFilter。在实现的OnActionExecuted方法中，我们调用当前HttpResponse的SetCacheability方法将缓存选项设置为NoCache。该NoCacheAttribute特性被应用到GetCurrentTime方法后，运行我们的程序在IE中依然可以得到实时的时间。

   1: public class HomeController : Controller
   2: {
   3:     public ActionResult Index()
   4:     {
   5:         return View();
   6:     }
   7:  
   8:     [NoCache] 
   9:     public string GetCurrentTime()
  10:     {
  11:         return DateTime.Now.ToLongTimeString();
  12:     }
  13: }
  14: public class NoCacheAttribute : FilterAttribute, IActionFilter
  15: {
  16:     public void OnActionExecuted(ActionExecutedContext filterContext)
  17:     {
  18:         filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
  19:     }
  20:  
  21:     public void OnActionExecuting(ActionExecutingContext filterContext)
  22:     {}
  23: }

实际NoCacheAttribute特性最终控制消息消息的Cache-Control报头，并将其设置为“no-cache”，指示浏览器不要对结果进行缓存。如下所示的是针对GetCurrentTime请求的响应消息：

   1: HTTP/1.1 200 OK
   2: Server: ASP.NET Development Server/10.0.0.0
   3: Date: Thu, 03 Jan 2013 12:54:56 GMT
   4: X-AspNet-Version: 4.0.30319
   5: X-AspNetMvc-Version: 4.0
   6: Cache-Control: no-cache 
   7: Pragma: no-cache
   8: Expires: -1
   9: Content-Type: text/html; charset=utf-8
  10: Content-Length: 10
  11: Connection: Close
  12:  
  13: 8:54:56 PM
作者： Artech
出处： http://artech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
adagadadfafd
关注
专栏目录
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
2018春招前端面试: 闯关记(精排精校) | 掘金技术征文
CRPER
03-13 6526
前言 去年年末研发组解散失业, so选择回去学车了,也顺利拿到了驾照 最近回归大深圳….开始踏上漫漫的找工作之路; “拉勾上吊一百年不匹配!!!”,”BOSS直聘日夜没反应!!!” 题目范围涵盖我最近遇到的笔试题和面谈的(CSS/JS/HTTP/Node/Hybrid/Vue/NG/React) emm…..这里不列举哪些公司了, 若是你完整的阅读一...
关于解决JQuery发送Ajax请求后，IE缓存数据不更新的问题
weixin_30474613的博客
08-07 85
今天在做ajax页面无刷新请求后台服务器数据的时候，IE下遭遇Ajax缓存，FF和Chrome均正常，因为刚开始并不知道IE有这个坏毛病，折腾好久，终于解决问题。 在默认情况下，IE会针对请求地址缓存Ajax请求的结果。换句话说，在缓存过期之前，针对相同地址发起的多个Ajax请求，只有第一次会真正发送到服务端。在某些情况下，这种默认的缓存机制并不是我们希望的（比如获取实时数据）。 在IE下...
IE 针对ajax get请求的缓存问题
weixin_34224941的博客
10-09 107
2019独角兽企业重金招聘Python工程师标准>>> ...
IE下ajax请求的缓存问题
caixiajia的专栏
08-04 374
最近在项目中遇到一个问题，前台通过ajax请求后台进行保存操作，在谷歌浏览器下测试通过，在IE下只有清除缓存才可以。 参考资料：http://www.cnblogs.com/artech/archive/2013/01/03/cache-4-ie.html，这个写的比较好。 采用其中的第二种方法： 通过jQuery的Ajax设置解决问题。 在页面加载时加上下面这句话就可以了 $
谈谈你对aja的理解(一、二)
10-23
Ajax，即异步JavaScript和XML，是一种在无需刷新整个网页的情况下，能够更新...同时，随着技术的发展，现在还有更多的库和框架，如jQuery、axios和fetch API，它们提供了更高级别的抽象和更友好的API来处理Ajax请求。
php ajax实训心得1000字,新手必学的Ajax总结
weixin_33331639的博客
03-10 1055
这次给大家带来新手必学的Ajax总结，新手必学Ajax总结有哪些，下面就是实战案例，一起来看一下。一、Ajax简介、优劣势、应用场景以及技术Ajax简介 :Asynchronous Javascript And XML (异步的JavaScript和XML)它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器...
前端面试题总结(PS:尊重劳动成果拿或者要原笔记记得滴滴)
weixin_46917587的博客
05-30 508
前端优化性能的方法 压缩字体文件 使用 fontmin-webpack 插件对字体文件进行压缩 减少 HTTP 请求 使用字体图标 iconfont 代替图片图标 使用 webp 格式的图片 减少重绘重排 使用事件委托 使用 Web Workers html + css 1. HTML和CCS3新增那些内容？ 广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。 Html中新
ajax调用中ie缓存问题解决方法
12-09
本文实例分析了ajax调用中ie缓存问题解决方法。分享给大家供大家参考，具体如下： ajax请求调用的过程中发现的问题：后台请求是一个简单的.aspx文件,而这个页面又没有考虑过缓存的影响，使用ajax调试的时候发现有时候根本不走后台代码直接返回结果了，所以估计是受到浏览器缓存的影响。网上搜了一下，果然是缓存的问题：“IE中如果XMLHttpRequest提交的URL与历史一样则使用缓存，根本不向服务器端提交。因此无法取到刚提交的数据或新的数据”。 解决方法大致有下面几种： 1、只改进服务器端 （1）后台是简单的.aspx文件，直接加上 代码如下:<%@ OutPutCache Locatio
ie ajax异步缓存,IE下发送Ajax请求的缓存问题
weixin_30825389的博客
08-06 188
IE下发送Ajax请求的缓存问题(2012-03-22 15:54:25)标签：it分类：web今天下午在做要素页面无刷新添加的时候，IE下遭遇Ajax缓存戏弄，因为刚开始并不知道IE有这个坏毛病，折腾了我一下午，终于解决问题。郁闷之余，总结一下解决办法：在IE下用Ajax请求某一页面，通常会因为缓存的原因而返回上一次的结果，造成混乱，而FF下不会出现这种情况。为了不受缓存影响，可以这样做：IE访...
解决ie对ajax请求的结果进行缓存的问题
qq_42524153的博客
11-04 299
问题描述:     IE浏览器会对ajax请求的结果进行缓存 导致下次再发送同样请求的时候得到的数据是IE本地缓存的数据 而不是最新数据 解决办法:     在请求地址(URL)后面跟上时间戳 :  Date.now(),  这样每次请求的url都不一样 让每一次发送的请求都是新的请求 使得它不走本地缓存而直接去服务器拿数据,保证每次拿到的都是最新数据 如何加时间戳: 在路径后面
IE浏览器Ajax缓存问题
RedWolf-blog
11-21 746
IE浏览器Ajax缓存问题 IE会针对ajax请求的地址缓存请求结果,直到缓存过期之前,针对相同地址发出的请求,只有第一次会请求会真正发送到服务端. 解决方式 : 手动清空ajax缓存 优点:方便快捷,可以统一配置; 缺点:统一配置的情况下,所有ajax都不缓存,不统一配置下,每次使用ajax都要重新设置cache属性,较麻烦; // 使用ajax前调用,也可以在init中统一设置 $....
IE对于请求响应结果缓存的大坑
KimiKudo的博客
07-31 660
最近项目在处理一些多浏览器的兼容问题,由于我平时开发基本只用chrome,最近开始用IE发现了很多IE的大坑 比如今天,前端跟我说登录之后要手动刷新一次页面才能获取到当前登录用户,只有IE有这个问题,其他没有. 我考虑是IE浏览器缓存机制的问题 我们的项目是Springboot+VUE. 先说一下我的登录登出的请求们 一个login,负责登录,并将登录的用户设置进session的属性,返回值是当前...
ajax的IE缓存问题
mantou_riji的博客
05-13 331
文章目录结果的产生ajax解决缓存问题 结果的产生 IE 缓存问题，IE浏览器会将ajax请求的返回结果进行缓存，如果再遇到相同的ajax请求，就直接在缓存中取结果，这样就得不到最新的服务器响应结果。 （chrom浏览器可以实时更新） eg： server.js // 1.引入express const express = require('express'); // 2.创建应用对象 const app = express(); // 3.创建路由规则 // 如果请求行的路径是/server的GET请求就
ajax缓存的形成原因，ajax如何解决浏览器缓存问题?
weixin_47450807的博客
01-25 954
ajax形成的原因就是让我们在不刷新页面的情况下就能获取数据，也可以在不刷新页 面的情况下来提交数据。这样就很有利于用户的体验。当ajax异步获取数据后，其实 会在内存中缓存一份该数据，所以当我们不刷新的时候，内存中就永远存在该数据。 导致如果我们请求的url不变的情况下，可能就直接向内存中请求数据，所以数据可能 就不会发生改变。 下面主要有以下几种解决方案。 1、在XMLHttpRequest对象发送请企之前，可以设置请求头。 ajaxObject.setRequestHeader("If-motifi
IE浏览器中的ajax缓存问题与new Date()兼容性问题的解决方法
github_39532240的博客
11-17 841
1、 最近项目做兼容性测试时发现，IE11下采用ajax发送请求更新数据时页面数据始终保持不变，刷新页面也没用，退出后重新登录网站才能获得最新的数据；  网上搜索后才发现原因是：IE浏览器中存在AJAX缓存，当请求地址和参数不变时（‘GET请求’），直接从缓存中获取数据，并不会发送请求，因此数据无法更新；POST请求因为参数发生变化了，因此能正常发送；   解决方法就是：在每一次GET请求中加
ajax请求 禁用缓存的方法
kevin_chen技术博客
06-10 1757
//1.加载页面 加入参数 _:(new Date()).getTime() $.get('{:U("admin/index/ajaxTemporaryLeadJob")}', { _:(new Date()).getTime()},function (e) { $('#accordion2').html(e)...
Ajax请求结果缓存问题解决方案
Ajax请求结果缓存问题是指在IE浏览器中，默认情况下会对Ajax请求的结果进行缓存。当多个Ajax请求指向相同的URL地址时，只有第一次请求会真正发送到服务端，而后续的请求都会直接从缓存中获取结果，这可能不是我们所...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值