HTML页面加载正常但XMLHttpRequest请求出现报错如何解决

算力阿峰

2026-10-10

XMLHttpRequest报错问题修复方案

核心错误原因

onreadystatechange事件缺少readyState判断：该事件会在请求状态每次变化时触发，只有当readyState === 4时请求才正式完成，未加该判断会在请求还未结束时就读取status值，此时status为0直接触发错误逻辑，甚至抛出异常
回调参数逻辑错位：原代码成功请求时将状态码作为第一个参数传入回调，和调用处的错误判断逻辑不匹配，容易引发逻辑混乱
协议/路径问题：如果直接用file://协议打开HTML页面，浏览器安全策略默认禁止读取本地JSON文件；如果games.json文件路径和当前HTML路径不匹配，也会触发404错误

修复后完整代码

var getJSON = function (url, callback) {
  var ajax = new XMLHttpRequest();
  ajax.open('GET', url, true);
  ajax.responseType = 'json';
  // 改用onload事件，仅在请求完成时触发，省略readyState判断
  ajax.onload = function () {
    if (ajax.status === 200) {
      // 成功时错误参数为null，符合常规异步回调规范
      callback(null, ajax.response);
    } else {
      callback(new Error(`请求失败，状态码：${ajax.status}`), ajax.response);
    }
  };
  // 捕获网络异常错误
  ajax.onerror = function () {
    callback(new Error('网络请求异常，请检查路径或访问协议'), null);
  };
  ajax.send();
};

getJSON('games.json', function (err, data) {
  // 只要err不为空就走错误逻辑
  if (err) {
    console.error('出错：', err);
    return;
  }
  var bets = document.getElementById('bets-container-lotos');
  bets.innerHTML = '';
  bets.innerHTML +=
    '<button id="bets-lotofacil-color"  class="bets-lotofacil" onclick="lotofacil()">' +
    data.types[0].type +
    '</button>';
});