JavaScript HTTP请求指南：使用XMLHttpRequest发送请求

使用JavaScript发送HTTP请求

在Web开发中，经常需要使用JavaScript发送HTTP请求，例如从API获取数据或向服务器提交表单数据。

本指南将介绍如何使用JavaScript内置的XMLHttpRequest对象发送HTTP请求，并提供一个简单易懂的代码示例。

使用XMLHttpRequest发送GET请求

以下代码演示了如何使用XMLHttpRequest发送GET请求到'http://example.com/api'，并在请求完成后将响应内容打印到控制台：

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求的类型和URL
xhr.open('GET', 'http://example.com/api', true);

// 监听请求状态的变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 当请求完成且响应成功时执行此处代码
    var response = xhr.responseText;
    console.log(response);
  }
};

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

代码解释:

1. 首先，我们创建一个新的XMLHttpRequest对象。
2. 然后，使用open()方法设置请求的类型为'GET'，URL为'http://example.com/api'，并将第三个参数设置为true以启用异步请求。
3. 接下来，我们使用onreadystatechange事件监听请求状态的变化。
4. 在onreadystatechange事件处理程序中，我们检查xhr.readyState是否等于4（表示请求已完成）以及xhr.status是否等于200（表示请求成功）。
5. 如果请求成功，我们从xhr.responseText获取响应内容并将其打印到控制台。
6. 最后，我们调用send()方法发送请求。

发送POST请求

发送POST请求与发送GET请求类似，只需将open()方法的第一个参数改为'POST'，并在send()方法中传递要发送的数据即可。

xhr.open('POST', 'http://example.com/api', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('name=John&age=30');

其他方法:

除了使用XMLHttpRequest对象之外，还可以使用其他方法发送HTTP请求，例如：

• Fetch API: Fetch API是现代浏览器提供的一种新的发送HTTP请求的API，它比XMLHttpRequest更简洁易用。
• 第三方库: 一些第三方库，例如axios和jQuery.ajax()，提供了更方便的API来发送HTTP请求，并提供了更多功能，例如错误处理和JSON解析。

选择哪种方法取决于你的需求和偏好。