调用本地successtext.html的Ajax请求同时触发成功与错误提示

这种情况我之前排查过好多次，大概率是这几个常见原因导致的，你可以逐一核对：

• 本地file://协议的安全限制：浏览器出于安全考量，对本地文件协议下的Ajax请求有诸多限制。哪怕你确实成功读取了successtext.html的内容，浏览器仍可能抛出跨域或权限相关的错误提示。最直接的解决办法是用本地服务器运行你的文件，比如用Python执行python -m http.server（Python3版本）或python -m SimpleHTTPServer（Python2版本），之后通过http://localhost:8000访问页面，就能避开file协议的限制。

• Ajax回调逻辑的错误触发：检查你的脚本是不是在状态判断上出了问题。比如用原生XMLHttpRequest时，没等readyState === 4（请求完成）就提前触发了错误提示，像下面这种错误写法：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'successtext.html', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('请求成功');
  } else {
    console.log('请求出错'); // readyState为1/2/3时都会触发这条提示
  }
};
xhr.send();

这种情况下，请求过程中会多次打印错误，最后请求完成时打印成功，就会出现两种提示同时存在的情况。正确的做法是只在readyState === 4时再判断状态码，其他状态不做错误处理。

• 重复发送Ajax请求：看看你的脚本是不是不小心触发了两次请求，比如事件绑定重复（比如多次绑定了页面加载或点击事件），导致一次请求成功、一次请求失败，两个结果同时输出到控制台。

你可以先试试用本地服务器运行项目，这是解决这类问题最常见的方案。如果还是有问题，把你的脚本代码贴出来，我再帮你针对性分析。

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