XMLHttpRequest回调代码工作原理解析及与GET方法差异咨询

整体流程 #

这段代码通过XMLHttpRequest发起一个GET请求获取远程数据，并利用回调函数处理请求结果（成功返回数据，失败返回错误信息）。

逐行拆解 #

1. 定义getToDos函数 #

const getToDos = (one) => {

getToDos是一个接收**回调函数one**的函数，这个回调会在请求完成后被调用，用来传递请求结果或错误。

2. 创建请求实例 #

const req = new XMLHttpRequest();

XMLHttpRequest是浏览器提供的原生API对象，专门用于在前端发起HTTP请求。

3. 监听请求状态变化 #

req.addEventListener(`readystatechange`, () => {
  if (req.readyState === 4 && req.status === 200) {
    one(undefined, req.responseText);
  }
  else if (req.readyState === 4) {
    one(`couldnt fetch data`, undefined);
  }
});

• readystatechange事件：每当请求的状态（readyState）发生变化时触发。
• readyState === 4：表示请求已完成（无论成功或失败）。
  • 若同时status === 200（HTTP成功状态码），说明请求成功，调用回调one，第一个参数传undefined（无错误），第二个参数传服务器返回的文本数据req.responseText。
  • 若readyState === 4但状态码不是200，说明请求失败，调用回调one，第一个参数传错误信息，第二个参数传undefined（无有效数据）。

4. 初始化并发送请求 #

req.open(`GET`, `https://jsonplaceholder.typicode.com/todos/`);
req.send();

• req.open('GET', url)：初始化一个GET类型的请求，指定请求目标URL。
• req.send()：正式发送这个HTTP请求。

5. 调用getToDos并处理结果 #

getToDos((err, data) => {
  if (err) {
    console.log(err);
  }
  else {
    console.log(data);
  }
});

这里传入一个匿名回调函数：如果请求失败（err存在），打印错误信息；如果成功（data存在），打印返回的 todos 数据。

二者不属于同一层面的概念：

• XMLHttpRequest：是浏览器提供的API工具，用于在前端发起各种类型的HTTP请求（包括GET、POST、PUT、DELETE等）。
• GET：是HTTP协议定义的一种请求方法，作用是从服务器获取资源，是XMLHttpRequest可以使用的请求类型之一。

简单说：XMLHttpRequest是"工具"，GET是这个工具可以执行的"操作类型"。

• XMLHttpRequest：仅用于前端（浏览器环境），后端不会使用它——后端有自己的HTTP请求/处理工具（比如Node.js的http模块、axios库等）。
• GET方法：前后端都会使用。前端用它向服务器请求数据；后端用它接收客户端发来的GET请求，返回对应的资源或数据。

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