ajax 来自缓存【示例代码】

Ajax（Asynchronous JavaScript and XML）是一种用于在网页上进行异步数据交互的技术。它可以在不刷新整个页面的情况下，通过向服务器发送请求并接收响应来更新部分页面内容。其中一个常见的应用场景是从缓存中获取数据。

在使用Ajax从缓存中获取数据时，我们可以设置请求头中的"Cache-Control"字段来指定缓存策略。常见的缓存策略有两种：强缓存和协商缓存。

强缓存是通过设置响应头中的"Cache-Control"字段来实现的。当浏览器发起请求时，如果缓存有效，服务器会返回一个状态码为200的响应，并在响应头中设置"Cache-Control"字段为"max-age"，表示缓存的有效时间。如果缓存过期，服务器将返回最新的数据，并在响应头中设置"Cache-Control"字段为"no-cache"，表示缓存已经过期，需要重新验证。

示例代码如下所示：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);
xhr.setRequestHeader('Cache-Control', 'max-age=3600'); // 设置缓存有效时间为1小时
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = xhr.responseText;
    // 处理获取到的数据
  }
};
xhr.send();

协商缓存是通过设置响应头中的"Last-Modified"和"If-Modified-Since"字段来实现的。当浏览器发起请求时，如果缓存有效，服务器会返回一个状态码为304的响应，表示缓存未过期。如果缓存过期，服务器将返回最新的数据，并在响应头中设置"Last-Modified"字段为最新数据的修改时间。下次浏览器发起请求时，会在请求头中添加"If-Modified-Since"字段，该字段的值为上次获取到的数据的修改时间。服务器会根据这个值来判断缓存是否有效。

示例代码如下所示：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);
xhr.setRequestHeader('If-Modified-Since', 'Mon, 01 Jan 2022 00:00:00 GMT'); // 上次获取到的数据的修改时间
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 304) {
      // 缓存有效，不需要重新获取数据
    } else if (xhr.status === 200) {
      var data = xhr.responseText;
      // 处理获取到的最新数据
    }
  }
};
xhr.send();

通过设置合适的缓存策略，可以减少不必要的网络请求，提高网页加载速度和用户体验。