如何在JavaScript中获取XHR请求的响应状态与返回数据

安全阿岳

2026-10-1

你的问题核心是XMLHttpRequest的异步执行机制导致的：
XMLHttpRequest默认发起异步请求，xhr.send()执行后不会阻塞后续代码运行，你写在send()后面的状态判断逻辑会在请求还没收到响应的时候就执行完成，自然拿不到正确的status和responseText值。所有依赖请求返回结果的逻辑，都必须放到onreadystatechange回调函数内部执行。

另外你的代码还存在几个变量引用错误：status、response、itemToToggle三个变量都没有定义，需要对应修正为xhr.status、xhr.responseText和参数itemToCheck。

修复后的代码如下：

function checkItem(itemToCheck) {
  console.log(`Checking if ${itemToCheck} is checked`)
  var url = `https://list.s40.repl.co/api/get-status/${itemToCheck}`;

  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);

  xhr.setRequestHeader("Accept", "application/json");

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        console.log(xhr.status);
        console.log(xhr.responseText);
        // 所有请求相关的逻辑都放到回调内部
        if (xhr.status === 200) {
          console.log("The request worked")
          if (xhr.responseText === "True") {
            console.log(`${itemToCheck} is true`)
            var checkbox = document.getElementById(`${itemToCheck}-checkbox`)
            // 在这里执行你的checkbox操作逻辑
          }
        } else {
          // 可选：添加请求失败的处理逻辑，方便排查问题
          console.error("请求失败，状态码：", xhr.status)
        }
    }};

  xhr.send();
}

主要修改点：