JavaScript 发出 HTTP 请求：XMLHttpRequest 与 Fetch API 教程

使用 JavaScript 发出 HTTP 请求：XMLHttpRequest 与 Fetch API 教程

想要在你的网页或应用中动态获取数据？你需要掌握使用 JavaScript 发出 HTTP 请求的技巧。本教程将介绍两种常用的方法：传统的 XMLHttpRequest 对象和更现代的 Fetch API。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 技术的核心，允许你在不刷新整个页面的情况下发送异步请求并处理服务器响应。javascript// 创建一个新的 XMLHttpRequest 对象var xhr = new XMLHttpRequest();

// 配置 HTTP 请求xhr.open('GET', 'https://api.example.com/data', true);

// 指定响应类型（可选）xhr.responseType = 'json';

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

// 处理响应xhr.onload = function() { if (xhr.status === 200) { var response = xhr.response; console.log(response); // 在这里处理响应数据 }};

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

代码解析:

1. new XMLHttpRequest(): 创建一个新的 XMLHttpRequest 对象。2. xhr.open('GET', 'https://api.example.com/data', true): 初始化请求，指定 HTTP 方法 (GET)、请求 URL 和是否异步 (true)。3. xhr.responseType = 'json': 设置响应类型为 JSON 格式，方便直接使用数据。4. xhr.setRequestHeader('Content-Type', 'application/json'): 设置请求头，例如指定数据类型为 JSON。5. xhr.onload: 定义一个函数，当请求成功完成时执行。6. xhr.status === 200: 检查响应状态码是否为 200 (成功)。7. xhr.response: 获取服务器响应数据。8. xhr.send(): 发送 HTTP 请求。

使用 Fetch API

Fetch API 提供了一种更简洁、更现代的发送 HTTP 请求的方式，返回 Promise 对象，方便进行异步操作。javascript// 发出 GET 请求fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console.log(data); // 在这里处理响应数据 }) .catch(error => { console.error('发生错误:', error); });

// 发出 POST 请求（带有请求体）fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}) .then(response => response.json()) .then(data => { console.log(data); // 在这里处理响应数据 }) .catch(error => { console.error('发生错误:', error); });

代码解析:

1. fetch('https://api.example.com/data'): 发起 GET 请求，返回一个 Promise 对象。2. .then(response => response.json()): 处理响应，将 JSON 格式的响应体解析为 JavaScript 对象。3. .then(data => { ... }): 访问解析后的数据并进行处理。4. .catch(error => { ... }): 处理请求过程中发生的错误。5. method: 'POST': 指定 HTTP 方法为 POST。6. headers: 设置请求头，例如指定数据类型为 JSON。7. body: 设置请求体，需要先将 JavaScript 对象转换为 JSON 字符串。

总结

以上示例展示了使用原生 JavaScript 发出 HTTP 请求的基本方法。你还可以使用其他第三方库（如 Axios、jQuery.ajax 等）来简化 HTTP 请求的处理。选择最适合你的项目需求和编码风格的方法，开始构建动态交互的网页应用吧！