JavaScript 中 XMLHttpRequest 对象的用法？

推荐答案

// www.javascriptcn.com code example
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头（可选）
xhr.setRequestHeader('Content-Type', 'application/json');

// 定义请求完成后的回调函数
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 请求成功，处理响应数据
        console.log(xhr.responseText);
    } else {
        // 请求失败，处理错误
        console.error('Request failed with status:', xhr.status);
    }
};

// 定义请求出错时的回调函数
xhr.onerror = function() {
    console.error('Request failed');
};

// 发送请求
xhr.send();

本题详细解读

XMLHttpRequest 对象简介

XMLHttpRequest 是 JavaScript 中用于与服务器进行异步通信的对象。它允许在不重新加载页面的情况下向服务器发送请求并接收响应。尽管现代开发中更常用 fetch API，但 XMLHttpRequest 仍然是许多旧代码库和特定场景中的主要选择。

创建 XMLHttpRequest 对象

首先，你需要创建一个 XMLHttpRequest 对象：

var xhr = new XMLHttpRequest();

配置请求

使用 open 方法配置请求。open 方法接受三个参数：

1. 请求方法（如 GET、POST 等）。
2. 请求的 URL。
3. 是否异步（true 表示异步，false 表示同步）。

xhr.open('GET', 'https://api.example.com/data', true);

设置请求头（可选）

你可以使用 setRequestHeader 方法设置请求头。例如，设置 Content-Type 为 application/json：

xhr.setRequestHeader('Content-Type', 'application/json');

定义回调函数

onload 事件处理程序在请求成功完成时触发。你可以在这里处理响应数据：

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText);
    } else {
        console.error('Request failed with status:', xhr.status);
    }
};

onerror 事件处理程序在请求失败时触发：

xhr.onerror = function() {
    console.error('Request failed');
};

发送请求

最后，使用 send 方法发送请求。对于 GET 请求，send 方法通常不带参数；对于 POST 请求，你可以传递请求体数据：

xhr.send();

注意事项

• XMLHttpRequest 是同步的（当 open 的第三个参数为 false 时），但同步请求会阻塞页面，不推荐使用。
• XMLHttpRequest 支持跨域请求，但需要服务器配置适当的 CORS 头。
• 现代开发中，fetch API 提供了更简洁的语法和更好的错误处理机制，建议优先使用 fetch。