JavaScript 中如何发送 AJAX 请求？

推荐答案

在 JavaScript 中，可以使用 XMLHttpRequest 对象或 fetch API 来发送 AJAX 请求。以下是两种方法的示例：

使用 XMLHttpRequest

// www.javascriptcn.com code example
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

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

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

xhr.send();

使用 fetch API

// www.javascriptcn.com code example
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Response:', data);
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

本题详细解读

XMLHttpRequest 方法

1. 创建对象: 使用 new XMLHttpRequest() 创建一个新的 XMLHttpRequest 对象。
2. 初始化请求: 使用 open() 方法初始化请求。参数包括请求方法（如 GET 或 POST）、请求的 URL 和一个布尔值表示请求是否异步。
3. 处理响应: 使用 onload 事件处理程序来处理请求成功时的响应。onerror 事件处理程序用于处理请求失败的情况。
4. 发送请求: 使用 send() 方法发送请求。对于 POST 请求，可以在 send() 方法中传递请求体。

fetch API 方法

1. 发起请求: 使用 fetch() 函数发起请求。fetch() 返回一个 Promise，该 Promise 在请求完成后解析为 Response 对象。
2. 处理响应: 使用 .then() 方法处理响应。首先检查 response.ok 属性以确保请求成功，然后使用 response.json() 方法将响应解析为 JSON 格式。
3. 错误处理: 使用 .catch() 方法捕获和处理请求过程中可能出现的错误。

选择哪种方法？

• XMLHttpRequest: 兼容性更好，支持更老的浏览器，但代码相对冗长。
• fetch API: 更现代、简洁，支持 Promise，但不支持所有老版本浏览器。

根据项目需求和目标浏览器的兼容性要求，选择合适的方法。