原生ajax缓存—示例代码

原生Ajax缓存是一种在前端开发中常用的技术，它可以提高网页的加载速度和用户体验。当我们使用Ajax来请求数据时，默认情况下，浏览器会对请求的结果进行缓存，以便在下次请求相同的数据时，可以直接从缓存中获取，而不需要再次向服务器发送请求。

为了控制Ajax缓存，我们可以在发送Ajax请求时，通过设置请求头的方式告诉浏览器是否需要缓存数据。可以使用XMLHttpRequest对象的setRequestHeader方法来设置请求头，其中的"Cache-Control"和"Pragma"字段用于控制缓存行为。

下面是一个示例代码，演示了如何使用原生Ajax缓存：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理请求成功的响应数据
    console.log(xhr.responseText);
  }
};
xhr.open("GET", "http://example.com/api/data", true);
xhr.setRequestHeader("Cache-Control", "no-cache"); // 禁用缓存
xhr.setRequestHeader("Pragma", "no-cache"); // 禁用缓存
xhr.send();

在上面的代码中，我们首先创建了一个XMLHttpRequest对象，并通过onreadystatechange事件监听其状态变化。当请求的readyState为4（表示请求已完成）且status为200（表示请求成功）时，我们可以处理请求成功的响应数据。

在发送Ajax请求之前，我们使用xhr.open方法设置请求的方法（GET）、URL（http://example.com/api/data）和是否异步（true）。

然后，我们使用xhr.setRequestHeader方法设置了两个请求头字段："Cache-Control"和"Pragma"，将它们的值分别设置为"no-cache"，以禁用缓存。这样，浏览器就会在每次请求时都向服务器发送请求，而不会使用缓存的数据。

我们通过xhr.send方法发送Ajax请求。

通过以上代码，我们可以在Ajax请求中禁用缓存，确保每次请求都从服务器获取最新的数据，提高网页的实时性和用户体验。