我对来自 JQuery Ajax 请求的 Internet Explorer 缓存结果存在严重问题。
我的网页上有标题,每次用户导航到新页面时都会更新。加载页面后,我会这样做
$.get("/game/getpuzzleinfo", null, function(data, status) {
var content = "<h1>Wikipedia Maze</h1>";
content += "<p class='endtopic'>Looking for <span><a title='Opens the topic you are looking for in a separate tab or window' href='" + data.EndTopicUrl + "' target='_blank'>" + data.EndTopic + "<a/></span></p>";
content += "<p class='step'>Step <span>" + data.StepCount + "</span></p>";
content += "<p class='level'>Level <span>" + data.PuzzleLevel.toString() + "</span></p>";
content += "<p class='startover'><a href='/game/start/" + data.PuzzleId.toString() + "'>Start Over</a></p>";
$("#wikiheader").append(content);
}, "json");
它只是将标题信息注入页面。您可以前往 www.wikipediamaze.com 进行检查,然后登录并开始一个新的谜题。
在我测试过的所有浏览器(Google Chrome、Firefox、Safari、Internet Explorer)中,它在 IE 中的 except 都运行良好。 第一次在 IE 中注入的一切都很好,但之后它甚至从未调用 /game/getpuzzleinfo
。就像它已经缓存了结果或其他东西。
如果我将调用更改为 $.post("/game/getpuzzleinfo", ...
IE 就可以了。但随后 Firefox 停止工作。
有人可以解释一下为什么 IE 缓存我的 $.get
ajax 调用吗?
更新
根据下面的建议,我已将我的 ajax 请求更改为此,这解决了我的问题:
$.ajax({
type: "GET",
url: "/game/getpuzzleinfo",
dataType: "json",
cache: false,
success: function(data) { ... }
});
IE 因其对 Ajax 响应的激进缓存而臭名昭著。当您使用 jQuery 时,您可以设置一个全局选项:
$.ajaxSetup({
cache: false
});
这将导致 jQuery 向请求查询字符串添加一个随机值,从而防止 IE 缓存响应。
请注意,如果您有其他 Ajax 调用在您想要缓存的地方进行,这也会为这些调用禁用它。在这种情况下,切换到使用 $.ajax() 方法并为必要的请求显式启用该选项。
有关详细信息,请参阅 http://docs.jquery.com/Ajax/jQuery.ajaxSetup。
正如 marr75 提到的,GET
被缓存。
有几种方法可以解决这个问题。除了修改响应标头之外,您还可以将随机生成的查询字符串变量附加到目标 URL 的末尾。这样,每次请求时,IE 都会认为它是不同的 URL。
有多种方法可以做到这一点(例如使用 Math.random()
、日期的变体等)。
这是您可以做到的一种方法:
var oDate = new Date();
var sURL = "/game/getpuzzleinfo?randomSeed=" + oDate.getMilliseconds();
$.get(sURL, null, function(data, status) {
// your work
});
获取始终是可缓存的。一种可行的策略是编辑响应标头并告诉客户端不要缓存信息或很快使缓存过期。
如果您正在调用 ashx 页面,您还可以使用以下代码禁用服务器上的缓存:
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
这就是我为 ajax 调用所做的:
var url = "/mypage.aspx";
// my other vars i want to add go here
url = url + "&sid=" + Math.random();
// make ajax call
它对我来说效果很好。
NickFitz 给出了一个很好的答案,但是您还需要在 IE9 中关闭缓存。为了只针对 IE8 和 IE9,您可以这样做;
<!--[if lte IE 9]>
<script>
$.ajaxSetup({
cache: false
});
</script>
<![endif]-->
这里的答案对于那些使用 jQuery 或出于某种原因直接使用 xmlHttpRequest 对象的人非常有帮助......
如果您使用的是自动生成的 Microsoft 服务代理,则解决起来并不简单。
诀窍是在事件处理程序中使用 Sys.Net.WebRequestManager.add_invokingRequest 方法更改请求 url:
networkRequestEventArgs._webRequest._url = networkRequestEventArgs._webRequest._url + '&nocache=' + new Date().getMilliseconds();
我在博客上写过这个:http://yoavniran.wordpress.com/2010/04/27/ie-caching-ajax-results-how-to-fix/
刚刚写了一篇关于这个确切问题的博客,只使用 ExtJS (http://thecodeabode.blogspot.com/2010/10/cache-busting-ajax-requests-in-ie.html)
问题是当我使用特定的 url 重写格式时,我不能使用常规的查询字符串参数 (?param=value),所以我将缓存破坏参数写为发布的变量......我本来以为使用 POST 变量比 GET 更安全,因为很多 MVC 框架都使用该模式
协议://主机/控制器/动作/param1/param2
所以变量名到值的映射丢失了,参数被简单地堆叠了......所以当使用 GET 缓存破坏者参数时
即协议://主机/控制器/动作/param1/param2/no_cache122300201
no_cache122300201 可能被误认为是一个可能具有默认值的 $param3 参数
IE
公共函数操作($param1, $param2, $param3 = "默认值") { //..// }
POSTED 缓存破坏者不会发生这种情况
如果您使用的是 ASP.NET MVC,只需在控制器操作的顶部添加这一行:
[OutputCache(NoStore=true, Duration = 0, VaryByParam = "None")]
public ActionResult getSomething()
{
}
IE 有权进行此缓存;为确保项目不被缓存,应相应地设置标题。
如果你使用的是 ASP.NET MVC,你可以写一个 ActionFilter
;在 OnResultExecuted
中,检查 filterContext.HttpContext.Request.IsAjaxRequest()
。如果是这样,请设置响应的过期标头:filterContext.HttpContext.Response.Expires = -1;
根据 http://www.dashbay.com/2011/05/internet-explorer-caches-ajax/:
有些人更喜欢使用 Cache - Control: no - 缓存头而不是 expires。区别如下: Cache-Control:no-cache – 绝对没有缓存 Expires:-1 – 浏览器“通常”通过条件 If-Modified-Since 请求联系 Web 服务器以更新该页面。但是,该页面仍保留在磁盘缓存中,并在不联系远程 Web 服务器的适当情况下使用,例如当使用 BACK 和 FORWARD 按钮访问导航历史或浏览器处于脱机模式时。
不定期副业成功案例分享
/
请求主页时,缓存选项不起作用。将其更改为/index.php
或任何完整的 url。或者自己添加一些假参数,例如/?f=f