0

I am using jQuery's load function to get an image (graph) from my server. The graph is received from a REST API protected with Basic Authentication. The image is in the current setup returned with header Cache-Control max-age=0. This is respected if I call the image url directly from the browser. But when using jQuery's load function, it is cached.

I don't want to get a new image every time, because it requires some heavy calculations on the server, and because the graphs shows real-time data, long time caching is unwanted. I will use max-age=30 or 60 later.

I know jQuery's ajax function has a cache option. But this option can only be set to true or false, and that's not what I'm looking for.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
swenedo
  • 3,074
  • 8
  • 30
  • 49

1 Answers1

1

The standard way to override getting a cached result is to append a random query string to the URL you're getting, as in:

$(this).attr('src', url + '?randomval=' + (new Date).getTime() );

You can then set the server headers to allow the client to cache (e.g. Cache-Control: private - or whatever is appropriate for your application), and decide in your javascript code how often you want to change the "random" value appended to your URL to force the resource to reload.

odrm
  • 5,149
  • 1
  • 18
  • 13
  • I know this is the standard "easy" way. But this is not using the max-age value. So I think there is an other smarter way to achive this. I don't want the client javascript code to do this. I don't want to rely that the clients change the "random" value. I want to control it from the server. This way I can change the max-age value place, and all client pages will use it. – swenedo Apr 12 '11 at 09:34