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

时间 2019-11-08

标签谈谈针对 ajax 请求结果缓存栏目 Ajax 繁體版

原文原文链接

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

1、问题重现

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

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中显示的时间都是相同的。java

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

因为IE针对Ajax请求的返回的结果是根据请求地址进行缓存的，因此若是不但愿这个缓存机制生效，咱们能够在每次请求时为请求地址添加不一样的后缀来解决这个问题。针对这个例子，咱们经过以下的代码为请求地址添加一个基于当前时间的查询字符串，再次运行程序后IE中将会显示实时的时间。jquery

<!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>

3、经过jQuery的Ajax设置解决问题

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

<!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拦截的请求来证明。浏览器

4、经过定制响应解决问题

咱们能够经过请求的响应来控制浏览器针对结果的缓存，为此咱们定义了以下一个名为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请求的响应消息：app

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