如何防止 IE 缓存导致重复的 Ajax 请求？答案

【问题标题】：How can I prevent IE Caching from causing duplicate Ajax requests?如何防止 IE 缓存导致重复的 Ajax 请求？
【发布时间】：2009-06-05 15:10:42
【问题描述】：

我们使用带有JsonP机制的Dynamic Script Tag来实现跨域Ajax调用。前端小部件非常简单。它只是调用一个搜索网络服务，传递用户提供的搜索条件并接收并动态呈现结果。

注意 - 对于那些不熟悉使用 JsonP 方法对返回 Json 格式数据的服务执行类似 Ajax 的请求的动态脚本标记的人，我可以解释如何使用它，如果您认为这可能与问题有关。

该服务是托管在 IIS 上的 WCF。它是 Restful，所以当用户点击搜索时，我们做的第一件事就是生成一个包含条件的 Url。看起来是这样的……

https://.../service.svc?criteria=john+smith

然后我们使用一个动态创建的 Html 脚本标签，并将源属性设置为上述 Url 来向我们的服务发出请求。返回结果，我们对其进行处理以显示结果。

这一切都很好，但我们注意到，当使用 IE 时，服务会收到来自客户端的请求两次。我使用 Fiddler 来监控离开浏览器的流量，果然我看到了两个带有以下 url 的请求......

请求 1：https://.../service.svc?criteria=john+smith
请求 2：https://.../service.svc?criteria=john+smith&_=123456789

第二个请求附加了某种 ID。每个请求的这个 ID 都是不同的。

我的直接想法是它与缓存有关。在 url 的末尾添加一个随机数是禁用浏览器缓存的经典方法之一。为了证明这一点，我调整了 IE 中的缓存设置。

我将“检查存储页面的较新版本”设置为“从不”——这导致每次只发出一个请求。末尾有随机数的那个。
我将此设置值设置回默认的“自动”，然后立即开始再次发送两次请求。

有趣的是，我在客户端上没有收到这两个请求。我发现这个reference 有人暗示这可能是 IE 的错误。我在 Firefox 上不会发生这种情况的事实支持了这一理论。

谁能确认这是否是 IE 的错误？这可能是设计使然。
有谁知道我可以阻止它发生的方法吗？

我的用户将运行的一些更模糊的搜索占用了足够的处理资源，因此将任何内容加倍是一个非常糟糕的主意。如果可能的话，我真的很想避免这种情况:-)

【问题讨论】：

标签： ajax web-services internet-explorer caching scripting

【解决方案1】：

我刚刚写了一篇关于如何avoid caching of ajax requests :-)

它基本上涉及向任何传入的 ajax 请求添加无缓存标头

public abstract class MyWebApplication : HttpApplication
{
    protected MyWebApplication()
    {
        this.BeginRequest += new EventHandler(MyWebApplication_BeginRequest);
    }

    void MyWebApplication_BeginRequest(object sender, EventArgs e)
    {
        string requestedWith = this.Request.Headers["x-requested-with"];
        if (!string.IsNullOrEmpty(requestedWith) && requestedWith.Equals(”XMLHttpRequest”, StringComparison.InvariantCultureIgnoreCase))
        {
            this.Response.Expires = 0;
            this.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
            this.Response.AddHeader(”pragma”, “no-cache”);
            this.Response.AddHeader(”cache-control”, “private”);
            this.Response.CacheControl = “no-cache”;
        }
    }
}

【讨论】：

看起来对我来说是一个非常好的开始，朝着正确的方向发展。如果事实证明有帮助，我会尽快接受。感谢您的快速回复！

【解决方案2】：

我最终确定了重复请求的原因。正如我所说，我选择用于进行 Ajax 调用的机制是动态脚本标记。我构建了请求 Url，创建了一个新的 Script 元素并将 Url 分配给 src 属性...

var script = document.createElement(“script”);
script.src = https://....”;

然后通过将脚本附加到文档头来执行脚本。至关重要的是，我使用的是 JQuery append 函数...

$(“head”).append(script);

在附加函数中，JQuery 预计我正在尝试进行 Ajax 调用。如果要附加的元素类型是脚本，则它会执行一个特殊的例程，该例程使用XmlHttpRequest 对象发出 Ajax 请求。但是该脚本仍被附加到文档头部，并由浏览器在那里执行。因此双重请求。

第一个直接来自脚本 - 我打算发生的那个。
第二个来自 JQuery append 函数内部。这是以“&_=123456789”形式随机生成的查询字符串参数后缀的请求。

我通过防止 JQuery 库副作用来简化事情。我用的是原生的追加功能……

document.getElementByTagName(“head”).appendChild(script);

一个请求现在以我想要的方式发生。我不知道 JQuery append 函数会内置如此显着的副作用。

【讨论】：

【解决方案3】：

有关进一步讨论，请参见 www.enhanceie.com/redir/?id=httpperf。

【讨论】：