AJAX 兼容性 实现IE浏览器支持的AJAX方法与技巧

让AJAX在IE浏览器上跑起来：老古董的兼容指南

场景再现：
"这功能在Chrome上明明好好的，怎么到IE就挂了？！" 凌晨两点的办公室里，程序员老王盯着IE11空白页面里那个刺眼的红色报错，第8杯咖啡已经见底，如果你也曾在IE的AJAX兼容性问题上栽过跟头，这篇实战指南就是你的救星。

IE的AJAX为什么这么难搞？

IE浏览器（特别是IE9以下版本）就像个固执的老头：

• XMLHttpRequest对象不同：现代浏览器用标准XMLHttpRequest，IE6/7偏要搞个ActiveXObject("Microsoft.XMLHTTP")
• 事件监听方式奇葩：别人用onload/onerror，IE偏爱onreadystatechange
• 缓存问题严重：GET请求默认缓存，返回数据可能是昨天的"陈货"

全版本IE通吃的AJAX封装

function legacyAjax(options) {
  var xhr;
  // 1. 创建XHR对象 - 兼容IE6+
  try {
    xhr = new XMLHttpRequest(); // 标准浏览器
  } catch (e) {
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0"); // IE6+
    } catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE5后备方案
    }
  }
  // 2. 处理IE的缓存陷阱
  if (options.method === 'GET') {
    options.url += (options.url.indexOf('?') > -1 ? '&' : '?') 
      + '_=' + new Date().getTime();
  }
  // 3. 事件监听 - 既要照顾现代浏览器也要兼容IE
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        options.success && options.success(xhr.responseText);
      } else {
        options.error && options.error(xhr.status);
      }
    }
  };
  xhr.open(options.method, options.url, true);
  // 4. 设置请求头 - IE9以下需要特殊处理
  if (options.headers) {
    for (var key in options.headers) {
      xhr.setRequestHeader(key, options.headers[key]);
    }
  }
  xhr.send(options.data || null);
}
// 使用示例
legacyAjax({
  method: 'GET',
  url: '/api/data',
  success: function(response) {
    console.log('拿到数据:', response);
  },
  error: function(status) {
    console.error('请求失败，状态码:', status);
  }
});

针对IE的特别优化技巧

处理跨域问题（CORS）

IE8/9的CORS实现是个半成品：

// IE8/9需要用XDomainRequest
if (window.XDomainRequest && !options.cors) {
  var xdr = new XDomainRequest();
  xdr.open(options.method, options.url);
  xdr.onload = function() {
    options.success && options.success(xdr.responseText);
  };
  xdr.send(options.data);
  return;
}

JSON数据解析

IE7及以下没有原生JSON.parse：

// 引入JSON2.js作为备用
var data = typeof JSON !== 'undefined' 
  ? JSON.parse(response) 
  : eval('(' + response + ')'); // 注意eval的安全风险

超时处理

IE的timeout行为很诡异：

xhr.timeout = 30000; // IE8+才支持
xhr.ontimeout = function() {
  console.warn('请求超时');
};

现代项目的兼容方案

如果你的项目还在维护IE兼容：

1. 垫片(Polyfill)方案：

   • 引入es5-shim.js和es6-shim.js
   • 使用fetch的polyfill版本

2. 构建工具适配：

   

   // webpack配置示例
   module.exports = {
     target: ['web', 'es5'] // 强制转译为ES5语法
   }

3. 优雅降级提示：

   <!--[if lte IE 9]>
   <div class="ie-warning">
     您正在使用过时浏览器，部分功能可能无法正常使用
   </div>
   <![endif]-->

写在最后

2025年的今天,全球仍有约3%的企业内部系统强制使用IE（数据来源：2025年7月StatCounter统计），虽然微软早已停止支持IE，但现实中的兼容需求不会立刻消失，掌握这些技巧不是为了拥抱过去，而是为了在过渡期平稳前行。

终极建议：新项目请直接放弃IE支持，把省下的兼容时间用来喝咖啡，它不香吗？