Internet Explorer 7 Ajax 链接仅加载一次答案

【问题标题】：Internet Explorer 7 Ajax links only load onceInternet Explorer 7 Ajax 链接仅加载一次
【发布时间】：2008-10-28 21:24:42
【问题描述】：

我正在编写一个应用程序，并尝试将简单的 AJAX 功能绑定到其中。它在 Mozilla Firefox 中运行良好，但在 Internet Explorer 中存在一个有趣的错误：每个链接只能单击一次。浏览器必须完全重新启动，简单地重新加载页面是行不通的。我写了一个 very simple example application 来演示这一点。

Javascript 转载如下：

var xmlHttp = new XMLHttpRequest();

/*
item: the object clicked on
type: the type of action to perform (one of 'image','text' or 'blurb'
*/
function select(item,type)
{

    //Deselect the previously selected 'selected' object
    if(document.getElementById('selected')!=null)
    {
        document.getElementById('selected').id = '';
    }
    //reselect the new selcted object
    item.id = 'selected';

    //get the appropriate page
    if(type=='image')
        xmlHttp.open("GET","image.php");
    else if (type=='text')
        xmlHttp.open("GET","textbox.php");
    else if(type=='blurb')
        xmlHttp.open("GET","blurb.php");

    xmlHttp.send(null);
    xmlHttp.onreadystatechange = catchResponse;

    return false;

}
function catchResponse()
{
    if(xmlHttp.readyState == 4)
    {
        document.getElementById("page").innerHTML=xmlHttp.responseText;
    }

    return false;
}

任何帮助将不胜感激。

【问题讨论】：

标签： javascript ajax internet-explorer

【解决方案1】：

这是因为 Internet Explorer 忽略了 no-cache 指令，并缓存了 ajax 调用的结果。然后，如果下一个请求相同，它将只提供缓存版本。有一个简单的解决方法，就是在查询末尾附加随机字符串。

 xmlHttp.open("GET","blurb.php?"+Math.random();

【讨论】：

根据我的经验，添加我上面发布的所有三个标头将阻止 IE 缓存，而无需附加随机数。

【解决方案2】：

看起来 IE 正在缓存响应。如果您将调用更改为 POST 方法，或者发送适当的标头告诉 IE 不要缓存响应，它应该可以工作。

我发送以确保它不缓存的标头是：

Pragma: no-cache
Cache-Control: no-cache
Expires: Fri, 30 Oct 1998 14:19:41 GMT

请注意，到期日期可以是过去的任何时间。

【讨论】：

您究竟是如何设置这些标题的？我会使用 PHP 的 header() 函数吗？ HTML中的东西？我有点困惑。
可以，PHP header()函数可以用来添加这些
在 ColdFusion 中，您可以使用 cfheader 标签通过名称和值属性传递它们。出于某种原因，我还必须在 Cache-Control 中添加 no-store，当然在 IE 8 中即使这样也不起作用，但至少在 IE 7 和 Firefox 3 中是这样。

【解决方案3】：

问题是在调用open 之前设置响应处理程序时，IE 会做一些古怪的事情。对于第一个 xhr 请求，您没有这样做，但是由于您重用了 xhr 对象，因此在调用第二个 open 时，响应处理程序已经设置。这可能令人困惑，但解决方案很简单。为每个请求创建一个新的 xhr 对象：

移动：

var xmlHttp = new XMLHttpRequest();

在选择函数内部。

【讨论】：

谢谢，这成功了。不过应该注意的是，我必须在函数中移动事件处理程序，以便它具有读取 xmlHttpRequest 变量的范围。
仔细检查，这似乎并没有解决问题。

【解决方案4】：

阅读 [link text][1] [1] 中的 No Problems 部分：http://en.wikipedia.org/wiki/XMLHttpRequest

【讨论】：

【解决方案5】：

在 IE AJAX 案例中最适合我的响应标头是 Expires: -1，这可能不符合规范，但在 Microsoft 支持文章 (How to prevent caching in Internet Explorer) 中有所提及。这与Cache-Control: no-cache 和Pragma: no-cache 结合使用。

【讨论】：

【解决方案6】：

xmlHttp.open("GET","blurb.php?"+Math.random();

我同意这一点。它完美地解决了这个问题。问题是 IE7 对 url 的缓存很糟糕，忽略了 no-cache 标头并使用它的 url 作为键索引将资源保存到其缓存中，所以最好的解决方案是在 GET url 中添加一个随机参数。

【讨论】：

【解决方案7】：

在 jQuery.ajax 中，可以将“缓存”设置为 false：

http://api.jquery.com/jQuery.ajax/

【讨论】：

【解决方案8】：

使用 Dojo，可以使用dojo.date.stamp 来完成，只需在 url 中添加以下内容：

"...&amp;ts=" + dojo.date.stamp.toISOString(new Date())

【讨论】：