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

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

成都创新互联公司是一家专业提供曲松企业网站建设,专注与网站设计、成都做网站、成都h5网站建设、小程序制作等业务。10年已为曲松众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

一、问题重现

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

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

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.         @ViewBag.Title   
    5. 
  
  
  
  
  5.         
    6. 
  
  
  
  
  6.         
    7. 
  
  
  
  
  7.             $(function () { 
    8. 
  
  
  
  
  8.                 window.setInterval(function () { 
    9. 
  
  
  
  
  9.                    $.ajax({ 
    10. 
  
  
  
  
  10.                        url:'@Url.Action("GetCurrentTime")', 
    11. 
  
  
  
  
  11.                        success: function (result) { 
    12. 
  
  
  
  
  12.                           $("ul").append("
  13. " + result + "
    14. "); 
  
  
  
  
  14.                        } 
    15. 
  
  
  
  
  15.                    }); 
    16. 
  
  
  
  
  16.                }, 5000); 
    17. 
  
  
  
  
  17.            }); 
    18. 
  
  
  
  
  18.        
    19. 
  
  
  
  
  19.    
    20. 
  
  
  
  
  20.      
    21. 
  
  
  
  
  21.        
      • 
  
  
  
  
    •    
      • 
  
  
  
  
    •

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

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.               
      4. 
  
  
  
  
    4.          
      5. 
  
  
  
  
    5.              $(function () { 
      6. 
  
  
  
  
    6.                  window.setInterval(function () { 
      7. 
  
  
  
  
    7.                      $.ajax({ 
      8. 
  
  
  
  
    8.                          url:'@Url.Action("GetCurrentTime")?'+ new Date().toTimeString() , 
      9. 
  
  
  
  
    9.                          success: function (result) { 
      10. 
  
  
  
  
    10.                             $("ul").append("
    11. " + result + "
      12. "); 
  
  
  
  
    12.                         } 
      13. 
  
  
  
  
    13.                     }); 
      14. 
  
  
  
  
    14.                 }, 5000); 
      15. 
  
  
  
  
    15.             }); 
      16. 
  
  
  
  
    16.         
      17. 
  
  
  
  
    17.     
      18. 
  
  
  
  
    18.

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

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

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

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

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

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

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

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

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

    当前文章：谈谈IE针对Ajax请求结果的缓存
    当前URL：http://www.mswzjz.cn/qtweb/news41/395691.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

    贝锐智能技术为您推荐以下文章

    商城网站知识

    同城分类信息

    西部信息机房　　 　400电话办理　　 　简阳电信机房　　 　成都微信小程序开发　　 　绵阳梓潼做网站　　 　制作网站　　 　广汉做网站　　 　南充做网站　　 　vi形象设计　　 　电信成都枢纽中心　　 　免备案空间　　 　成都网站SEO优化公司　　 　营销网站建设　　 　谷歌推广　　 　兴宏源活动板房　　 　网站seo优化　　 　网络营销推广　　 　手机网站制作设计　　 　成都电信光华数据中心　　 　企业网站建设