如何用JavaScript在HTTP响应及页面重定向后显示消息？

一、监听页面及请求的HTTP响应状态 #

浏览器出于安全限制，无法直接监听所有系统级的HTTP响应，但可以通过以下两种方式覆盖大部分场景：

1. 监听页面自身的加载响应状态 #

页面加载完成后，可通过performance API获取当前页面的响应状态码，判断加载结果：

// 页面DOM加载完成后执行
window.addEventListener('DOMContentLoaded', () => {
  // 获取导航性能条目
  const navEntry = performance.getEntriesByType('navigation')[0];
  if (!navEntry) return;

  const statusCode = navEntry.responseStatus;
  // 显示响应消息
  showResponseMessage(`页面响应状态：${statusCode}`);

  // 针对不同状态码编写自定义处理逻辑
  switch(statusCode) {
    case 200:
      console.log('页面加载成功');
      break;
    case 301:
    case 302:
      console.log('页面来自服务器端重定向');
      break;
    case 404:
      showResponseMessage('提醒：当前页面不存在');
      break;
    // 可扩展更多状态码处理
  }
});

// 通用消息显示函数
function showResponseMessage(msg) {
  const msgElement = document.createElement('div');
  msgElement.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    background: #e8f4f8;
    border-left: 4px solid #2196F3;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 9999;
  `;
  msgElement.textContent = msg;
  document.body.appendChild(msgElement);

  // 3秒后自动移除消息
  setTimeout(() => msgElement.remove(), 3000);
}

2. 监听页面内AJAX/Fetch请求的响应 #

如果需要监听页面中发起的所有异步请求（比如接口调用），可以通过重写原生的XMLHttpRequest和fetch方法来拦截响应：

// 拦截所有XMLHttpRequest请求
const originalXHRsend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
  this.addEventListener('load', () => {
    const status = this.status;
    showResponseMessage(`AJAX请求响应：${status}`);
    handleRequestStatus(status);
  });
  originalXHRsend.apply(this, arguments);
};

// 拦截所有Fetch请求
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  const response = await originalFetch(...args);
  const status = response.status;
  showResponseMessage(`Fetch请求响应：${status}`);
  handleRequestStatus(status);
  return response;
};

// 通用请求状态处理函数
function handleRequestStatus(status) {
  if (status >= 300 && status < 400) {
    console.log('请求触发重定向');
  } else if (status >= 400) {
    console.log('请求返回错误');
  }
}

二、重定向后显示消息 #

1. 服务器端重定向（301/302等状态码） #

服务器端重定向后，浏览器会自动跳转到目标页面，可通过performance API判断是否来自重定向：

window.addEventListener('load', () => {
  const navEntry = performance.getEntriesByType('navigation')[0];
  // 判断是否为重定向导航
  if (navEntry?.type === 'redirect') {
    showResponseMessage('页面刚完成服务器端重定向');
  }
});

2. 客户端重定向（window.location等方式） #

客户端主动跳转时，可通过sessionStorage存储标记，在目标页面读取并显示消息：

跳转页面的代码：

function redirectToTarget(url) {
  // 存储重定向标记
  sessionStorage.setItem('isRedirected', 'true');
  window.location.href = url;
}

目标页面的代码：

window.addEventListener('DOMContentLoaded', () => {
  const isRedirected = sessionStorage.getItem('isRedirected');
  if (isRedirected) {
    showResponseMessage('页面刚完成客户端重定向');
    // 移除标记，避免刷新后重复显示
    sessionStorage.removeItem('isRedirected');
  }
});

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