JavaScript发送HTTP请求：XMLHttpRequest和Fetch API详解

想要在你的JavaScript应用程序中与服务器交互？掌握发送HTTP请求是关键！本文将带你深入了解两种常用的方法：传统的XMLHttpRequest对象和现代的Fetch API。

使用XMLHttpRequest发送HTTP请求

XMLHttpRequest对象是AJAX技术的基石，让我们可以直接在JavaScript中发送HTTP请求。以下是一个简单的GET请求示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
xhr.send();

在这个例子中，我们创建了一个XMLHttpRequest对象，使用open()方法设置请求方法和URL，并通过send()方法发送请求。onreadystatechange事件监听器会在请求状态发生变化时触发，我们可以根据readyState和status属性判断请求是否成功，并处理响应数据。

使用Fetch API发送HTTP请求

Fetch API提供了一种更简洁、更现代的发送HTTP请求的方式。以下是用fetch()函数实现相同功能的代码：

fetch('https://api.example.com/data')
    .then(function (response) {
        if (response.ok) {
            return response.json();
        } else {
            throw new Error('HTTP error ' + response.status);
        }
    })
    .then(function (data) {
        console.log(data);
    })
    .catch(function (error) {
        console.log(error);
    });

fetch()函数返回一个Promise对象，我们可以使用.then()方法链式处理响应数据。response.ok属性可以判断请求是否成功，response.json()方法可以将响应体解析为JSON对象。

总结

无论是使用XMLHttpRequest还是Fetch API，你都可以轻松地在JavaScript中发送HTTP请求。Fetch API凭借其简洁易用的语法和Promise-based的异步处理方式，正逐渐成为现代Web开发的首选。

请记住，以上代码示例中的https://api.example.com/data只是一个占位符，你需要将其替换为你实际要请求的URL。此外，你还可以根据需要设置请求方法、请求头、请求体等参数，以满足不同的业务需求。