javascript - Prevent browser from caching AJAX requests

Question

I've setup an app and it works fantastic on Opera and Firefox, but on Google Chrome it caches the AJAX request and will give stale data!

http://gapps.qk.com.au is the app. When ran in Chrome it doesn't even send the AJAX requests, but when tried in another browser it always does the AJAX request and returns data.

Is there any method (Apache/PHP/HTML/JS) to stop Chrome from doing this behavior?

The AJAX call:

function sendAjax(action,domain,idelement) {

                    //Create the variables
                var xmlhttp,
                    tmp,
                    params = "action=" + action
                             + "&domain=" + encodeURIComponent(domain)

                    xmlhttp = new XMLHttpRequest(); 
                //Check to see if AJAX request has been sent
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        $('#'+idelement).html(xmlhttp.responseText);
                    }
                };
                xmlhttp.open("GET", "ajax.php?"+params, true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                //console.log(params);
                xmlhttp.send(params);

            }
sendAjax('gapps','example.com','gapps');

Answer 1

The browser cache behaves differently on different settings. You should not depend on user settings or the user's browser. It's possible to make the browser ignore headers also.

There are two ways to prevent caching.

--> Change AJAX request to POST. Browsers don't cache POST requests.

--> Better Way & good way: add an additional parameter to your request with either the current time stamp or any other unique number.

params = "action=" + action 
         + "&domain=" + encodeURIComponent(domain) 
         + "&preventCache="+new Date();