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.

For example:

options.cache=false;

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:

var options={};
options.url="process.php";
options.method="get";
options.cache=false;
options.ifModified=true;

$.ajax(options).then(
 function(data){
 alert(data);
});

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:

var options={};
options.url="mydata.txt";
options.method="get";
options.cache=false;
options.ifModified=true;


$.ajax(options).then(
 function(data){
  console.log(data);
});

window.setTimeout(
 function(){
  $.ajax(options).then(
    function(data){
      console.log(data);
    })
  },5000);

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:

• data

  The data sent to the server - it can be an general Object, String or Array.
  If it is a string it has to be in query string format.
  If it is an object or an array it has to be convertible into query string format. That is the object or array have to be regarded as key value pairs.
  For a Get request it is added to the URL as a query string and for a Post request it is sent in the body of the request. 

• contentType

  This option sets the value of the Content-Type header sent with the request. This informs the server how the content of should be interpreted. Notice that this only works with a Post (or a Put) request as the content type of a Get is always the default application/x-www-form-urlencoded; charset=UTF-8. Notice also that you cannot change the character encoding as it is part of the Ajax standard. Sending a header doesn't mean that the server will do anything very different - see later for more information.

• traditional

  By default this is false and it enables recursive encoding of complex data. Set to true to fall back to the original non-recursive scheme. 

• processData

  If set to false it stops jQuery processing any of the data. In other words if processData is false jQuery simply sends whatever you specify as data in an Ajax request without any attempt to modify it by encoding as a query string.  - this is a rarely use but useful facility and is described in more detail in the next section.