GET、POST、HEAD请求

---

前言

之前面试总是被问GET，POST的区别，总是被追问答不完全，这次索性对GET、POST的区别做一个总结，并对HEAD请求进行一个学习。

---

一、GET和POST请求是什么？

1.首先了解HTTP协议

HTTP ，是 Hypertext Transfer Protocol 的缩写，是一种用于在计算机之间传输数据的应用层协议。HTTP 协议定义了客户端和服务器之间交换数据的格式和规则，通常用于在浏览器和 Web 服务器之间传输超文本，比如HTML、CSS、JavaScript 等。

2.HTTP 请求响应过程

1. 建立 TCP 连接：客户端向服务器发起连接请求，服务器接受请求，双方建立起 TCP 连接。
2. 客户端向服务器发送 HTTP 请求，一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分组成。
3. 服务器响应：服务器接收到客户端的请求后，返回一个 HTTP 响应，响应包括状态码、响应头部、响应体等信息。
4. 传输数据：服务器将响应数据传输给客户端，客户端接收数据并解析。
5. 断开连接：传输完成后，客户端和服务器都可以主动断开 TCP 连接，释放网络资源。

其中请求行（request line），就是是用于描述客户端的请求方式，常用的有GET，POST，PUT，DELETE，PATCH，请求的资源名称(URL)，以及使用的HTTP协议的版本号。

总的来说，GET 和 POST 请求是 HTTP 协议中最常用的两种请求方法

二、GET和POST请求的相同点

GET和POST请求本质上都是TCP链接，并没有差别

只是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中会体现出一些区别

三、GET和POST请求的区别

GET 和 POST 的核心区别在于它们的语义和用途不同。

1.GET请求

1. GET参数通过URL传递。
2. GET请求只能进行url编码。
3. 对参数的数据类型，GET只接受ASCII字符。
4. GET请求在URL中传送的参数是有长度限制的，而POST没有。
5. GET在浏览器回退时是无害的。
6. GET请求会被浏览器主动cache，因此适合用于请求不变的资源，如图片、静态文件等。
7. GET请求参数会被完整保留在浏览器历史记录里。
8. GET产生的URL地址可以被Bookmark，被收藏为书签，因此适合用于分享链接。
9. GET 请求用于获取资源，它是一种幂等的请求方式，即对于同一请求，多次执行会返回相同的结果，而且不会对服务器端的数据产生影响（没有副作用）。
10. GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

2.POST请求

1. POST的参数放在Request body中 。
2. POST支持多种编码方式。
3. POST对参数的数据类型没有限制。
4. POST请求的参数是有长度限制的。
5. POST在浏览器回退时会再次提交请求。
6. POST 请求不能被缓存，因此适合用于请求变化的资源。
7. POST中的参数不会被保留在浏览器历史记录里。
8. POST中的参数不会被保留，所以不可以被Bookmark。
9. POST 请求用于提交数据，它是一种非幂等的请求方式，即对于同一请求，多次执行可能会产生不同的结果，而且会对服务器端的数据产生影响（有副作用）。
10. POST 比 GET 安全，因为数据在地址栏上不可见，然而，从传输的角度来说，他们都是不安全的，因为 HTTP 在网络上是明文传输的，只要在网络节点上捉包，就能完整地获取数据报文，只有使用HTTPS才能加密安全。

三、HEAD请求

1.HEAD请求

HEAD 请求与 GET 请求类似，但是它只返回响应头部，而不返回响应体，因此可以用来获取服务器上的资源的元数据，如资源的大小、类型、修改时间等，而不需要获取实际的数据内容。
HEAD 请求通常用于检查资源是否存在、检查资源的更新时间、检查资源的大小等。

2.用 GET 模拟 HEAD 请求

const xhr = new XMLHttpRequest();
xhr.open('GET', `${url}`);
xhr.setRequestHeader('Accept', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
    console.log(xhr.getAllResponseHeaders());
    xhr.abort(); // 中止请求，不获取响应体
  }
}
xhr.send();

使用xhr.getAllResponseHeaders() 方法可以获取响应头部，当 xhr.readyState 为 XMLHttpRequest.HEADERS_RECEIVED 时表示已经接收到了响应头部，这个时候我们已经可以获取响应头部，并且中止请求，不获取响应体，以达到模拟 HEAD 请求的目的。

总结

以上就是我目前都GET、POST、HEAD请求的总结了，可能或多或少存在问题，请大佬们指正。