Question

我有一个从不同的php文件中获取sql查询的js和显示js变量的html。

截至目前，它已经工作了一段时间，但由于js在获取数据时缓存每个php页面，最终会使浏览器崩溃，因此会慢慢超载我的浏览器。

我有几个问题：A）如何禁用2个php页面的“旧”集的缓存... B）有更好的方法吗？

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

Answer 1

该问题与浏览器中的页面缓存无关。它与您的Ajax调用有关的瀑布效果。

问题来自于您在Ajax调用的回调中调用setTimeout('refreshdiv()', seconds * 1000);这一事实。

每次调用refreshdiv时，都会进行两次setTimeout调用。每次拨打电话时，你都会打两个电话然后加起来。最终你正在进行大量的Ajax调用。在视觉上它是这样的：

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

你怎么解决？检查您是否有活动计时器，如果您没有活动计时器，请进行设置。

更改

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

就像是

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

还有其他解决方案，但这个解决方案很容易实现。

Answer 2

虽然您可以（并且正在）使用cache-buster查询字符串，但最好修改服务器端代码以发出适当的缓存到期标头，例如。

<?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.

然后，您每次只需使用SAME网址，浏览器自己的缓存机制将负责清除陈旧数据。

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

2 个答案: