AJAX读取XML文件部署到Linux主机后文件变更页面无更新问题求助

问题原因 #

你的问题是浏览器HTTP缓存机制导致的：本地打开文件走file://协议时浏览器不会缓存静态资源，所以运行正常；部署到Linux主机走HTTP协议后，Web服务默认给XML这类静态资源添加了缓存策略，浏览器每次请求data.xml时会直接读取本地缓存的旧版本，只有你手动刷新data.xml页面更新了本地缓存后，index.html才能拿到最新数据。

解决方案 #

方案1：添加动态查询参数破缓存（最方便，直接修改前端代码即可生效 #

给XMLHttpRequest请求地址后追加时间戳作为查询参数，让浏览器每次都认为是全新请求，不会命中旧缓存。同时建议把原有的同步请求改为异步，避免阻塞页面渲染。
修改后的foo函数代码：

function foo() {
    console.log("foo");
    var xmlhttp = new XMLHttpRequest();
    // 追加时间戳参数，同时把同步false改为异步true
    xmlhttp.open("GET", "data.xml?t=" + new Date().getTime(), true);
    xmlhttp.onload = function() {
        if (xmlhttp.status === 200) {
            var xmlDoc = xmlhttp.responseXML;
            var f1 = xmlDoc.getElementsByTagName("f1")[0].childNodes[0].nodeValue;
            document.getElementById("f1").innerHTML = f1;
        }
    };
    xmlhttp.send();
}

方案2：添加请求头禁用缓存 #

除了加动态参数之外，还可以额外添加禁用缓存的请求头，双重保证不命中缓存：

function foo() {
    console.log("foo");
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "data.xml?t=" + new Date().getTime(), true);
    // 新增禁用缓存请求头
    xmlhttp.setRequestHeader("Cache-Control", "no-cache, no-store, must-revalidate");
    xmlhttp.setRequestHeader("Pragma", "no-cache");
    xmlhttp.setRequestHeader("Expires", "0");
    xmlhttp.onload = function() {
        if (xmlhttp.status === 200) {
            var xmlDoc = xmlhttp.responseXML;
            var f1 = xmlDoc.getElementsByTagName("f1")[0].childNodes[0].nodeValue;
            document.getElementById("f1").innerHTML = f1;
        }
    };
    xmlhttp.send();
}

方案3：服务端配置缓存策略（可选，一劳永逸） #

如果你可以修改Web服务配置的话，直接给XML文件配置禁用缓存的响应头，所有访问该站点的用户都不需要走缓存，以Nginx为例，在配置文件中添加如下规则：

location ~* \.xml$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    expires -1;
}

修改后重载Nginx配置即可生效。

内容的提问来源于stack exchange，提问作者Mario