JavaScript 发起 HTTP 请求：Fetch 和 XMLHttpRequest 指南

想要使用 JavaScript 向服务器发送数据或获取数据？你需要了解如何发起 HTTP 请求。本文将介绍两种常用的方法：现代的 Fetch API 和传统的 XMLHttpRequest 对象。

1. 使用 Fetch API 发起请求

Fetch API 提供了一种简洁、基于 Promise 的方式来处理 HTTP 请求和响应。以下是如何使用 Fetch 发起 GET 请求的示例：javascriptfetch('https://api.example.com/data', { method: 'GET' }) .then(response => { if (!response.ok) { throw new Error('请求失败'); } return response.json(); // 根据响应类型解析数据 }) .then(data => { console.log('请求成功：', data); }) .catch(error => { console.error('请求出错：', error); });

代码解释:

fetch(url, options): 发起请求。url 是目标服务器地址，options 是可选的配置对象，可以设置请求方法、请求头、请求体等。2. response.ok: 检查响应状态码是否在 200-299 范围内，表示请求成功。3. response.json(): 将响应体解析为 JSON 格式。4. .then(): 处理成功的响应。5. .catch(): 处理请求过程中的错误。

其他 HTTP 方法:

你可以将 method 属性更改为 'POST'、'PUT'、'DELETE' 等来发送不同类型的请求。

发送请求体:

对于需要发送数据的请求，例如 POST 请求，你可以在 options 对象中添加 body 属性。javascriptfetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })})// ...

2. 使用 XMLHttpRequest 对象发起请求

XMLHttpRequest 对象提供了一种更底层的控制 HTTP 请求的方式，但代码相对复杂一些。以下是如何使用 XMLHttpRequest 发起 GET 请求的示例：javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data');xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { const data = JSON.parse(xhr.responseText); console.log('请求成功：', data); } else { console.error('请求失败：', xhr.status); }};xhr.onerror = function() { console.error('请求出错');};xhr.send();

代码解释:

new XMLHttpRequest(): 创建 XMLHttpRequest 对象。2. xhr.open(method, url): 初始化请求，设置请求方法和目标 URL。3. xhr.onload: 设置请求成功时的回调函数。4. xhr.onerror: 设置请求出错时的回调函数。5. xhr.send(): 发送请求。

**设置请求头:**javascriptxhr.setRequestHeader('Content-Type', 'application/json');

**发送请求体:**javascriptxhr.send(JSON.stringify({ key: 'value' }));

总结

Fetch API 和 XMLHttpRequest 对象都可以用来发起 HTTP 请求。 Fetch API 语法更简洁，易于使用，而 XMLHttpRequest 对象提供了更底层的控制能力。选择哪种方法取决于你的具体需求和编码风格。

JavaScript 发起 HTTP 请求：Fetch 和 XMLHttpRequest 指南