如何在纯JavaScript中不使用fetch()调用REST API并兼容旧浏览器？

针对旧版浏览器的Web应用，AJAX方案的选择核心是兼容性覆盖范围和开发效率，下面是具体的方案分析和建议：

1. 原生XMLHttpRequest（基础首选） #

大部分旧浏览器（IE7+、Firefox 1+、Chrome 1+）都支持标准的XMLHttpRequest，但IE6及更早版本依赖ActiveXObject实现，所以需要做简单的兼容判断：

function createXHR() {
  let xhr;
  try {
    // 标准浏览器路径
    xhr = new XMLHttpRequest();
  } catch (e) {
    // IE6及更早的兼容路径
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("当前浏览器不支持异步请求");
        return null;
      }
    }
  }
  return xhr;
}

// 使用示例
const xhr = createXHR();
if (xhr) {
  xhr.open("GET", "/api/data", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const response = xhr.responseText;
      // 处理返回数据
    }
  };
  xhr.send();
}

• 优势：无外部依赖，性能最优，完全可控请求流程；
• 劣势：需要手动处理兼容细节、状态判断、错误捕获等，代码量稍多。

2. 轻量兼容库（快速开发首选） #

如果不想手写原生兼容代码，优先选择针对旧浏览器优化的成熟库：

• jQuery 1.x：完全兼容IE6+，封装了所有AJAX细节，API简洁易用，是旧项目中最常用的方案：

// jQuery 1.x 异步请求示例
$.ajax({
  url: "/api/data",
  type: "GET",
  dataType: "json",
  success: function(res) {
    // 处理返回数据
  },
  error: function(xhr, status, err) {
    // 处理错误
  }
});

• 其他轻量库：比如zepto.js的AJAX模块，但注意zepto不支持IE8及以下，仅适合兼容IE9+的场景。

• 优势：节省兼容代码编写时间，API统一，降低出错概率；

• 劣势：需要引入额外库文件（jQuery 1.x压缩后约30KB，对旧浏览器性能影响可忽略）。

3. 极端兼容方案（仅针对IE5及更早） #

如果业务必须兼容几乎绝迹的IE5及更早版本，可以用隐藏iframe模拟异步请求的方案，通过提交表单到隐藏iframe实现无刷新请求，但实用性极低：

function iframeAjax(url, formData) {
  // 创建隐藏iframe
  const iframe = document.createElement("iframe");
  iframe.style.display = "none";
  iframe.name = "hiddenAjaxIframe";
  document.body.appendChild(iframe);

  // 创建临时表单
  const form = document.createElement("form");
  form.action = url;
  form.method = "POST";
  form.target = "hiddenAjaxIframe";

  // 添加表单数据
  for (const key in formData) {
    const input = document.createElement("input");
    input.type = "hidden";
    input.name = key;
    input.value = formData[key];
    form.appendChild(input);
  }
  document.body.appendChild(form);

  // 提交表单并监听结果
  form.submit();
  iframe.onload = function() {
    const response = iframe.contentDocument.body.innerHTML;
    // 处理返回内容
    // 清理临时元素
    document.body.removeChild(form);
    document.body.removeChild(iframe);
  };
}

• 注意：这种方案无法处理JSON等复杂数据格式，仅适合简单的文本/HTML返回场景。

总结建议 #

• 兼容目标IE7+：优先用原生XMLHttpRequest加兼容判断，或直接用jQuery 1.x；
• 必须兼容IE6：在原生XHR代码中加入ActiveObject兼容分支，或使用jQuery 1.x；
• 极端旧浏览器（IE5及以下）：仅在业务强制要求时使用隐藏iframe方案，否则不推荐。

内容的提问来源于stack exchange，提问作者26_Angel David Rivera Herrera