XHR中的缓存无效

Question

我正在使用XHR GET获取刀片html并尝试缓存它,以便它不需要每次都去服务器下载它.这是我的代码.

但这不起作用,总是去服务器.

$.ajax({
    method: "GET",
    url:    "{!! route('SendMessageForm') !!}",
    cache:  true,
    async:  true,
    beforeSend: function(xhr, opts) {
        $('#MessageModal').html(processingImageUrl);
    },
    success: function(result) {
        $('#MessageModal').html(result);
        PopulateActiveUsers();
    },
    error: function() {
    }
});

调节器

public function SendMessageForm() {
    return View("Chat.SendMessage");
}

标题信息

Answer 1

实际上这不是 jQuery 的错。根据文档：

设置cache为false仅适用于 HEAD 和 GET 请求。"_={timestamp}"它通过附加到 GET 参数来工作。

因此，它实际上通过更改 URL 来欺骗浏览器，强制浏览器加载所请求资源的新副本。所以浏览器认为这是一个新的请求，然后再次从服务器加载它。它实际上并不将响应缓存在某处。

缓存响应是浏览器的一部分，为了发挥这个作用，它需要适当的缓存标头。我可以看到，您的回复不包含 @elegisandi 在评论中指出的适当标头。所以这个问题有两种可能的解决方案。

将缓存标头添加到服务器响应

您必须修改响应标头，以便浏览器可以缓存响应。这个问题及其答案可以帮助您进行设置。

手动缓存响应

您可以手动将请求的响应缓存在 JavaScript 对象中。但请注意，您必须手动使这些过期。以下是如何执行此操作的示例：

var cache = {};

function ajaxCall(options) {
  if (!cache[options.url]) {
    cache[options.url] = $.ajax(options);
  }

  return cache[options.url];
}

// In your code
ajaxCall({
  method: "GET",
  url: "{!! route('SendMessageForm') !!}",
  beforeSend: function (xhr, opts) {
    $('#MessageModal').html(processingImageUrl);
  }
})
.then(function (result) {
  $('#MessageModal').html(result);
  PopulateActiveUsers();
});

第二次向同一 URL 发出请求时，它实际上会从缓存中返回响应。此外，我们可以自定义该ajaxCall函数，以便它也检查请求方法。