JavaScript发送HTTP请求: XMLHttpRequest与Fetch API详解

使用JavaScript发送HTTP请求： 从 XMLHttpRequest 到 Fetch API

在现代Web开发中，使用JavaScript发送HTTP请求是与服务器交互、获取数据和实现动态更新的核心技术。本文将带你了解两种常用的发送HTTP请求的方法：传统的XMLHttpRequest对象和现代的Fetch API，并提供详细的代码示例和解释，帮助你更好地掌握这一技能。

1. 使用 XMLHttpRequest 对象发送HTTP请求

XMLHttpRequest对象是浏览器提供的原生JavaScript对象，允许你以异步的方式发送HTTP请求，并在请求完成后处理响应。以下是使用XMLHttpRequest发送HTTP请求的基本步骤：

1. 创建 XMLHttpRequest 对象:

   javascript var xhr = new XMLHttpRequest();

2. 设置请求参数: 使用open()方法初始化请求，指定请求方法（GET、POST等）、请求URL和是否异步（通常为true）。

   javascript xhr.open('GET', 'https://api.example.com/data', true);

3. 设置请求头 (可选): 如果需要，可以使用setRequestHeader()方法设置请求头，例如设置内容类型。

   javascript xhr.setRequestHeader('Content-Type', 'application/json');

4. 注册回调函数: 使用onload事件处理成功响应，使用onerror事件处理请求错误。

   
   xhr.onerror = function() {     // 处理请求错误     console.error('请求出错');   };   ```
   
   

5. 发送请求: 使用send()方法发送请求。对于GET请求，send()方法不带参数；对于POST请求，将数据作为参数传递给send()方法。

   javascript xhr.send(); // GET 请求 // xhr.send(data); // POST 请求，其中 data 是请求数据

示例： 发送GET请求javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 400) { console.log(JSON.parse(xhr.responseText)); // 解析 JSON 数据 } else { console.error('请求出错，状态码为 ' + xhr.status); }};xhr.onerror = function() { console.error('请求出错');};xhr.send();

2. 使用 Fetch API 发送HTTP请求

Fetch API是现代浏览器提供的更简洁、更强大的发送HTTP请求的接口，它使用Promise来处理异步操作，并提供更灵活的请求和响应处理方式。

以下是使用fetch() API发送HTTP请求的基本步骤：

1. 调用 fetch() 函数: 传递请求URL作为参数，并返回一个Promise对象。

   javascript fetch('https://api.example.com/data') .then(// 处理响应) .catch(// 处理错误);

2. 处理响应: 使用.then()方法处理成功响应。fetch() 返回的Promise会解析成一个Response对象，需要调用json()、text()等方法来获取响应体。

   javascript fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('请求出错，状态码为 ' + response.status); } return response.json(); // 解析 JSON 数据 }) .then(data => { // 处理响应数据 console.log(data); }) .catch(error => { // 处理错误 console.error('请求出错', error); });

示例： 发送POST请求并设置请求头javascriptconst data = { key1: 'value1', key2: 'value2' };

fetch('https://api.example.com/data', { method: 'POST', // 请求方法 headers: { 'Content-Type': 'application/json' // 请求头 }, body: JSON.stringify(data) // 请求体}) .then(response => { if (!response.ok) { throw new Error('请求出错，状态码为 ' + response.status); } return response.json(); }) .then(data => { console.log('请求成功', data); }) .catch(error => { console.error('请求出错', error); });

总结

XMLHttpRequest 和 Fetch API 都是发送HTTP请求的有效方法，但 Fetch API 提供了更现代、更简洁、更易用的接口。建议在新项目中优先考虑使用 Fetch API。通过本文，你学习了如何使用这两种方法发送HTTP请求，并掌握了处理响应和错误的基本技巧，这将有助于你构建更强大、更动态的Web应用程序。