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

Posted 2022-07-21 知

篇首语：我永远要记得我所想要的。而不是我所恐惧的。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全如何解决Ajax请求结果的缓存问题说明相关的知识，希望对你有一定的参考价值。

如何解决Ajax请求结果的缓存问题说明 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

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

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

　　复制代码代码如下:

　　<!DOCTYPE > <> <head> <title>@ViewBag Title</title> <script type= text/javascript src= @Url Coutent( ~/Scripts/jquery min js ) ></script> <script type= text/javascript > $(function () window setInterval(function () $ ajax( url: @Url Action( GetCurrentTime ) success: function (result) $( ul ) append( <li> + result + </li> ); ); ); ); </script> </head> <body> <ul></ul> </body> </>

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

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

　　复制代码代码如下:

　　<!DOCTYPE > <> <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> ); ); ); ); </script> </head> </>

　　三通过jQuery的Ajax设置解决问题实际上jQuery具有针对这个的Ajax设置我们只需要按照如下的方式调用$ ajaxSetup方法禁止掉Ajaz的缓存机制

　　复制代码代码如下:

　　<!DOCTYPE > <> <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> ); ); ); ); </script> </head> </>

　　实际上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/ OK Server: ASP NET Development Server/ Date: Thu Jan : : GMT X AspNet Version: X AspNetMvc Version: Cache Control: no cache

　　Pragma: no cache Expires: Content Type: text/; charset=utf Content Length: Connection: Close : : PM

cha138/Article/program/ASP/201405/30970

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

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