如何仅刷新ASP经#include virtual引入的header.asp片段而非整页？

首先需要明确你当前使用的SSI（服务器端包含）的工作机制：<!--#include virtual="header.asp" -->是服务器在处理产品页请求时，就提前把header.asp执行完成，将生成的购物车模块HTML直接嵌入到产品页的完整响应里返回给浏览器。浏览器拿到的是已经合并完成的整页HTML，本身没有“header是独立片段”的概念，所以用window.location.reload(true)必然会触发整页重新加载。
要实现仅刷新header对应的购物车区域，核心思路是把原本服务端一次性嵌入的内容，改成前端异步单独拉取header.asp的最新输出，再局部替换DOM内容，不触碰产品页其他部分。

• 给header模块加可定位的容器
  在原来写include代码的位置，外层包一个带唯一id的div，用来标记后续要替换内容的范围：

  <!-- 包裹header模块的独立容器 -->
  <div id="shop-cart-header">
    <!--#include virtual="header.asp" -->
  </div>
  

• 编写按钮触发的局部刷新逻辑
  用原生JavaScript实现按钮点击后异步拉取header内容，兼容大部分常见浏览器环境：

  // 给刷新按钮绑定点击事件
  document.querySelector('#refresh-cart-btn').addEventListener('click', () => {
    const cartContainer = document.getElementById('shop-cart-header');
    // 拉取header.asp的最新输出，加时间戳避免浏览器缓存旧内容
    fetch(`/header.asp?refresh_time=${Date.now()}`)
      .then(res => res.text())
      .then(newContent => {
        // 仅替换容器内的内容，不影响产品页其他区域
        cartContainer.innerHTML = newContent;
      })
      .catch(() => {
        alert('购物车信息刷新失败，请检查网络后重试');
      })
  });
  

• 配置刷新按钮
  在页面任意需要触发刷新的位置放对应id的按钮即可：

  <button id="refresh-cart-btn">刷新购物车</button>
  

• 路径匹配：异步拉取header.asp的路径必须和原来SSI定义的虚拟路径完全一致，比如原来的include路径是virtual="/common/header.asp"，fetch里的请求路径也要对应改成/common/header.asp?refresh_time=xxx，否则会出现404无法加载的问题。
• 缓存处理：如果不附加时间戳参数，浏览器可能会直接读取本地缓存的旧header内容，导致看起来“刷新没生效”。
• 老旧浏览器兼容：如果需要兼容IE10及以下的老旧环境，fetch无法正常工作，可以替换为原生XMLHttpRequest实现异步请求，核心逻辑完全一致：单独向header.asp发起请求，拿到返回的HTML字符串后替换对应容器的内容即可。
• 体验优化：可以在发起请求的过程中，临时把容器内容替换为“正在加载最新购物车信息...”，等拉取完成后再替换成正式内容，避免用户等待时无反馈。

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