jQuery Ajax GET 请求不会缓存答案

【问题标题】：jQuery Ajax GET request won't cachejQuery Ajax GET 请求不会缓存
【发布时间】：2015-01-12 08:19:13
【问题描述】：

我正在尝试使我的应用程序脱机。我提出了几个GET 请求将模块加载到应用程序中。我已将这些文件添加到我的缓存清单中，因此请求仍然有效。

function loadReportDiv(ajaxUrl) {
    $.ajax({
        type : "GET",
        cache: true,
        url : ajaxUrl,
        success : function(data) {
            console.log("REPORTS: " + ajaxUrl + "... load complete");
            $("#reports_menu_wrapper").after(data);
        },
        error : function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
}
loadReportDiv("sales_reports.html");
loadReportDiv("call_reports.html");

我在 Chrome 中运行该应用程序，并在我的设备模拟器（模拟 iPad）中将网络设置为“离线”。我用 ajax 加载的文件有自己的 .html 文件中引用的 javascript 文件。当我尝试加载 sales_reports.html 和 call_reports.html 时，chrome 无法加载文件并吐出它试图获取的 url，即：js/call_reports.js?_=1415997141636。

附加到文件路径的?_=[timestamp] 正在破坏我的应用程序，我似乎无法阻止它发生。如您所见，我将 ajax 请求的缓存模式设置为 true 以防止这种行为。

编辑：

我使用的 jQuery 版本是 1.11.1。

我曾尝试在 vanilla javascript 中编写 ajax 请求，但遇到了同样的问题。

function loadReportDiv(ajaxUrl) {
  var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        console.log("REPORTS: " + ajaxUrl + "... load complete");
        $("#reports_menu_wrapper").after(xmlhttp.responseText);
    }
  }
  xmlhttp.open("GET", ajaxUrl);
  xmlhttp.send();       
}

在我的 jQuery 文件中的第 9631 行抛出了错误： // 发送请求 // 这可能会引发一个异常，实际上是 // 在 jQuery.ajax 中处理（所以这里没有 try/catch） xhr.send( ( options.hasContent && options.data ) || null );

但它仍然在请求 url 上附加时间戳。

再次感谢任何帮助！谢谢。

【问题讨论】：

您的代码是否托管在服务器上并且服务器设置为更新时间戳？
它在服务器上。我不知道我必须更改什么设置来防止这种情况。为了使这个应用程序离线，我在服务器端所做的只是将 .appcache 的 MIME 类型添加到我的 .htaccess 中。
@NabilKadimi 时间戳只能加上cache: false。
您的设备模拟器中的选项不是禁用缓存外部脚本吗？
有一个选项可以在开发工具打开时禁用缓存。我目前已关闭该设置，因为我确实想缓存此信息。

标签： javascript jquery ajax caching

【解决方案1】：

我终于明白了！

我的应用程序中有一堆 .js 库，我猜想其中一个会强制 ajax 请求不被缓存。我已将此添加到我的 index.html 文件中以应对这种情况。

    <script>
        $(function(){
            $.ajaxSetup({
                cache: true
            });
        });
    </script>

现在一切正常！

【讨论】：