IE11中XMLHttpRequest无法正常工作，寻求替代方案

嘿，我之前也碰到过类似的情况，你的函数在Chrome、Firefox这些现代浏览器能正常跑，但IE11不行，主要是几个兼容性细节没处理到位。咱们一步步来解决：

首先，你原来的代码里有两个坑是IE11特别敏感的：一是responseType = 'json'的支持不稳定，二是GET请求里没必要加Content-type头，而且还漏了请求完成的事件监听。针对IE11，有两种靠谱的方案：

方案1：修复现有XMLHttpRequest代码，适配IE11 #

直接调整你的现有代码，就能让它在IE11里正常工作，具体修改如下：

function searchPreviousRecord(last_name, first_name, dob) {
  if (!last_name || !first_name || !dob) return;
  
  // 给参数做URL编码，避免特殊字符搞砸请求（IE11对这个特别挑剔）
  var encodedFirstName = encodeURIComponent(first_name);
  var encodedLastName = encodeURIComponent(last_name);
  var encodedDob = encodeURIComponent(usToIntlDate(dob));
  
  var url = '/wp-content/themes/sample/sync/api/search.php';
  url += `?first_name=${encodedFirstName}&last_name=${encodedLastName}&dob=${encodedDob}`;
  
  // 兼容IE的XHR创建方式（虽然IE11支持XMLHttpRequest，但加个判断更稳妥）
  var http = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  
  http.open("GET", url, true);
  // GET请求不需要设置Content-type，这个头是给POST用的，IE11会因为这个多余的头出问题
  // http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  
  // 监听请求状态变化，这步原来的代码完全漏掉了！
  http.onreadystatechange = function() {
    if (http.readyState === 4 && http.status === 200) {
      try {
        // 手动解析JSON，替代IE11支持不好的responseType='json'
        var responseData = JSON.parse(http.responseText);
        // 这里写你处理返回数据的逻辑，比如渲染到页面
        console.log('拿到数据啦:', responseData);
      } catch (parseError) {
        console.error('JSON解析失败:', parseError);
      }
    }
  };
  
  http.send();
}

几个关键的修改点：

• 用encodeURIComponent给所有参数编码，避免空格、特殊字符导致请求URL无效
• 去掉了GET请求里多余的Content-type请求头，IE11对这种不标准的设置很敏感
• 把responseType='json'换成手动JSON.parse(http.responseText)，IE11对前者的支持不稳定，经常返回null
• 补上了onreadystatechange事件监听，原来的代码只是发起了请求，但没写后续处理逻辑，现代浏览器可能靠隐式行为跑起来，但IE11完全不会处理返回的数据

方案2：用Fetch API + Polyfill（更现代的写法） #

如果你想用上更简洁的现代API，可以用Fetch，但IE11本身不支持Fetch和Promise，所以需要引入polyfill来兼容。

你只需要在页面里先引入两个polyfill脚本（直接下载到本地或者用CDN都可以）：

• es6-promise：给IE11补上Promise支持
• whatwg-fetch：让IE11支持Fetch API

然后就可以把函数改写成更简洁的Fetch风格：

function searchPreviousRecord(last_name, first_name, dob) {
  if (!last_name || !first_name || !dob) return;
  
  var params = {
    first_name: first_name,
    last_name: last_name,
    dob: usToIntlDate(dob)
  };
  
  // 手动拼接编码后的参数（因为IE11不支持URLSearchParams，除非再加个polyfill）
  var encodedParams = Object.keys(params)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join('&');
  
  var url = `/wp-content/themes/sample/sync/api/search.php?${encodedParams}`;
  
  fetch(url)
    .then(function(response) {
      if (!response.ok) {
        throw new Error(`请求出错，状态码：${response.status}`);
      }
      return response.json();
    })
    .then(function(data) {
      // 处理返回的数据
      console.log('获取到记录:', data);
    })
    .catch(function(error) {
      console.error('请求失败:', error);
    });
}

如果不想手动拼接参数，也可以给URLSearchParams加个polyfill，这样就能用new URLSearchParams(params)来生成参数串了。

总结一下原来的代码为啥在IE11里不行 #

1. responseType='json'的兼容性问题：IE11的XMLHttpRequest虽然声称支持这个属性，但在异步GET请求中经常无法正确解析JSON，导致返回null
2. 多余的请求头：GET请求里设置Content-type是不符合规范的，IE11会因为这个拒绝处理请求
3. 缺少事件监听：原来的代码只是发起了请求，但没有监听请求完成的事件，现代浏览器可能靠事件循环的特性触发后续处理，但IE11完全不会执行任何回调

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