Webapi：XMLHttpRequest是怎么实现的|浏览器篇

在上一篇文章中我们介绍了 setTimeout 是如何结合渲染进程的循环系统工作的，那本篇文章我们就继续介绍另外一种类型的 WebAPI——XMLHttpRequest。

自从网页中引入了 JavaScript，我们就可以操作 DOM 树中任意一个节点，例如隐藏 / 显示节点、改变颜色、获得或改变文本内容、为元素添加事件响应函数等等， 几乎可以“为所欲为”了。

不过在 XMLHttpRequest 出现之前，如果服务器数据有更新，依然需要重新刷新整个页面。而 XMLHttpRequest 提供了从 Web 服务器获取数据的能力，如果你想要更新某条数据，只需要通过 XMLHttpRequest 请求服务器提供的接口，就可以获取到服务器的数据，然后再操作 DOM 来更新页面内容，整个过程只需要更新网页的一部分就可以了，而不用像之前那样还得刷新整个页面，这样既有效率又不会打扰到用户。

关于 XMLHttpRequest，本来我是想一带而过的，后来发现这个 WebAPI 用于教学非常好。首先前面讲了那么网络内容，现在可以通过它把 HTTP 协议实践一遍；其次，XMLHttpRequest 是一个非常典型的 WebAPI，通过它来讲解浏览器是如何实现 WebAPI 的很合适，这对于你理解其他 WebAPI 也有非常大的帮助，同时在这个过程中我们还可以把一些安全问题给串起来。

但在深入讲解 XMLHttpRequest 之前，我们得先介绍下同步回调和异步回调这两个概念，这会帮助你更加深刻地理解 WebAPI 是怎么工作的

原理拆解： XMLHttpRequest 是渲染进程中暴露给 JavaScript 的浏览器能力。调用 open 和 send 后，请求交由浏览器网络相关模块处理；异步请求不会让当前 JavaScript 调用栈一直等待。响应状态变化会在后续时机形成任务，事件循环取出任务后调用 readystatechange、load、error 等监听器，页面逻辑再解析数据并修改 DOM。因此“发出请求”和“消费结果”分属不同执行时段。

最小验证： 输入是公开测试接口返回的 JSON；要验证的结论是异步请求先让当前脚本结束，随后才执行 load 回调。可在现代浏览器控制台直接运行：

const xhr = new XMLHttpRequest();

xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true);
xhr.responseType = "json";

xhr.addEventListener("load", () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log("response", xhr.response.title);
  } else {
    console.log("http error", xhr.status);
  }
});

xhr.addEventListener("error", () => {
  console.log("network error");
});

console.log("before send");
xhr.send();
console.log("after send");

关键参数 true 表示异步模式。预期先输出 before send、after send，请求成功后再输出 response。若离线、DNS 或连接失败会触发 error；服务器返回 404 通常仍进入 load，所以必须检查 status。若目标服务调整了跨域策略，浏览器也可能因 CORS 拒绝把响应交给脚本。

边界与排查： 同步 XMLHttpRequest 会阻塞执行线程，在主线程上会造成页面无法响应，现代工程不应依赖它。请求成功也不代表业务数据有效，仍需校验状态码、响应类型和字段。取消请求可使用 abort()，超时可设置 timeout 并监听 timeout。排查时结合网络面板检查请求头、响应头、状态码、耗时和预检请求，再用性能面板确认回调中是否存在大规模 DOM 更新或长任务；网络完成很快但界面仍卡顿时，瓶颈往往位于响应处理与渲染阶段。