无论是前端还是后端开发，我们绕不开的就是HTTP请求与响应。无论是从前端页面去发送GET、POST请求给后端，还是后端接受请求，再向前端发送响应等等。可以说HTTP协议是关乎前后端数据传输的重要纽带。本篇将带大家深入了解HTTP请求。
HTTP协议概述
HTTP（HyperText Transfer Protocol，超文本传输协议）是用于客户端（如浏览器）与服务器之间传输数据的基础协议。HTTP协议采用请求-响应模式：客户端发送请求，服务器返回响应。这也是常见的前端与后端通信的一个过程。本文侧重讲解前端向后端发送数据的过程——HTTP请求。
什么是HTTP请求
HTTP 是Web通信的基础。HTTP请求是客户端（如浏览器）向服务器发送的消息，用于获取或提交数据。了解HTTP请求的完整流程有助于更好地设计和调试Web应用。
而一个HTTP的请求的组成又分了几个部分：
请求行:
包括请求方法、请求URL和HTTP协议版本。 举个例子：
GET /index.html HTTP/1.1
请求头：
包含描述请求的额外信息，如主机名、用户代理、内容类型等。
Host: example.com
User-Agent: Mozilla/5.0
Content-Type: application/json
请求体：
用于在POST、PUT等请求中包含实际的数据内容。GET请求通常没有请求体。
然后随便打开一个网页，点击检查，然后切换到网络界面，这些都是请求，随机点一个展示
而HTTP的请求由可以根据请求方法的不同分为： GET 、 POST 、 PUT 、 PATCH 、 DELETE 由于我们基本上都是使用 GET POST ，所以这篇文章我们将详细讲解这两种请求
GET
GET请求用于从服务器获取资源。它适用于检索数据，不会对资源产生副作用。
GET请求的特点
-
参数可见：请求参数会在URL中可见，不适合传输敏感数据。故GET请求相对于POST请求不安全。
-
URL长度有限制：不同浏览器对URL长度有不同的限制，但通常不超过2048个字符。
-
缓存：GET请求可以被浏览器缓存，以提高性能。
-
幂等性：多次相同的GET请求会产生相同的结果，不会对服务器资源产生副作用。
以下是一个使用GET请求获取数据的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET Request Example</title>
</head>
<body>
<h1>GET Request Example</h1>
<button id="getData">Get Data</button>
<script>
document.getElementById('getData').addEventListener('click', () => {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json()) // 解析响应数据为JSON格式
.then(data => console.log(data)) // 打印解析后的数据
.catch(error => console.error('Error:', error)); // 捕获并打印错误
});
</script>
</body>
</html>
可以看到成功向https://jsonplaceholder.typicode.com/posts/1发送一个GET请求。
POST 请求
POST请求用于向服务器提交数据以创建新资源。适用于提交表单、上传文件等场景。
POST请求的特点
- 参数不可见：数据包含在请求体中，相对更安全。
- 无数据大小限制：可以传输大量数据。
- 非幂等性：多次相同的POST请求可能会产生不同的结果，例如创建多个相同的资源。
以下代码例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POST Request Example</title>
</head>
<body>
<h1>POST Request Example</h1>
<button id="postData">Post Data</button>
<script>
document.getElementById('postData').addEventListener('click', () => {
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST', // 使用POST方法
headers: {
'Content-Type': 'application/json' // 设置请求头，声明发送的是JSON格式数据
},
body: JSON.stringify({ // 将JavaScript对象转换为JSON字符串并发送
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json()) // 解析响应数据为JSON格式
.then(data => console.log(data)) // 打印解析后的数据
.catch(error => console.error('Error:', error)); // 捕获并打印错误
});
</script>
</body>
</html>
成功向https://jsonplaceholder.typicode.com/posts发送一个POST请求。
可以看到，这些发送的数据都是存放在请求体中，因此数据大小没有限制，而且还更安全。
这里需要注意的是，
添加请求头Content-Type，声明发送的数据格式为JSON。将数据对象{ title: 'foo', body: 'bar', userId: 1 }转换为JSON字符串并包含在请求体中。使用response.json()将响应数据解析为JSON格式。
这里的设置请求用的都是 fetch ，确实麻烦，现在开发中一般会用 axios 来向后端发送请求，不仅更简便，且功能更强大。如果对 axios 感兴趣可以参考官方文档 Axios中文文档 | Axios中文网 (axios-http.cn)。笔者也会后续再补上关于axios的文章。
GET 和 POST 区别
-
用途不同：
- GET请求用于获取数据。
- POST请求用于提交数据。
-
安全性：
- GET请求参数在URL中可见，安全性较低。
- POST请求参数在请求体中，相对更安全。
-
幂等性：
- GET请求是幂等的，即多次相同的GET请求会产生相同的结果。
- POST请求不是幂等的，即多次相同的POST请求可能会产生不同的结果。
-
缓存：
- GET请求可以被浏览器缓存。
- POST请求不能被浏览器缓存。
-
数据大小限制：
- GET请求的URL长度有限制。
- POST请求没有数据大小的限制。
总结
通过本文的介绍，我们详细了解了HTTP协议的基本架构、请求和响应的组成部分，以及GET和POST请求的具体使用方法。GET请求主要用于从服务器获取数据，具有幂等性和缓存特性，而POST请求则用于向服务器提交数据，适用于创建资源。在实际开发中，选择合适的请求方法可以提升应用的性能和安全性。希望本文能帮助你更好地理解HTTP请求，为你的Web开发工作打下坚实的基础。写文章不易，可以给文章点个赞哦😊！
