An Introduction to Ajax (with JSON) - JavaScript by Example - page 811

request for a cached page, the speed of the page load is greatly improved. When using
Ajax, on the other hand, which is all based on making HTTP requests to a server, this
can be a problem. For example, if you are using Ajax to update a table containing stock
data, and the table is to be refreshed every 4 or 5 minutes in real time, the Ajax request
will grab the cached page from the previous request, not what is wanted. The page will
not reflect the changes because the browser will load from the cache rather than by mak-
ing another request to the same URL.
The HTTP specification states that the response to a GET request is cacheable but any
responses to the POST method are not cacheable, unless the response includes appro-
priate Cache-Control or Expires header fields, meaning that a query using the POST
method will normally be resubmitted and reprocessed for every request. If using the
GET method, there are a number of techniques to ensure that a new HTTP request is
made every time a request is made. The simplest solution is to change the URL in the
Ajax open() method to trick the browser into reloading the document for what appears
to be a new page. By adding a parameter that is constantly changing in the URL, each
request will be unique and therefore, not cached. This can be accomplished by adding a
timestamp or a random number value as a parameter to the URL. The value should be
different each time, and although it will have no effect on the requested page, it makes
the browser see this as a URL that has never been visited before.
EXAMPLE (S AMPLE C ODE )
var url = "http://mydomain?myParams="+"&pseudoParam= "+
new Date().getTime();
var url = "http://mydomain?myParams=" + "&pseudoParam=" +
Math.random();
By adding a new value to the URL, the browser will refresh the page each time there
is a request for that page.
You can also add headers to the request object with the setRequestHeader() method.
Setting the “If-Modified-Since” value to a date earlier than now causes the browser to
check to see if the data has changed since that date and send a new request. As long as
the date is a past date, it doesn't matter what date you use. If these headers fail on a par-
ticular browser, use the random number or date options shown above.
EXAMPLE (S AMPLE C ODE )
ajaxRequest.setRequestHeader('If-Modified-Since', 'Sat, 03 Jan
2010 00:00:00GMT');
ajaxRequest.setRequestHeader("Cache-Control", "no-cache");