|Getting Started With jQuery - Advanced Ajax|
|Written by Ian Elliot|
|Thursday, 04 November 2021|
Page 2 of 5
Only getting new data
Sooner or later you will fall foul of cached results.
The standard waste of time is that you send some data to the server using Post and retrieve it using Get. The first time you do this it seems to work but later on any changes you make to the data aren't reflected in the data you get back from Get.
The reason for this is that by default Post doesn't cache data but Get does.
Put simply if you request the same URL more than once using Get then the browser will cache the first request and use this for the data for all subsequent requests.
One possible solution is to use a different URL for all Get operations by adding something unique to the end of the query string but it is simpler to set cache to false and get jQuery to do the job for you. If cache is set to false then jQuery will add a query string "_=timestamp" to Get and Put requests - of course Post never uses cached data.
Related to caching is ifModified. If this is set to true then the Ajax call only works if the response has changed since the last request. It basically checks the time in the Last-Modified header to the time of the last request. Notice that this first retrieves just the headers of the HTTP request needed for the resource and so this can save downloading something that hasn't changed. However making this work consistently is a matter of dealing with different browser and server behaviour.
So to make sure you get the latest version of the data and only fetch the data if it has been updated since the last fetch you would use:
If the file hasn't been updated since the last request then the then method will be called but data will be undefined.
Only use ifModified if the resource requested is big because trying to save downloads usually causes trouble for some browsers and it also depends on the headers that the server includes.
For example if you try:
then what you will see depends mostly on the server. Most servers will send a Last-Modified header and the second Ajax request for the static file will fail because it hasn't been modified in the 5 second interval. In this case then will still be called but you will see undefined displayed i.e. the data isn't retrieved.
However if you try it with say the built in PHP server you will find that you get the static file twice because it doesn't send the header and so each Ajax request transfers the file.
Notice that setting cache=true doesn't change the result the request still usually fails if the Last-Modified header indicates that there has been no change to the file. The problem is that some older browsers load the data from the cache even if the data hasn't changed.
There are many other problems, far too many to deal with in this chapter, in trying to avoid resources being reloaded unnecessarily for example an Ajax request will generally be remade after a page load even if the resource is still in the cache.
Data sent to the server
As we already know both Get and Post send data to the server and receive data from the server. There are options to control the data in both directions - let's look at the "to the server" direction first and look at the client direction in the next chapter.
When you make an Ajax request you can specify the following options to control the data sent to the server:
|Last Updated ( Thursday, 05 May 2022 )|