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

Question

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

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

该服务托管在IIS上的WCF中。因此，当用户单击搜索时，我们首先生成一个包含条件的Url。它看起来像这样...

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

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

这一切都很好，但我们注意到在使用IE时，服务从客户端接收到请求两次。我使用Fiddler监视离开浏览器的流量，确实看到了两个请求，其URL如下...

• 第一个请求: https://.../service.svc?criteria=john+smith
• 第二个请求: https://.../service.svc?criteria=john+smith&_=123456789

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

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

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

• 我将此设置值恢复为“自动”，请求立即再次发送两次。

有趣的是，客户端上我没有收到两个请求。我在参考中找到了这篇文章，其中有人建议这可能是IE的一个bug。Firefox上没有这种情况支持了这个理论。

1. 有人能确认这是否是IE的一个bug吗？这可能是设计问题。
2. 有人知道我可以停止它发生的方法吗？

我的一些用户进行的更模糊的搜索需要足够的处理资源来使任何重复都成为非常糟糕的想法。如果可能的话，我真的想避免这种情况 :-)

- Andy McCluggage

Answer 1

我刚刚写了一篇关于如何避免ajax请求被缓存的文章 :-)

基本上，它涉及到给任何进来的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”;
        }
    }
}

- Joel Martinez

---

看起来对我来说是一个非常好的正确方向的开始。如果它能帮助我，我很快就会接受。感谢您的快速回复！ - Andy McCluggage

Answer 2

我最终确定了这些重复请求的原因。就像我之前所说的一样，我选择使用动态脚本标签来进行Ajax调用。我建立请求URL，创建一个新的Script元素，并将URL赋值给src属性...

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

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

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

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

1. 第一个请求来自脚本——这是我的本意。
2. 第二个请求来自JQuery的append函数。这是带有以“&_=123456789”形式生成的随机查询字符串参数的请求。

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

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

现在一个请求按照我预期的方式进行。我不知道JQuery的append函数可能具有如此重要的副作用。

- Andy McCluggage

Answer 3

请参见www.enhanceie.com/redir/?id=httpperf以获取更多讨论。

- EricLaw