JavaScript 发起 HTTP 请求： XMLHttpRequest 和 Fetch API 教程

JavaScript 发起 HTTP 请求： XMLHttpRequest 和 Fetch API 教程

在 Web 开发中，经常需要使用 JavaScript 发起 HTTP 请求，与服务器进行数据交互。JavaScript 提供了两种主要的 API 来实现这一目标：传统的 XMLHttpRequest 对象和更现代的 Fetch API。

本文将详细介绍如何使用这两种方法发起 HTTP 请求，并提供示例代码，帮助你快速掌握网络请求技巧。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 的基础，它允许你发送异步 HTTP 请求。

function makeHttpRequest(url, method, data) {  return new Promise(function(resolve, reject) {    var xhr = new XMLHttpRequest();    xhr.open(method, url, true);    xhr.setRequestHeader('Content-Type', 'application/json');        xhr.onload = function() {      if (xhr.status >= 200 && xhr.status < 300) {        resolve(xhr.responseText);      } else {        reject(xhr.statusText);      }    };        xhr.onerror = function() {      reject(xhr.statusText);    };        xhr.send(JSON.stringify(data));  });}

// 使用示例:
var url = 'https://api.example.com/data';var method = 'POST';var data = { name: 'John', age: 30 };

makeHttpRequest(url, method, data)  .then(function(response) {    console.log('成功：', response);  })  .catch(function(error) {    console.log('失败：', error);  });

**代码解释：**

1. `makeHttpRequest` 函数接收三个参数：请求 URL、HTTP 方法和请求数据。
2. 创建一个 `XMLHttpRequest` 对象。
3. 使用 `open()` 方法初始化请求，设置请求方法、URL 和异步标志（`true` 表示异步）。
4. 设置请求头，这里设置为 JSON 格式。
5. 使用 `onload` 事件监听请求成功，并根据状态码判断是否成功。
6. 使用 `onerror` 事件监听请求失败。
7. 使用 `send()` 方法发送请求，如果是 POST 请求，需要将数据作为参数传递。
8. 使用示例演示了如何调用 `makeHttpRequest` 函数发送请求，并处理成功和失败的响应。

### 2. 使用 Fetch API

`Fetch API` 是一个更现代、更简洁的网络请求 API，它使用 Promise 来处理异步操作。

```javascript
function makeHttpRequest(url, method, data) {  var options = {    method: method,    headers: {      'Content-Type': 'application/json'    },    body: JSON.stringify(data)  };    return fetch(url, options)    .then(function(response) {      if (!response.ok) {        throw new Error(response.statusText);      }            return response.json();    });}

// 使用示例:
var url = 'https://api.example.com/data';var method = 'POST';var data = { name: 'John', age: 30 };

makeHttpRequest(url, method, data)  .then(function(response) {    console.log('成功：', response);  })  .catch(function(error) {    console.log('失败：', error);  });

**代码解释：**

1. `makeHttpRequest` 函数接收相同的三个参数。
2. 创建一个包含请求方法、请求头和请求数据的 `options` 对象。
3. 使用 `fetch()` 函数发送请求，并传递 URL 和 `options` 对象。
4. 使用 `then()` 方法处理成功的响应，并使用 `response.json()` 将响应解析为 JSON 格式。
5. 如果响应状态码不是 `ok`（200-299），则抛出一个错误。
6. 使用 `catch()` 方法处理请求失败或响应解析错误。
7. 使用示例与 XMLHttpRequest 示例相同。

### 总结

本文介绍了使用 JavaScript 发起 HTTP 请求的两种主要方法：`XMLHttpRequest` 对象和 `Fetch API`。`Fetch API` 语法更简洁，使用更方便，建议优先使用。

在实际开发中，请根据具体需求选择合适的方法，并根据服务器 API 文档设置正确的请求方法、请求头和请求数据。