Javascript 如何发送 HTTP 请求？两种常用方法详解

Javascript 如何发送 HTTP 请求？两种常用方法详解

在 web 开发中，我们经常需要使用 Javascript 发送 HTTP 请求与服务器交互，例如获取数据、提交表单等。本文将介绍两种常用的发送 HTTP 请求的方法：XMLHttpRequest 对象和 fetch 函数。

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

XMLHttpRequest 对象是浏览器内置的用于发送 HTTP 请求的 API，它支持所有现代浏览器。以下是如何使用 XMLHttpRequest 对象发送 GET 请求：javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'http://example.com/api/data', true);xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); console.log(response); }};xhr.send();

代码解释：

1. 创建一个 XMLHttpRequest 对象。2. 使用 open() 方法初始化请求，指定请求方法（GET）、请求 URL 和是否异步（true 表示异步）。3. 设置 onreadystatechange 事件监听器，当请求状态发生变化时触发。4. 在事件监听器中，检查请求是否完成（readyState === 4）和请求是否成功（status === 200）。5. 如果请求成功，解析响应数据并进行处理。6. 使用 send() 方法发送请求。

**发送 POST 请求：**javascriptvar xhr = new XMLHttpRequest();xhr.open('POST', 'http://example.com/api/data', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.onreadystatechange = function () { // ... 处理响应};xhr.send(JSON.stringify({ key: 'value' }));

发送 POST 请求时，需要设置请求头 Content-Type 为 application/json，并将请求体数据序列化为 JSON 字符串。

2. 使用 fetch 函数发送 HTTP 请求

fetch 函数是现代浏览器提供的更简洁、更易用的发送 HTTP 请求的 API。它返回一个 Promise 对象，可以使用 then() 方法处理响应。

**发送 GET 请求：**javascriptfetch('http://example.com/api/data') .then(function (response) { return response.json(); }) .then(function (data) { console.log(data); }) .catch(function (error) { console.log(error); });

代码解释：

1. 调用 fetch() 函数发送 GET 请求，传入请求 URL。2. 使用 then() 方法处理响应，第一个 then() 方法接收 Response 对象，并将其转换为 JSON 格式。3. 第二个 then() 方法接收解析后的 JSON 数据，并进行处理。4. 使用 catch() 方法捕获错误。

**发送 POST 请求：**javascriptfetch('http://example.com/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ key: 'value' }),}) .then(function (response) { // ... 处理响应 }) .catch(function (error) { // ... 处理错误 });

发送 POST 请求时，需要在 fetch() 函数的第二个参数中指定请求方法、请求头和请求体数据。

总结

本文介绍了两种使用 Javascript 发送 HTTP 请求的方法：XMLHttpRequest 对象和 fetch 函数。XMLHttpRequest 对象是传统的 API，支持所有现代浏览器，而 fetch 函数是更现代的 API，提供更简洁、更易用的语法。你可以根据自己的需求选择合适的方法。