JavaScript发送HTTP请求实战指南：XMLHttpRequest和Fetch API详解

想要在你的JavaScript项目中与服务器进行数据交互吗？本文将为你详细介绍如何使用JavaScript发送HTTP请求。我们将深入探讨两种常用的方法：XMLHttpRequest对象和fetch函数，并提供代码示例帮助你快速上手。

使用XMLHttpRequest对象发送HTTP请求

XMLHttpRequest对象是传统的发送HTTP请求的方式，它提供了丰富的功能和控制能力。以下是使用XMLHttpRequest对象发送GET请求的步骤：

1. 创建XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

2. 设置请求方法和URL：

// 使用'GET'方法请求'https://api.example.com/data'
xhr.open('GET', 'https://api.example.com/data', true);

• 第一个参数指定HTTP请求方法，例如'GET', 'POST', 'PUT', 'DELETE'等。
• 第二个参数指定请求的URL。
• 第三个参数设置为true表示启用异步请求，这也是推荐的方式。

3. 设置响应类型（可选）：

// 指定响应数据类型为JSON
xhr.responseType = 'json';

通过设置responseType属性，浏览器会自动将响应数据解析为指定的类型，例如JSON、文本或Blob等。

4. 添加请求头（可选）：

// 设置请求头，例如Content-Type
xhr.setRequestHeader('Content-Type', 'application/json');

可以使用setRequestHeader()方法设置请求头，例如指定内容类型或添加授权信息。

5. 添加事件监听器来处理响应：

// 监听load事件，当请求完成时触发
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功，处理响应数据
    console.log(xhr.response);
  } else {
    // 请求失败，处理错误
    console.error('请求失败：' + xhr.status);
  }
};

onload事件在请求完成时触发，可以通过xhr.status属性获取HTTP状态码，判断请求是否成功。

6. 发送请求：

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

对于GET请求，send()方法不需要参数。对于POST请求，需要将请求体数据作为参数传递给send()方法。

使用fetch函数发送HTTP请求

fetch函数是现代浏览器提供的更简洁的发送HTTP请求的方式，它返回一个Promise对象，可以方便地进行链式调用。以下是使用fetch函数发送GET请求的步骤：

1. 发出请求：

// 使用fetch函数发送GET请求
fetch('https://api.example.com/data')

fetch()函数接受请求URL作为参数，并返回一个Promise对象。

2. 处理响应：

  .then(function(response) {
    // 检查响应状态码
    if (response.ok) {
      // 请求成功，将响应数据解析为JSON
      return response.json();
    } else {
      // 请求失败，抛出错误
      throw new Error('请求失败：' + response.status);
    }
  })

使用.then()方法处理Promise对象，可以通过response.ok属性判断请求是否成功，并使用response.json()方法将响应数据解析为JSON格式。

3. 处理数据或错误：

  .then(function(data) {
    // 处理响应数据
    console.log(data);
  })
  .catch(function(error) {
    // 处理错误
    console.error(error);
  });

可以使用第二个.then()方法处理成功响应数据，使用.catch()方法捕获并处理错误。

发送POST请求

发送POST请求时，需要在请求体中包含数据，并在请求头中指定Content-Type。

使用XMLHttpRequest发送POST请求：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');

var data = { key1: 'value1', key2: 'value2' };

xhr.send(JSON.stringify(data));

使用fetch发送POST请求：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key1: 'value1', key2: 'value2' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

总结

本文介绍了使用JavaScript发送HTTP请求的两种常用方法：XMLHttpRequest对象和fetch函数。 XMLHttpRequest提供了更丰富的功能和控制能力，而fetch函数则更加简洁易用。选择哪种方法取决于你的具体需求和编码风格。 希望本文能够帮助你更好地理解如何在JavaScript中发送HTTP请求！