How to tell if an XMLHTTPRequest hit the browser cache

Question

If it possible to tell (within javascript execution) if a GET XMLHTTPRequest hit the browser cache instead of getting its response from the server?

Answer 1

This answer is based on the assumption that you mean browser only cache, with no 304's taking place (modified-since, etag etc).

Check how long the request took - if it was resolved from cache then it should take close to 0ms.

Answer 2

From http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/

For 304 Not Modified responses that are a result of a user agent generated conditional request the user agent must act as if the server gave a 200 OK response with the appropriate content. The user agent must allow author request headers to override automatic cache validation (e.g. If-None-Match or If-Modified-Since), in which case 304 Not Modified responses must be passed through. [HTTP]

I find this rather vague. My assumption would be if a resource is conditionally requested, you would see the 304 response code. But, as I explained in another comment (source: https://developers.google.com/speed/docs/best-practices/caching), there might not even be a request if the last response server http header for that resource had set Cache-Control: max-age or Expires set sometime in the future. In this case, I'm not sure what ought to happen.

Answer 3

Do you use Firefox's Firebug?

Firebug has a "Net" panel with an "XHR" filtered view. You should be able to inspect the cache info via the request phase bar, checking the status and/or clicking the triangle to inspect "Headers".

Cached or not cached

Not all network requests are equal - some of them are loaded from the browser cache instead of the network. Firebug provides status codes for every request so you can quickly scan and see how effectively your site is using the cache to optimize page load times.

Firebug Net Panel docs are here.

Chrome/Safari/Opera all have similar debugging tools. Just found a good list here (most should have tools to inspect XHR).

---

EDIT:

In order to somewhat redeem myself...

As ibu has answered, I'd also start by checking the status code of the response.

If you're using jQuery:

statusCode(added 1.5) Map Default: {} A map of numeric HTTP codes and functions to be called when the response has the corresponding code. For example, the following will alert when the response status is a 404:

$.ajax({
  statusCode: {
    404: function() {
      alert("page not found");
    }
  }
});

If the request is successful, the status code functions take the same parameters as the success callback; if it results in an error, they take the same parameters as the error callback.

jQuery sure does make life easy. :)

Answer 4

When making an ajax request, You get the response code

if (request.readyState == 4) {
     if (request.status == 200) { // this number.
       ...

status 200 means you are getting a fresh copy of the data:

The request has succeeded. The information returned with the response is dependent on the method used in the request -

status 304 means the data has not changed and you will get it from the browser cache:

If the client has performed a conditional GET request and access is allowed, but the document has not been modified, the server SHOULD respond with this status code.

Read more on Status Code

Update:
You can add a cache buster to your URL to guarantee that you always hit the server:

var ajaxUrl = "/path?cache="+(Math.random()*1000000);

Answer 5

From the XMLHttpRequest spec:

For 304 Not Modified responses that are a result of a user agent generated conditional request the user agent must act as if the server gave a 200 OK response with the appropriate content.

In other words, the browser will always give status code 200 OK, even for requests that hit the browser cache.

However, the spec also says:

The user agent must allow author request headers to override automatic cache validation (e.g. If-None-Match or If-Modified-Since), in which case 304 Not Modified responses must be passed through.

So, there is a workaround to make the 304 Not Modified responses visible to your JavaScript code.