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 在 cmets 中指出的适当标题。所以这个问题有两种可能的解决方案。

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

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

手动缓存响应

您可以在 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 函数，以便它也检查请求方法。

Answer 2

jQuery ajax cache 选项 (http://api.jquery.com/jquery.ajax/) 只控制浏览器是否可以使用正常的缓存策略。默认为true。

要在此处实际使用缓存，服务器（您的 Laravel 应用程序）应该告诉客户端它可以缓存返回值。

现在 (Cache-Control: no-cache, private) 明确禁止客户端缓存结果。 Cache-Control 标头非常通用（请参阅 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control），但您可以例如返回值 Cache-Control: public 以告诉客户端资源是公共的并且可以始终缓存。

您可以像这样在控制器操作中执行此操作：

public function SendMessageForm() {
    return response()
               ->view("Chat.SendMessage")
               ->header('Cache-Control', 'public');
}

Answer 3

你需要改变服务器端的响应行为：

return response()
            ->view('Chat.SendMessage')
            ->header('Cache-Control', 'public, max-age=300');