Disable caching of php with .js script

Question

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);
    };

I tend to go for a framework like jQuery now when it comes to these type of requests. Simplifies the cross-browser side of things massively. Just going to unflag this as MySQL though, as this is nothing to do with MySQL :) — Simon at The Access Group
– Simon at The Access Group, Commented Jun 11, 2013 at 16:52
@Simonatmso.net Well the OP found a way to load test the MySQL instance. ;) — epascarello
– epascarello, Commented Jun 11, 2013 at 17:17
epascarello I think more likely to load test the clients browser :D @PeeHaa埽 this has been my first response to a JS issue afaik, and I said "a framework like jQuery" as there are various others available. Then again I prefer to not reinvent the wheel when there are plenty of efficient options available. OP asked if there was a better way to do this, and IMO using a framework would be a simpler way to do this and ensure compatibility cross-browser. jQuery just happens to be the one I favour at present. — Simon at The Access Group
– Simon at The Access Group, Commented Jun 11, 2013 at 17:22
@Simonatmso.net jquery is not the answer to life. Stop telling people it is. — PeeHaa
– PeeHaa, Commented Jun 11, 2013 at 17:22

epascarello · Accepted Answer · 2013-06-11 17:09:56Z

3

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.

edited Jun 11, 2013 at 17:09

answered Jun 11, 2013 at 16:56

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dgall Over a year ago

Should both occurrences of the setTimeout in the code be changed to reflect this?

epascarello Over a year ago

The onload one does not matter, it is just the one in the Ajax readystatechange.

dgall Over a year ago

It still seems to be snowballing with that code fix... not sure what I'm missing.

epascarello Over a year ago

You should also be using xmlHttp.open("GET", nocacheurl, true); there is no need for a sync request

Marc B · Accepted Answer · 2013-06-11 16:58:35Z

0

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.

answered Jun 11, 2013 at 16:58

Marc B

362k44 gold badges433 silver badges508 bronze badges

Collectives™ on Stack Overflow

Disable caching of php with .js script

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related