Javaweb笔记整理+图解——HTTP协议

一、HTTP协议

1、通俗讲解什么是HTTP协议

http协议（hypertext transfer Protocol）超文本传输协议，是浏览器服务器之间用于通信的一种规范。

我们在使用浏览器使用网页的时候，我们需要让浏览器发送一个请求，从而让远在天边的服务器给我们返回网页的资源。

打个比方，就好像我们饿了以后想要吃饭，然后我们告诉父母想要吃饭了，父母就会做好饭菜端到你面前。

这个过程就像浏览器和服务器之间发送的请求和响应一样，告诉父母我们需要吃饭是一个请求，而父母做饭的过程就像服务器对请求的处理，而父母把饭菜端到你面前就像是服务器给浏览器返回资源。

这个浏览器给服务器的请求就叫做http请求，而服务器返回的信息就是http响应。

那什么又是http协议呢？

我再来打个比方，现在你是一个小婴儿，与父母交流的信息就只是哇哇大哭，现在你饿了想要喝奶，那么你就只能哇哇大哭来告诉父母。但是父母这时候其实并不清楚你想要的东西是什么，所以就会一头雾水、手忙脚乱，不知道应该怎样处理。

产生上面问题的原因是婴儿和父母没有遵从同一个协议，婴儿听不懂父母的话，父母也不知道婴儿的需求。

所以可见，如果想要实现一个快速有效且安全的沟通，我们需要让沟通的双方遵从同样的规则。而这对于浏览器和服务器来说，这个规则，或者说协议，就是http协议。

http协议是TCP/IP协议的应用层中的一个协议。

2、直观看到HTTP请求和响应

我们使用tomcat在浏览器上请求一个静态页面，并在浏览器上抓包，让大家能够真切的看到http请求和响应的内容。

我们启动tomcat并按下ctrl+shift+i调出网页的开发页面：

然后我们打开test2.html页面，就可以看到有一个test2.html（也就是我们访问的页面）的数据

我们看一下它的请求：

还有响应：

可以看到这里有很多的参数，这些参数我们在下面一个一个讲。

3、浏览器请求web资源的时序图

二、HTTP请求

1、GET方式的HTTP请求

下面的代码使我们刚刚抓包的HTTP请求头的全部内容。

GET /tomcatTest/test/test2.html HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Connection: keep-alive
Cookie: JSESSIONID=7C7BE36C4ECC554F94A79986D19F6BC7; Idea-bcbd152e=62c29d66-b1df-435d-8450-b5482265598d; _xsrf=2|7d88c235|9a60e21911dc9210bc565c9a72fffbe8|1714894883; username-localhost-8888="2|1:0|10:1714897712|23:username-localhost-8888|44:N2VkNzQ0OTIxMTcxNGZlYjk3NTVjOTRiODg0OTgzZTA=|34dfec539be58068facdc3bafdb6a45dc543836a42e67d70d411ee4a253e9a23"
Host: localhost:9000
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0
sec-ch-ua: "Chromium";v="124", "Microsoft Edge";v="124", "Not-A.Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

HTTP请求分为HTTP请求头，HTTP请求行，和HTTP请求体。

HTTP请求行在HTTP请求的第一行，它包括HTTP请求的方式是get还是post，以及客户端向服务器请求的资源。

GET /tomcatTest/test/test2.html HTTP/1.1

HTTP请求头包括一系列信息，服务器可以根据这些信息来返回给浏览器对应的信息，从而让浏览器显示出对应的内容。

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Connection: keep-alive
Cookie: JSESSIONID=7C7BE36C4ECC554F94A79986D19F6BC7; Idea-bcbd152e=62c29d66-b1df-435d-8450-b5482265598d; _xsrf=2|7d88c235|9a60e21911dc9210bc565c9a72fffbe8|1714894883; username-localhost-8888="2|1:0|10:1714897712|23:username-localhost-8888|44:N2VkNzQ0OTIxMTcxNGZlYjk3NTVjOTRiODg0OTgzZTA=|34dfec539be58068facdc3bafdb6a45dc543836a42e67d70d411ee4a253e9a23"
Host: localhost:9000
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0
sec-ch-ua: "Chromium";v="124", "Microsoft Edge";v="124", "Not-A.Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

