浏览器地址栏输入网址并回车，或使用工具如Postman
如何在网页中发送 HTTP 命令
在现代网络应用开发和测试过程中，我们经常需要在网页中发送 HTTP 命令来实现与服务器的交互，无论是获取数据、提交表单还是进行其他网络操作，掌握在网页中发送 HTTP 命令的方法都非常重要，以下将详细介绍在网页中发送 HTTP 命令的各种方式及相关要点。
使用 XMLHttpRequest 对象
（一）基本概念
XMLHttpRequest 是浏览器提供的用于在后台与服务器交换数据的对象，它可以在不重新加载页面的情况下更新网页内容,实现异步数据交互。
（二）使用方法
- 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
- 配置请求
xhr.open("GET", "https://example.com/api/data", true);
- 第一个参数：HTTP 方法，如 “GET”、”POST”等。
- 第二个参数：请求的 URL。
- 第三个参数：是否异步，true 表示异步，false 表示同步（一般使用异步）。
- 设置回调函数
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 处理响应数据 var response = JSON.parse(xhr.responseText); console.log(response); } };
readyState：表示请求的状态，4 表示请求已完成。status：表示 HTTP 状态码，200 表示请求成功。
- 发送请求
xhr.send();
（三）示例代码
以下是一个完整的使用 XMLHttpRequest 发送 GET 请求的示例：
<!DOCTYPE html>
<html>
<head>XMLHttpRequest Example</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var posts = JSON.parse(xhr.responseText);
console.log(posts);
}
};
xhr.send();
</script>
</body>
</html>
使用 Fetch API
（一）基本概念
Fetch API 是一种新的用于获取资源的接口，它基于 Promise，提供了更简洁、更灵活的方式来进行网络请求。
（二）使用方法
- 发送请求
fetch("https://example.com/api/data") .then(response => { if (!response.ok) { throw new Error("Network response was not ok"); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error("There was a problem with the fetch operation:", error); });
fetch函数接受一个请求的 URL 作为参数，返回一个 Promise。response.ok：检查响应状态是否在 200 299 范围内,表示请求是否成功。response.json()：将响应体解析为 JSON 格式的数据。
（三）示例代码
以下是一个完整的使用 Fetch API 发送 GET 请求的示例：
<!DOCTYPE html>
<html>
<head>Fetch API Example</title>
</head>
<body>
<script>
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(posts => {
console.log(posts);
})
.catch(error => {
console.error("There was a problem with the fetch operation:", error);
});
</script>
</body>
</html>
发送 POST 请求
（一）使用 XMLHttpRequest 发送 POST 请求
- 创建 XMLHttpRequest 对象并配置请求
var xhr = new XMLHttpRequest(); xhr.open("POST", "https://example.com/api/submit", true); xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
setRequestHeader方法用于设置请求头，这里设置 Content-Type 为 application/json，表示发送的数据是 JSON 格式。
- 设置回调函数和发送数据
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var response = JSON.parse(xhr.responseText); console.log(response); } }; var data = JSON.stringify({ name: "John", age: 30 }); xhr.send(data);
（二）使用 Fetch API 发送 POST 请求
fetch("https://example.com/api/submit", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ name: "John", age: 30 })
})
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error("There was a problem with the fetch operation:", error);
});
相关注意事项
（一）跨域问题
在发送 HTTP 请求时，可能会遇到跨域问题，当网页在不同域名下请求资源时，服务器需要设置相应的跨域头信息（如 Access-Control-Allow-Origin）才能允许请求，否则,浏览器会阻止跨域请求。
（二）错误处理
无论是使用 XMLHttpRequest 还是 Fetch API，都需要进行错误处理，在网络请求过程中，可能会出现各种错误，如网络连接失败、服务器返回错误状态码等，通过合理的错误处理机制,可以提高应用的稳定性和用户体验。
（三）兼容性问题
虽然现代浏览器普遍支持 XMLHttpRequest 和 Fetch API，但在某些旧版本的浏览器中可能存在兼容性问题，在实际开发中，需要注意对不同浏览器的兼容性进行处理,或者根据项目需求选择合适的解决方案。
相关问题与解答
问题 1：如何在网页中使用 XMLHttpRequest 发送带有自定义头部的 HTTP 请求？
解答：在使用 XMLHttpRequest 发送请求时，可以通过 setRequestHeader 方法设置自定义头部。
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
xhr.setRequestHeader("Authorization", "Bearer <token>"); // 设置自定义头部
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();
在上述代码中，设置了 Authorization 头部，用于传递身份验证令牌,可以根据具体需求设置其他自定义头部。
问题 2：Fetch API 和 XMLHttpRequest 有什么区别？
解答：Fetch API 和 XMLHttpRequest 都是用于在网页中发送 HTTP 请求的方式,但它们之间有一些区别：
- 编程风格：Fetch API 基于 Promise，代码更加简洁、易读，便于处理异步操作，而 XMLHttpRequest 使用的是事件监听和回调函数的方式,代码相对复杂一些。
- 兼容性：XMLHttpRequest 在旧版本浏览器中的兼容性更好，而 Fetch API 在一些较新的浏览器中才得到广泛支持，随着浏览器的不断更新，Fetch API 的兼容性也在逐渐提高。
- 功能特性：Fetch API 提供了一些更强大的功能，如流式处理、请求取消等，而 XMLHttpRequest 的功能相对较为基础。
小伙伴们，上文介绍网页怎么发http命令的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，发布者：酷番叔，转转请注明出处：https://cloud.kd.cn/ask/13297.html
