Caching in XHR is not working

Question

I am fetching blade html using XHR GET and trying to cache it so that it does not need to go to server to download it every time. Here is my code.

But this does not work and always goes to server.

$.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() {
    }
});

Controller

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

Header Info

Answer 1

It is not the fault of jQuery actually. Per the documentation:

Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters.

So, it actually forces browser to load new copy of the requested resource, by tricking it by changing the URL. So browser thinks that it is a new request, and then loads it from the server again. It doesn't actually caches the response somewhere.

Caching the responses is browser's part, and to play this role, it needs appropriate cache headers. I can see, your response doesn't contain appropriate headers as pointed out by @elegisandi in the comments. So there are two possible solutions to this problem.

Add cache headers to server response

You will have to modify the response headers, so that the browser can cache the response. This question and its answers can help you setting up that.

Manually cache the response

You can manually cache the response of the requests in a JavaScript object. But beware, you'll manually have to expire these. Here is an example of how to do this:

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();
});

The second time you fire a request to the same URL, it will actually return the response from the cache. Further, we can customise the ajaxCall function so that it checks the request method as well.