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

我们使用动态脚本标记和JsonP机制来实现跨域Ajax调用。前端小部件非常简单。它只调用搜索web服务，传递用户提供的搜索条件，并接收和动态呈现结果

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

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

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

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

• 请求1：
• 请求2：

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

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

• 我将“检查存储页面的更新版本”设置为“从不”——这导致每次只发出一个请求。末端有随机数的那个

• 我将此设置值设置回默认值“Automatic”，请求立即开始再次发送两次

有趣的是，我没有在客户端同时收到这两个请求。我发现有人认为这可能是IE的一个bug。事实上，我在Firefox上没有遇到这种情况，这支持了这一理论

有人能确认这是否是IE的错误吗？这可能是故意的

有人知道我能阻止它发生的方法吗

---

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

我刚刚写了一篇关于如何：-）

它基本上包括向传入的任何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”;
        }
    }
}

---

请参阅www.enhanceie.com/redir/？id=httpperf以了解进一步的讨论。

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

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

然后通过将脚本附加到文档头来执行脚本。关键的是，我使用的是JQuery追加函数

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

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

在append函数中，JQuery预期我正在尝试进行Ajax调用。如果要附加的元素类型是脚本，那么它将执行一个特殊例程，该例程使用

XmlHttpRequest

对象发出Ajax请求。但是脚本仍然被附加到文档头上，并在那里由浏览器执行。因此提出了双重要求

第一个直接来自于剧本——这是我想要发生的

第二个来自jqueryappend函数内部。这是以随机生成的查询字符串参数为后缀的请求，格式为“&=123456789”

我通过防止JQuery库的副作用简化了事情。我使用了本机附加函数

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

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

---

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

对我来说是一个非常好的开始。如果结果有帮助，我很快就会接受。谢谢你的快速回复！