文档章节

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

小致Daddy
 小致Daddy
发布于 2016/11/14 15:03
字数 856
阅读 21
收藏 0

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

一、问题重现

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

public class HomeController : Controller{
public ActionResult Index(){
         return View();
    } 
public string GetCurrentTime(){
  return DateTime.Now.ToLongTimeString();
    }
}
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>  
<script type="text/javascript" src="@Url.Coutent(“~/Scripts/jquery-1.7.1.min.js”)"></script>
<script type="text/javascript">
    $(function () {
        window.setInterval(function () {
        $.ajax({
            url:'@Url.Action("GetCurrentTime")',
            success: function (result) {
                $("ul").append("<li>" + result + "</li>");
            }
            });
        }, 5000);
    });
</script>
</head>
<body> 
<ul></ul>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
     <head>        
         <script type="text/javascript">
             $(function () {
                 window.setInterval(function () {
                     $.ajax({
                         url:'@Url.Action("GetCurrentTime")?'+ new Date().toTimeString() ,
                         success: function (result) {
                             $("ul").append("<li>" + result + "</li>");
                         }
                     });
                 }, 5000);
             });
         </script>
     </head>
</html>

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

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

<!DOCTYPE html>
 <html>
     <head>        
         <script type="text/javascript">
             $(function () {
                 $.ajaxSetup({ cache: false }); 
                 window.setInterval(function () {
                     $.ajax({
                         url:'@Url.Action("GetCurrentTime")',
                         success: function (result) {
                             $("ul").append("<li>" + result + "</li>");
                         }
                     });
                 }, 5000);
             });
         </script>
     </head>
</html>

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

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

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

 public class HomeController : Controller
 {
     public ActionResult Index()
     {
         return View();
     }
  
    [NoCache] 
     public string GetCurrentTime()
     {
         return DateTime.Now.ToLongTimeString();
     }
 }
 public class NoCacheAttribute : FilterAttribute, IActionFilter
 {
     public void OnActionExecuted(ActionExecutedContext filterContext)
     {
        filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
     }
  
     public void OnActionExecuting(ActionExecutingContext filterContext)
     {}
 }

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

HTTP/1.1 200 OK
 Server: ASP.NET Development Server/10.0.0.0
 Date: Thu, 03 Jan 2013 12:54:56 GMT
 X-AspNet-Version: 4.0.30319
 X-AspNetMvc-Version: 4.0
 Cache-Control: no-cache 
 Pragma: no-cache
 Expires: -1
 Content-Type: text/html; charset=utf-8
 Content-Length: 10
 Connection: Close
 8:54:56 PM

 

© 著作权归作者所有

小致Daddy

小致Daddy

粉丝 186
博文 556
码字总数 594227
作品 0
济南
技术主管
私信 提问
AngularJS在IE下取数据总是缓存问题的解决方法

本文实例讲述了AngularJS在IE下取数据总是缓存问题解决方法。分享给大家供大家参考,具体如下: 问题: 在使用AngularJS发出请求(GET)获取服务端数据,然后再绑定到页面中,你会发现在IE中...

透笔度
2016/11/28
61
0
Ajax请求被缓存的几种处理方式

我们都知道IE会针对ajax请求的地址缓存请求结果,直到缓存过期之前,针对相同地址发出的请求,只有第一次会请求会真正发送到服务端.在某种情况下,这种缓存机制确实能提高web的响应速度,但是有时...

飛飛飛jjs
2017/08/28
0
0
应用Promise封装Ajax实践

引: axios在项目中经常使用,但有次面试让我把ajax封装成axios形式,当时居然没写出来。看来还是不能停留在使用的表层。 回来研究promise觉得也并不是很难,关键是掌握Promise A+规范以及P...

非常兔
2018/08/08
0
0
jquery 请求ie缓存,数据不更新的问题

jquery 请求ie缓存,数据不更新的问题【ajax禁用缓存解决ie数据不更新的问题】 在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题...

i33
2012/03/31
236
0
.NET性能调优之三:YSlow相关规则的调优工具和方法

.NET性能调优系列文章 系列文章索引 .NET性能调优之一:ANTS Performance Profiler的使用 .NET性能调优之二:使用Visual Studio进行代码度量 .NET性能调优之三:YSlow相关规则的调优工具和方...

达摩院法师
2013/01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

还为PDF转Word抓狂?以下神器让你在职场倍受欢迎!

身在职场的你,是否一直在琢磨:如何能让自己在公司更受欢迎?如何才能在办公室里混个好人缘?如何在同事圈里留个好印象?其实,想要让自己成为受欢迎的人,只要让自己成为大家需要的人不就行...

foxit2world
7分钟前
2
0
AndServer+Service打造Android服务器实现so文件调用

so 文件调用 随着 Android 移动安全的高速发展,不管是为了执行效率还是程序的安全性等,关键代码下沉 native 层已成为基本操作。 native 层的开发就是通指的 JNI/NDK 开发,通过 JNI 可以实...

夜幕NightTeam
9分钟前
1
0
Docker下kafka学习三部曲之二:本地环境搭建

在上一章《 Docker下kafka学习,三部曲之一:极速体验kafka》中我们快速体验了kafka的消息分发和订阅功能,但是对环境搭建的印象仅仅是执行了几个命令和脚本,本章我们通过实战来学习如何编写...

程序员欣宸
9分钟前
1
0
萌新推荐!不再为Excel转换PDF发愁,Aspose.Cells for .NET一步到位!

Aspose.Cells for .NET(点击下载)是Excel电子表格编程API,可加快电子表格管理和处理任务,支持构建具有生成,修改,转换,呈现和打印电子表格功能的跨平台应用程序。 将Excel工作簿转换为...

mnrssj
10分钟前
1
0
对于绘画小白怎么画制服?该注意什么?

怎样制作学生服装?想必绘画初学者们常常会想的问题吧,不知道怎样才能画好人物的衣服,别着急,今日就在这儿讲一些关于如何绘画学生衣服校服的教程给我们!期望能够帮到你们! 轻便西装是不...

热爱画画的我
16分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部