信息主要包含：

Host：服务器的主机（域名+端口号）

User-Agent：浏览器的信息，包括操作系统的版本、浏览器的类型和版本等。

Accept：浏览器可以接受的类型，如text/html，application/xhtml等

Accept-Language：可以接受的语言类型zh-CN、en-US等

Accept-Encoding：可以接受的压缩算法

Connection：连接类型是长连接还是短连接、一般表示长连接。

Cookie：浏览器发送给服务器的信息

2、POST方式的HTTP请求

从上面的请求头的我们就知道，本次http请求是一个get请求，我们这次换为post再试一次：

POST /tomcatTest/test3 HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cache-Control: max-age=0
Connection: keep-alive
Content-Length: 0
Content-Type: application/x-www-form-urlencoded
Cookie: JSESSIONID=7C7BE36C4ECC554F94A79986D19F6BC7; Idea-bcbd152e=62c29d66-b1df-435d-8450-b5482265598d; _xsrf=2|7d88c235|9a60e21911dc9210bc565c9a72fffbe8|1714894883; username-localhost-8888="2|1:0|10:1714897712|23:username-localhost-8888|44:N2VkNzQ0OTIxMTcxNGZlYjk3NTVjOTRiODg0OTgzZTA=|34dfec539be58068facdc3bafdb6a45dc543836a42e67d70d411ee4a253e9a23"
Host: localhost:9000
Origin: http://localhost:9000
Referer: http://localhost:9000/tomcatTest/test3.html
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0
sec-ch-ua: "Chromium";v="124", "Microsoft Edge";v="124", "Not-A.Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

POST请求中比get请求多了这些信息：

content-type：表示数据提交的格式

content-length:表示数据的大小 

Origin：表示主机是从哪个请求发送的（这里是演示所以使用了本机发送）

3、都有哪些是get和post请求？

get请求：

form标签指定method=“get”

a标签（超链接标签）

link标签引入css

Script标签引入js

img标签引入图片

iframe引入html页面

在浏览器地址栏输入后按回车键（常用）

post请求：

form标签 method=“post”

一般情况下，由于post请求的参数不会显示在浏览器的地址栏上，所以安全性需求较高的访问都是post请求，如登录、发帖、上传文件

4、get和post的用法区别

post在上面刚讲了比较安全，而get请求则会在浏览器地址栏上显示传递的参数，不安全。

post请求在数据量上没有限制，而get请求在数据量上有限制，所以如果数据量较大，选用post请求。

那什么时候使用get请求？

在浏览器搜索和查询网页数据时，或者分享一个页面时，往往会使用到get请求。

而在数据修改、数据增加删除时，则要使用POST。

三、HTTP响应

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Accept-Ranges: bytes
ETag: W/"153-1714032186600"
Last-Modified: Thu, 25 Apr 2024 08:03:06 GMT
Content-Type: text/html
Content-Length: 153
Date: Mon, 06 May 2024 11:13:41 GMT

分为响应行、响应头和响应体。

响应行中有http协议的版本，以及当前响应的状态码和状态码的状态。如：200 OK

响应头中的信息和http请求头中的信息部分重复，但也有不同的内容：

Server：表示服务器相关信息

Accept-ranges：bytes 表示支持断点

ETag：这是一个资源的标识，一个资源有唯一的ETag

Last-Modified：表示最后一次修改的时间，用于判断是否需要根据最新的资源更新。

Content-Type：传输资源的类型

Content-Length：传输资源的大小是多少字节

Date：传输的时间

响应体中就是传输的资源，如果是一个text/html类型的资源，那么响应体的内容就是这个html文本。

响应体我们在抓包的过程中是看不到的，但是可以说，响应体的内容就是我们在tomcat中的哪个html内容加在了响应头的后面。

四、常见状态码

200：表示成功

302：资源改变，已经被重新定向

304：可以理解为第一次访问资源后，第二次访问资源时，由于该资源没有被修改，所以浏览器直接返回浏览器的缓存中的资源即可。

404：未找到资源

500：服务器内部错误，通常是java代码有异常。