JavaScript 发起 HTTP 请求终极指南

在 Web 开发中，经常需要使用 JavaScript 向服务器发送请求以获取或提交数据。本文将介绍两种常用的发起 HTTP 请求的方法：XMLHttpRequest 和 Fetch API。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 的基础，允许你通过 JavaScript 发送异步请求。javascript// 创建 XMLHttpRequest 对象var request = new XMLHttpRequest();

// 设置请求方法和 URLrequest.open('GET', 'https://api.example.com/data', true);

// 设置请求头 (可选)request.setRequestHeader('Content-Type', 'application/json');

// 定义请求完成时的回调函数request.onload = function() { if (request.status >= 200 && request.status < 400) { // 请求成功 var response = request.responseText; console.log(response); } else { // 请求失败 console.error('请求失败'); }};

// 处理请求错误request.onerror = function() { console.error('请求发生错误');};

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

代码解释:

创建一个新的 XMLHttpRequest 对象。2. 使用 open() 方法设置请求方法 (GET, POST 等) 和目标 URL。第三个参数 true 表示异步请求。3. (可选) 使用 setRequestHeader() 设置请求头，例如指定数据类型。4. 使用 onload 事件监听请求完成，并根据 HTTP 状态码判断请求是否成功。5. 使用 onerror 事件监听请求过程中出现的错误。6. 使用 send() 方法发送请求。对于 GET 请求，可以直接调用 send()；对于 POST 请求，需要在 send() 方法中传递请求体数据。

2. 使用 Fetch API

Fetch API 提供了一种更简洁、更现代的发送 HTTP 请求的方式。javascriptfetch('https://api.example.com/data') .then(function(response) { if (response.ok) { // 解析响应数据为 JSON 格式 return response.json(); } else { // 请求失败 throw new Error('请求失败: ' + response.status); } }) .then(function(data) { // 处理响应数据 console.log(data); }) .catch(function(error) { // 捕获异常 console.error('发生错误', error); });

代码解释:

使用 fetch() 函数发起请求，传入目标 URL。2. fetch() 返回一个 Promise 对象，可以使用 .then() 方法处理响应。3. 检查 response.ok 属性判断请求是否成功 (状态码在 200-299 之间)。4. 使用 response.json() 等方法解析不同类型的响应数据。5. 使用 .catch() 方法捕获请求过程中出现的错误。

总结

XMLHttpRequest 和 Fetch API 都可以用来发送 HTTP 请求。XMLHttpRequest 更加底层，兼容性更好，而 Fetch API 更简洁易用，更符合现代 JavaScript 的编程风格。选择哪种方法取决于你的项目需求和个人偏好。