dozc1071
2013-06-11 16:49
采纳率: 100%
浏览 61
已采纳

使用.js脚本禁用php的缓存

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);
    };
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongyao2022 2013-06-11 16:56
    已采纳

    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.

    打赏 评论
  • duandang6352 2013-06-11 16:58

    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.

    打赏 评论

相关推荐 更多相似问题