CODEWITHSUNDEEP
phpjavascript
dgall
dgall

Reputation: 53

Disable caching of php with .js script

I have a js that fetches sql queries from different php files and html that displays the js vars.

As of now it works for a while, but will slowly overload my browser due to the js caching each of the php pages as it fetches data, eventually crashing a browser.

I have a couple questions about this: A) How would I disable the caching of the "old" set of the 2 php pages... B) Is there a better way to to this? 

var seconds = 3;
var divs = new Array("div1", "div2");
var urls = new Array("jaxcount.php", "jaxcount2.php");

    // Refresh DIV
    function refreshdiv() {
        for (var i = 0; i < 2; i++) {
            var div = divs[i];
            var url = urls[i];
            dorefresh(div, url);
            break;
        }
    }

    function dorefresh(div, url){
        // Stolen XMLHTTP Request Object

        var xmlHttp;
        try {
            xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Exploder
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    return false;
                }
            }
        }

        // IE Optimizations

        fetch_unix_timestamp = function () {
            return parseInt(new Date().getTime().toString().substring(0, 10));
        };

        var timestamp = fetch_unix_timestamp();
        var nocacheurl = url + "?t=" + timestamp;

        // The Beef

        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState === 4) {
                document.getElementById(div).innerHTML = xmlHttp.responseText;
                setTimeout('refreshdiv()', seconds * 1000);
            }
        };
        xmlHttp.open("GET", nocacheurl, false);
        xmlHttp.send(null);
    }

    // Trigger Refresh

    var seconds;
    window.onload = function startrefresh() {
        setTimeout('refreshdiv()', seconds * 1000);
    };

Upvotes: 0

Views: 231

Answers (2)

epascarello
epascarello

Reputation: 207557

The problem has nothing to do with caching of pages in the browser. It has to do to a waterfall effect with your Ajax calls.

The problem is coming from the fact you are calling setTimeout('refreshdiv()', seconds * 1000); inside of the callback of the Ajax call.

You are making two setTimeout calls every time you call refreshdiv. Every time it is call you make two calls and it adds up. Eventually you are making tons of Ajax calls. Visually it is something like this:

First Call      A
               / \
              /   \
Second       A     A
            / \   / \
Third      A   A A   A  
4th       AA  AA AA  AA
5th      AAAAAAAAAAAAAAAA

How can you fix it? Check to see if you have a timer active, if you do not have an active timer, set it.

Change 

setTimeout('refreshdiv()', seconds * 1000);

to be something like

if (!window.timer) {
    window.timer = setTimeout(refreshdiv, seconds * 1000);
}

There are other solutions, but this one is simple to implement.

Upvotes: 3

Marc B
Marc B

Reputation: 360872

While you can (and are) using cache-buster query strings, it'd be better to modify the server-side code to issue appropriate cache-expiry headers, e.g.

<?php
header('Cache-control: max-age=60'); // cache for 60 seconds at most
header('Expires: Tue, 11 Jun 2013 12:00:00 GMT'); // expire at a specific date/time.

Then you'd simply use the SAME url each time, and the browser's own cacheing mechanism will take care of clearing out stale data.

Upvotes: 0

Related Questions