Safari浏览器中Ajax请求无法正常工作的问题排查求助

我碰到过类似的情况，Safari对XMLHttpRequest的处理确实和Firefox有不少细节差异，结合你提到的readyState为undefined、status为空的现象，给你几个排查方向：

1. 回调里的this绑定异常 #

旧版本的Safari中，onreadystatechange回调内的this可能不会正确指向XMLHttpRequest实例，导致你读取不到正确的状态值。

修复方案：提前把请求对象存为变量，在回调里直接用这个变量：

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  // 保存请求对象到变量，避免this绑定问题
  const request = xhttp;
  xhttp.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
      document.getElementById("demo").innerHTML = request.responseText;
    }
  };
  xhttp.open("GET", "pegSolitaireSettings.html", true);
  xhttp.send();
}

2. 本地file://协议的限制 #

如果你的页面是直接通过本地文件打开（URL以file://开头），Safari对本地文件间的Ajax请求限制非常严格，会直接阻止请求，导致没有任何状态返回——这是最常见的原因。

修复方案：

• 把页面部署到本地服务器，比如用Python启动一个简单服务器：

  # Python 3
  python -m http.server 8000
  

• 然后通过http://localhost:8000访问你的页面，这样就能避开file协议的安全限制。

3. Safari的缓存策略问题 #

Safari对GET请求的缓存非常激进，可能会直接读取缓存而不发送新请求，导致你看不到预期的响应。

修复方案：在请求URL后添加时间戳参数，强制浏览器发送新请求：

xhttp.open("GET", `pegSolitaireSettings.html?t=${Date.now()}`, true);

4. 改用更现代的事件监听方式 #

onreadystatechange是比较旧的写法，Safari对load/error等事件的支持更稳定，你可以试试替换成事件监听：

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  
  xhttp.addEventListener('load', function() {
    if (this.status === 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  });
  
  xhttp.addEventListener('error', function() {
    console.error('请求失败，可在这里查看错误详情');
  });
  
  xhttp.open("GET", `pegSolitaireSettings.html?t=${Date.now()}`, true);
  xhttp.send();
}

另外，你可以打开Safari的开发者工具（快捷键Cmd + Opt + I），切换到Network标签，查看请求是否真的被发送出去，有没有报错信息——这能帮你快速定位问题根源。

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