如何用JavaScript检测源服务器是否可处理Ajax请求

现有方案的不足 #

你当前的XHR实现存在几个关键问题：

• 请求整个首页资源体积冗余，会额外消耗带宽并拖慢页面性能
• 若边缘缓存对该首页请求做了缓存，即使源服务器已宕机，仍会返回200状态码，导致检测结果完全失效
• 未处理请求超时、网络错误等异常场景，极端情况会导致检测逻辑无法执行

优化思路 #

核心是用最小开销的请求验证源服务器状态，同时规避边缘缓存干扰，覆盖异常场景：

1. 选择不被边缘缓存的轻量接口：比如WordPress自带的wp-admin/admin-ajax.php（默认不缓存），或自定义一个仅返回200状态码的空接口
2. 给请求加随机参数，彻底避免缓存（即使接口被意外缓存）
3. 使用现代的fetch API替代XHR，代码更简洁易维护
4. 配置超时时间，避免请求因源服务器宕机一直挂起
5. 利用HEAD请求替代GET，仅获取响应头，进一步降低请求开销

实现代码 #

方案1：利用WordPress自带接口 #

document.addEventListener('DOMContentLoaded', () => {
  // 生成随机参数规避缓存
  const randomParam = '?t=' + Date.now();
  const checkUrl = '/wp-admin/admin-ajax.php' + randomParam;

  fetch(checkUrl, {
    method: 'HEAD',
    mode: 'same-origin',
    signal: AbortSignal.timeout(3000) // 3秒超时
  })
  .catch(() => {
    // 请求失败（超时、源宕机、5xx错误），添加标识类
    document.body.classList.add('no-origin');
  });
});

方案2：自定义轻量检测接口 #

如果担心admin-ajax接口有额外逻辑，可在主题目录创建check-origin.php：

<?php
// 强制禁止缓存
header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");
// 仅返回200状态码
http_response_code(200);

对应的JS代码：

document.addEventListener('DOMContentLoaded', () => {
  const randomParam = '?t=' + Date.now();
  const checkUrl = '/wp-content/themes/你的主题名/check-origin.php' + randomParam;

  fetch(checkUrl, {
    method: 'HEAD',
    mode: 'same-origin',
    signal: AbortSignal.timeout(3000)
  })
  .catch(() => {
    document.body.classList.add('no-origin');
  });
});

关键注意事项 #

• 执行时机：绑定到DOMContentLoaded事件，避免阻塞页面渲染
• 缓存规避：随机参数+响应头双重保障，确保请求直接到达源服务器
• 容错处理：无需判断具体错误类型，只要请求失败就判定源服务器不可用（符合你场景下“用户能访问缓存页则网络正常”的前提）

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