js 发送请求

// 使用 XMLHttpRequest 发送 GET 请求
function sendGetRequest(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 请求成功，调用回调函数处理响应数据
            callback(xhr.responseText);
        }
    };
    xhr.open("GET", url, true);
    xhr.send();
}

// 使用 fetch API 发送 GET 请求
async function sendGetRequestFetch(url) {
    try {
        const response = await fetch(url);
        if (response.ok) {
            const data = await response.json(); // 假设响应是 JSON 格式
            console.log(data); // 处理响应数据
        } else {
            console.error('请求失败:', response.status);
        }
    } catch (error) {
        console.error('请求出错:', error);
    }
}

// 使用 fetch API 发送 POST 请求
async function sendPostRequest(url, data) {
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        if (response.ok) {
            const responseData = await response.json(); // 假设响应是 JSON 格式
            console.log(responseData); // 处理响应数据
        } else {
            console.error('请求失败:', response.status);
        }
    } catch (error) {
        console.error('请求出错:', error);
    }
}

解释说明：

1. XMLHttpRequest:

   • 这是较老的方式发送 HTTP 请求。通过 onreadystatechange 监听请求状态的变化，当 readyState 为 4（表示请求完成）且 status 为 200（表示请求成功）时，调用回调函数处理响应数据。

2. fetch API:

   • 这是现代浏览器中推荐的方式发送 HTTP 请求。它返回一个 Promise，可以使用 async/await 来简化异步代码的编写。
   • sendGetRequestFetch 函数展示了如何发送 GET 请求并处理响应。
   • sendPostRequest 函数展示了如何发送 POST 请求，设置请求头和请求体。

这些代码示例可以帮助你理解如何在 JavaScript 中发送不同类型的 HTTP 请求。