如何创建特定的XMLHttpRequest？寻求技术协助

嘿，别发愁，我来一步步带你搞定XMLHttpRequest的创建流程，保证和你想要的标准请求完全一致！下面我会把整个流程拆解开，再给你完整的代码示例，你一看就懂。

不管是GET还是POST请求，核心步骤都是这几个，我会分别给你示例：

第一步：创建请求实例 #

首先得生成一个XMLHttpRequest的对象，这是发起请求的基础：

const xhr = new XMLHttpRequest();

第二步：初始化请求 #

用open()方法设置请求的核心参数，三个必填参数分别是：请求方法（GET/POST/PUT等）、请求地址、是否异步（一般都设为true，避免阻塞页面）：

// 以GET请求为例，地址替换成你的接口URL
xhr.open('GET', '/your-api-url', true);

第三步：设置请求头（可选但常用） #

如果你的接口要求特定的请求头（比如告诉服务器你发的是JSON数据，或者带身份验证token），就用setRequestHeader()来设置：

// 比如发送JSON格式的请求时，必须设置这个头
xhr.setRequestHeader('Content-Type', 'application/json');
// 如果需要身份验证，可以加这个
xhr.setRequestHeader('Authorization', 'Bearer your-token-here');

第四步：监听请求状态，处理响应 #

这一步是关键，我们要监听请求的状态变化，在请求完成后处理成功或失败的情况：

xhr.onreadystatechange = function() {
  // readyState等于4表示请求已经完成
  if (xhr.readyState === XMLHttpRequest.DONE) {
    // status等于200表示服务器返回成功响应
    if (xhr.status === 200) {
      // 解析响应数据，这里假设返回的是JSON
      const responseData = JSON.parse(xhr.responseText);
      console.log('请求成功！返回数据:', responseData);
      // 这里可以写你拿到数据后的业务逻辑
    } else {
      // 状态码不是200，说明请求失败，比如404、500
      console.error('请求失败，状态码:', xhr.status);
      // 处理错误逻辑
    }
  }
};

// 额外加个网络错误监听，比如断网的时候会触发
xhr.onerror = function() {
  console.error('网络出错了，请求发不出去！');
};

第五步：发送请求 #

最后一步就是把请求发出去！GET请求不需要请求体，传null或者直接空着；POST请求要把数据转成JSON字符串传进去：

GET请求发送示例 #

xhr.send(null);

POST请求发送示例 #

// 准备要发送的数据
const postData = {
  name: '张三',
  age: 25
};
// 把对象转成JSON字符串发送
xhr.send(JSON.stringify(postData));

把上面的步骤整合起来，就是一个完整的可运行的请求：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/your-api-url', true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      console.log('请求成功:', response);
    } else {
      console.error('请求失败，状态码:', xhr.status);
    }
  }
};

xhr.onerror = function() {
  console.error('网络错误');
};

xhr.send(null);

如果你的图里是POST请求，直接把open()的方法改成POST，然后在send()里传请求体就行啦。

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