JavaScript HTTP 请求: XMLHttpRequest 和 Fetch API 教程

在网页开发中，经常需要使用 JavaScript 发送 HTTP 请求，例如从服务器获取数据或提交表单数据。JavaScript 提供了两种主要的 API 来实现这一目标：传统的 XMLHttpRequest 对象和更现代的 Fetch API。

使用 XMLHttpRequest 对象发送 HTTP 请求

XMLHttpRequest 对象允许您在 JavaScript 中创建异步 HTTP 请求。以下是使用 XMLHttpRequest 发送 GET 请求的示例：javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'http://example.com/api/endpoint', true);xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); // 处理返回的数据 console.log(response); }};xhr.send();

代码解释:

创建一个新的 XMLHttpRequest 对象。2. 使用 open() 方法初始化请求，指定请求方法 ('GET'), URL 和是否异步 (true)。3. 设置 onreadystatechange 事件处理程序，该程序将在请求状态更改时执行。4. 检查 readyState 是否为 4 (请求完成) 以及 status 是否为 200 (成功)。5. 如果请求成功，解析响应数据并进行处理。6. 使用 send() 方法发送请求。

使用 Fetch API 发送 HTTP 请求

Fetch API 提供了一种更简洁、更现代的发送 HTTP 请求的方式。以下是使用 fetch() 函数发送 GET 请求的示例：javascriptfetch('http://example.com/api/endpoint') .then(response => response.json()) .then(data => { // 处理返回的数据 console.log(data); }) .catch(error => { // 处理错误 console.log(error); });

代码解释:

调用 fetch() 函数并传递请求 URL。2. fetch() 函数返回一个 Promise，该 Promise 在请求完成时解析为 Response 对象。3. 使用 then() 方法链式调用，处理响应数据。4. 使用 response.json() 方法将响应数据解析为 JSON 格式。5. 使用 catch() 方法捕获并处理错误。

发送其他类型的请求

您可以使用 XMLHttpRequest 和 fetch() 发送其他类型的 HTTP 请求，例如 POST 请求。只需更改请求方法和传递必要的参数即可。例如，要使用 fetch() 发送 POST 请求：javascriptfetch('http://example.com/api/endpoint', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key1: 'value1', key2: 'value2' })}) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.log(error));

总结

XMLHttpRequest 和 Fetch API 都是发送 JavaScript HTTP 请求的有效方法。 XMLHttpRequest 提供了更精细的控制，而 Fetch API 提供了更简洁的语法和 Promise 支持。选择哪种方法取决于您的具体需求和编码风格。

JavaScript HTTP 请求: XMLHttpRequest 和 Fetch API 教程