AJAX XML - 更新新的实时数据并防止返回旧的 cache 数据 - Javascript

在 Web 应用中，经常需要实时更新数据。这时候 AJAX 技术就可以派上用场了。本文将介绍如何使用 AJAX 获取 XML 数据，并防止返回旧的 cache 数据。

AJAX 获取 XML 数据

要获取 XML 数据，我们可以使用 XMLHttpRequest 对象。下面是一个简单的示例：

var xmlHttp;
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var xmlDoc = xmlHttp.responseXML;
        // 处理 XML 数据
    }
}
xmlHttp.open("GET", "data.xml", true);
xmlHttp.send();

在这个例子中，我们创建了一个 XMLHttpRequest 对象，指定了 onreadystatechange 回调函数，用于处理获取到的数据。当 readyState 为 4（已完成）且 status 为 200（成功）时，说明获取到了数据。我们可以通过 responseXML 属性获取到 XML 数据。

防止返回旧的 cache 数据

为了提高网页性能，浏览器往往会缓存静态资源和 AJAX 请求的结果。但是，如果服务器的数据已经更新，缓存的数据就变得过时了。为了防止这种情况，我们可以在 AJAX 请求时添加一个随机数参数，强制浏览器从服务器获取最新数据。

var xmlHttp;
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var xmlDoc = xmlHttp.responseXML;
        // 处理 XML 数据
    }
}
var url = "data.xml";
url += "?_=" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.send();

我们在 URL 后面添加了一个 _ 参数，赋值为当前时间戳，这样每次请求的 URL 都不同，浏览器就会强制从服务器获取最新数据。

结语

本文介绍了如何使用 AJAX 获取 XML 数据，并防止返回旧的 cache 数据。如果你需要更新实时数据，可以尝试一下这种方法。