如何使用 JavaScript 获取 HTTP 请求215

在 Web 开发中，经常需要发送 HTTP 请求以从服务器获取数据或执行其他操作。在 JavaScript 中，可以通过 XMLHttpRequest 对象或 fetch() API 来实现此操作。

XMLHttpRequest 对象

XMLHttpRequest 对象是 JavaScript 中用于发送 HTTP 请求的早期方法。它提供了对整个请求过程的低级控制，包括设置请求头、发送数据以及处理响应。

以下代码示例展示了如何使用 XMLHttpRequest 对象发送 GET 请求：```javascript
const xhr = new XMLHttpRequest();
("GET", "/api/data");
= () => {
if ( === 200) {
const response = ();
(response);
} else {
("Request failed with status", );
}
};
();
```

fetch() API

fetch() API 是一个较新的接口，它简化了 JavaScript 中的 HTTP 请求。fetch() API 返回一个 Promise 对象，该对象在请求完成时解析为 Response 对象。

以下代码示例展示了如何使用 fetch() 发送 GET 请求：```javascript
fetch("/api/data")
.then((response) => {
if () {
return ();
}
})
.then((data) => {
(data);
})
.catch((error) => {
("Request failed", error);
});
```

发送请求参数

HTTP 请求可以通过请求参数来发送数据。在 XMLHttpRequest 对象中，可以使用 setRequestHeader() 方法来设置请求头，并使用 send() 方法发送请求正文。

以下代码示例展示了如何使用 XMLHttpRequest 对象发送 POST 请求并传递 JSON 数据：```javascript
const xhr = new XMLHttpRequest();
("POST", "/api/data");
("Content-Type", "application/json");
(({ name: "John Doe" }));
```

在 fetch() API 中，可以使用 body 属性来设置请求正文。

以下代码示例展示了如何使用 fetch() 发送 POST 请求并传递 JSON 数据：```javascript
fetch("/api/data", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: ({ name: "John Doe" }),
})
.then((response) => {
if () {
return ();
}
})
.then((data) => {
(data);
})
.catch((error) => {
("Request failed", error);
});
```

处理响应

HTTP 请求的响应通过 Response 对象提供。Response 对象提供了对响应正文、状态代码和标头的访问。

以下代码示例展示了如何使用 XMLHttpRequest 对象处理响应正文：```javascript
= () => {
if ( === 200) {
const responseText = ;
// 处理 responseText
}
};
```

在 fetch() API 中，可以使用 .json() 方法将响应正文解析为 JSON 对象，或者使用 .text() 方法获取原始响应正文。

以下代码示例展示了如何使用 fetch() 处理响应正文：```javascript
fetch("/api/data")
.then((response) => {
if () {
return ();
}
})
.then((data) => {
(data);
})
.catch((error) => {
("Request failed", error);
});
```

在 JavaScript 中，XMLHttpRequest 对象和 fetch() API 提供了发送 HTTP 请求并处理响应的机制。XMLHttpRequest 对象提供了对请求过程的更精细控制，而 fetch() API 以更简洁和现代的方式实现了相同的功能。

2025-02-10

上一篇：JSON 轻松转为 JavaScript，实现数据交互

下一篇：CSS 加载优化：使用 JavaScript 提高网页性能