浅析IE针对Ajax请求结果的缓存问题

在默认情况下,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定义如下。我们每隔5秒钟利用JQuery的方法以Ajax的方式调用GetCurrentTime操作,并将返回的结果显示出来。

<!DOCTYPE html> <html> <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> </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>"); } }); }, ); }); </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>"); } }); }, ); }); </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/. 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/html; charset=utf- Content-Length Connection Close PM

时间: 2024-09-28 07:53:29

浅析IE针对Ajax请求结果的缓存问题的相关文章

浅析IE针对Ajax请求结果的缓存问题_AJAX相关

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

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

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

如何解决Ajax请求结果的缓存问题说明_实用技巧

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

浅谈Ajax请求与浏览器缓存_AJAX相关

在现代Web应用程序中,前端代码充斥着大量的Ajax请求,如果对于Ajax请求可以使用浏览器缓存,那么可以显著地减少网络请求,提高程序响应速度. 1. Ajax Request 使用jQuery框架可以很方便的进行Ajax请求,示例代码如下: $.ajax({ url : 'url', dataType : "xml", cache: true, success : function(xml, status){ } }); 非常简单,注意其中的第4行代码:cache:true,显式的要

JQUERY的AJAX请求缓存里的数据问题处理_jquery

参数type由get改成post 添加参数cache并设置成false 添加时间戳 $.ajax({ url: 'ios/index', cache: false, type: 'post', data: { timestamp: new Date().getTime() //params here }, dataType: 'json' }).done(function (data) { //codes here }); 是不是非常的简单呢,希望小伙伴们能够喜欢. 以上是小编为您精心准备的的内

ie发送ajax请求返回上一次结果的解决方法

 这篇文章主要介绍了ie发送ajax请求返回上一次结果的解决方法,需要的朋友可以参考下 问题出现原因:    1. ie下面只会建立一次 ajax 请求,将响应结果放在浏览器缓存里 下次调用该ajax请求时 从缓存里读取    get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题    2. 火狐下面 每次激活事件 都会重新建立一次ajax请求    解决方法:    1: 在AJAX请求的页面后加个随机函

jquery ajax 请求,如何让它加载一次请求

问题描述 目的是在页面div中插入ajax返回的数据.每次请求点击按钮触发ajax,想添加一个表单,如何做?我用的是append,每次按钮触发ajax,都会在后面追加一个,如果点击三次,出现三个相同的数据,这个问题怎么解决?? 解决方案 不要用append,用html:比如div如下:<div id="divData"></div>那么你的ajax返回回调函数中应该如下写:var data = "ajax请求返回的数据":$("#d

ie发送ajax请求返回上一次结果的解决方法_AJAX相关

问题出现原因: 1. ie下面只会建立一次 ajax 请求,将响应结果放在浏览器缓存里 下次调用该ajax请求时 从缓存里读取 get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题 2. 火狐下面 每次激活事件 都会重新建立一次ajax请求 解决方法: 1: 在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数 在javascript发送的URL后加上t=Math.random() 例如这样:URL

Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因_javascript技巧

看到别人写的JS,ajax请求地址后加随机参数,比如XXXX?t= + new Date().getTime(). 一开始搞不懂为什么,网上查了资料,原因是防止浏览器缓存. 浏览器为了提高用户访问同一页面的速度,会对页面数据进行缓存.当url请求地址不变时, 有时候会导致浏览器不发送请求,直接从缓存中读取之前的数据. 如果数据改变了,而没加随机数,读取的数据会跟之前一样. 加上随机数,就是欺骗浏览器url改变了,会每次都向服务器发送请求而不去读缓存