【HTTP】《HTTP 全原理解析：从请求到响应的奇妙之旅》

文章目录

[一、HTTP 协议](#一、HTTP 协议)
- [1.1、HTTP 是什么](#1.1、HTTP 是什么)
- 1.2、理解 "应用层协议"
- [1.3、理解 HTTP 协议的工作过程](#1.3、理解 HTTP 协议的工作过程)
- 1.4、HTTP协议格式
- 1.5、协议格式总结
[二、HTTP 请求](#二、HTTP 请求)
- [1.1、认识 URL](#1.1、认识 URL)
- - [1.1.1、URL 基本格式](#1.1.1、URL 基本格式)
  - [1.1.2、关于 URL encode](#1.1.2、关于 URL encode)
- 1.2、认识 "方法"
- - [1.2.1 、GET 方法](#1.2.1 、GET 方法)
  - [1.2.2、 POST 方法](#1.2.2、 POST 方法)
  - 1.2.3、其他方法
- 1.3、认识请求 "报头"
- [1.4、认识请求 "正文" (body)](#1.4、认识请求 "正文" (body))
[三、HTTP 响应详解](#三、HTTP 响应详解)
- 1.1、认识 "状态码"
- - [1.1.1、200 OK](#1.1.1、200 OK)
  - [1.1.2、404 Not Found](#1.1.2、404 Not Found)
  - [1.1.3、403 Forbidden](#1.1.3、403 Forbidden)
  - [1.1.4、405 Method Not Allowed](#1.1.4、405 Method Not Allowed)
  - [1.1.5、500 Internal Server Error](#1.1.5、500 Internal Server Error)
  - [1.1.6、504 Gateway Timeout](#1.1.6、504 Gateway Timeout)
  - [1.1.7、302 Move temporarily](#1.1.7、302 Move temporarily)
  - [1.1.8、301 Moved Permanently](#1.1.8、301 Moved Permanently)
  - 1.1.9、状态码小结
- 2.1、认识响应 "报头"
- [3.1、通过 form 表单构造 HTTP 请求](#3.1、通过 form 表单构造 HTTP 请求)
- - [form 发送 GET 请求](#form 发送 GET 请求)
  - [form 发送 POST 请求](#form 发送 POST 请求)
  - [通过 ajax 构造 HTTP 请求](#通过 ajax 构造 HTTP 请求)
  - [封装 ajax 方法](#封装 ajax 方法)
四、结语

一、HTTP 协议

1.1、HTTP 是什么

HTTP 是什么？

HTTP (全称为 "超文本传输协议") 是一种应用非常广泛的应用层协议。

HTTP 往往是基于传输层的 TCP 协议实现的. (HTTP1.0, HTTP1.1, HTTP2.0 均为TCP, HTTP3 基于 UDP 实现)

我们平时打开一个网站, 就是通过 HTTP 协议来传输数据的.

当我们在浏览器中输入一个搜狗搜索的 "网址" (URL) 时, 浏览器就给搜狗的服务器发送了一个 HTTP 请求, 搜狗的服务器返回了一个 HTTP 响应.

这个响应结果被浏览器解析之后, 就展示成我们看到的页面内容. (这个过程中浏览器可能会给服务器发送

多个 HTTP 请求, 服务器会对应返回多个响应, 这些响应里就包含了页面 HTML, CSS, JavaScript, 图片, 字

体等信息)

所谓 "超文本" 的含义, 就是传输的内容不仅仅是文本(比如 html, css 这个就是文本), 还可以是一些其他的资源, 比如图片, 视频, 音频等二进制的数据.

1.2、理解 "应用层协议"

我们 TCP/IP , 已经知道目前数据能从客户端进程经过路径选择跨网络传送到服务器端进程[ IP+Port ]. 可是，仅仅把数据从A点传送到B点就完了吗？

这就好比，在淘宝上买了一部手机，卖家[ 客户端 ]把手机通过顺丰[ 传送+路径选择 ] 送到买家 [ 服务器 ] 手里就完了吗？

当然不是，买家还要使用这款产品，还要在使用之后，给卖家打分评论。

所以，我们把数据从A端传送到B端， TCP/IP 解决的是顺丰的功能，而两端还要对数据进行加工处理或者使用，所以我们还需要一层协议，不关心通信细节，关心应用细节！

这层协议叫做应用层协议。而应用是有不同的场景的，所以应用层协议是有不同种类的，其中经典协议之一的HTTP就是其中的佼佼者

1.3、理解 HTTP 协议的工作过程

当我们在浏览器中输入一个 "网址", 此时浏览器就会给对应的服务器发送一个 HTTP 请求. 对方服务器收到这个请求之后, 经过计算处理, 就会返回一个 HTTP 响应.

事实上, 当我们访问一个网站的时候, 可能涉及不止一次的 HTTP 请求/响应的交互过程.

可以通过 chrome 的开发者工具观察到这个详细的过程.

通过 F12 打开 chrome 的开发者工具, 切换到 Network 标签页. 然后刷新页面即可看到如下图效

果. 每一条记录都是一次 HTTP 请求/响应

1.4、HTTP协议格式

HTTP 是一个文本格式的协议. 可以通过 Chrome 开发者工具或者 Fiddler 抓包, 分析 HTTP 请求/响应的细节

我们通过抓包可以得到如下结果：

HTTP请求：

首行: [方法] + [url] + [版本]

Header: 请求的属性, 冒号分割的键值对;每组属性之间使用\n分隔;遇到空行表示Header部分结束

Body: 空行后面的内容都是Body. Body允许为空字符串. 如果Body存在, 则在Header中会有一个Content-Length属性来标识Body的长度;

HTTP响应：

首行: [版本号] + [状态码] + [状态码解释]

Header: 请求的属性, 冒号分割的键值对;每组属性之间使用\n分隔;遇到空行表示Header部分结束

Body: 空行后面的内容都是Body. Body允许为空字符串. 如果Body存在, 则在Header中会有一个Content-Length属性来标识Body的长度; 如果服务器返回了一个html页面, 那么html页面内容就是在body中.

1.5、协议格式总结

思考问题: 为什么 HTTP 报文中要存在 "空行"?

因为 HTTP 协议并没有规定报头部分的键值对有多少个. 空行就相当于是 "报头的结束标记", 或者是 "报头和正文之间的分隔符".

HTTP 在传输层依赖 TCP 协议, TCP 是面向字节流的. 如果没有这个空行, 就会出现 "粘包问题".

二、HTTP 请求

1.1、认识 URL

1.1.1、URL 基本格式

平时我们俗称的 "网址" 其实就是说的 URL (Uniform Resource Locator 统一资源定位符). 互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它.

一个具体的 URL:

https://v.bitedu.vip/personInf/student?userId=10000\&classId=100

可以看到, 在这个 URL 中有些信息被省略了.

https : 协议方案名. 常见的有 http 和 https, 也有其他的类型. (例如访问 mysql 时用的jdbc:mysql )

user:pass : 登陆信息. 现在的网站进行身份认证一般不再通过 URL 进行了. 一般都会省略

v.bitedu.vip : 服务器地址. 此处是一个 "域名", 域名会通过 DNS 系统解析成一个具体的 IP 地址. (通过 ping 命令可以看到, v.bitedu.vip 的真实 IP 地址为 118.24.113.28 )

端口号: 上面的 URL 中端口号被省略了. 当端口号省略的时候, 浏览器会根据协议类型自动决定使用哪个端口. 例如 http 协议默认使用 0 端口, https 协议默认使用 443 端口.

/personInf/student : 带层次的文件路径.

userId=10000&classId=100 : 查询字符串(query string). 本质是一个键值对结构. 键值对之间使用& 分隔. 键和值之间使用 = 分隔.

片段标识: 此 URL 中省略了片段标识. 片段标识主要用于页面内跳转.

关于 query string

query string 中的内容是键值对结构. 其中的 key 和 value 的取值和个数, 完全都是程序猿自己约定的. 我们可以通过这样的方式来自定制传输我们需要的信息给服务器.
URL 中的可省略部分

协议名: 可以省略, 省略后默认为 http://ip 地址 / 域名: 在 HTML 中可以省略(比如 img, link, script, a 标签的 src 或者 href 属性). 省略后表示服务器的 ip / 域名与当前 HTML 所属的 ip / 域名一致.

端口号: 可以省略. 省略后如果是 http 协议, 端口号自动设为 80; 如果是 https 协议, 端口号自动设为 443.

带层次的文件路径: 可以省略. 省略后相当于 / . 有些服务器会在发现 / 路径的时候自动访问/index.html

查询字符串: 可以省略

片段标识: 可以省略

1.1.2、关于 URL encode

像 / ? : 等这样的字符, 已经被url当做特殊意义理解了. 因此这些字符不能随意出现.

比如, 某个参数中需要带有这些特殊字符, 就必须先对特殊字符进行转义.

一个中文字符由 UTF-8 或者 GBK 这样的编码方式构成, 虽然在 URL 中没有特殊含义, 但是仍然需要进行转义. 否则浏览器可能把 UTF-8/GBK 编码中的某个字节当做 URL 中的特殊符号.

转义的规则如下: 将需要转码的字符转为16进制，然后从右到左，取4位(不足4位直接处理)，每2位做一位，前面加上%，编码成%XY格式

例如:

"+" 被转义成了 "%2B" 。urldecode就是urlencode的逆过程;

1.2、认识 "方法"

1.2.1 、GET 方法

GET 是最常用的 HTTP 方法. 常用于获取服务器上的某个资源. 在浏览器中直接输入 URL, 此时浏览器就会发送出一个 GET 请求. 另外, HTML 中的 link, img, script 等标签, 也会触发 GET 请求.

使用 Fiddler 观察 GET 请求

GET https://www.sogou.com/ HTTP/1.1

Host: www.sogou.com

Connection: keep-alive

Cache-Control: max-age=0

sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"

sec-ch-ua-mobile: ?0

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,

like Gecko) Chrome/91.0.4472.77 Safari/537.36

Accept:

text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,imag

e/apng,/ ;q=0.8,application/signed-exchange;v=b3;q=0.9

Sec-Fetch-Site: none

Sec-Fetch-Mode: navigate

Sec-Fetch-User: ?1

Sec-Fetch-Dest: document

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

Cookie: SUID=19AA8B7B6E1CA00A000000005F9A2F76; SUV=1603940214073598;

pgv_pvi=2668946432; usid=dSCf7rQCZRKIwksQ; CXID=4E2782F970F4344A90D6ED6240646C87;

ssuid=8088681888; wuid=AAG3v2WvMgAAAAqgFXQrvAAAkwA=; IPLOC=CN6101;

ABTEST=0|1620624968|v17; cd=1620907362&1c2f143be7a26fba5e494f96ebd8f163;

browerV=3; osV=1; sw_uuid=5799772160;

ad=@c$ookllll2kHAPdlllllpjL341llllltYvGDlllll9llllllylll5@@@@@@@@@@;

SNUID=D6B644B4CECB0AF639BBE267CF3AB1AD; taspeed=taspeedexist; sst0=13;

ld=Lkllllllll2kmmNTlllllpjM@rwlllllNSzaekllllGllllljllll5@@@@@@@@@@

GET 请求的特点：

首行的第一部分为 GET

URL 的 query string 可以为空, 也可以不为空.

header 部分有若干个键值对结构.

body 部分为空.

1.2.2、 POST 方法

POST 方法也是一种常见的方法. 多用于提交用户输入的数据给服务器(例如登陆页面).

通过 HTML 中的 form 标签可以构造 POST 请求, 或者使用 JavaScript 的 ajax 也可以构造 POST 请求

同样使用抓包可以获取post请求，我们抓取gitee登录时的POST请求。我们可以发现：

POST https://gitee.com/login HTTP/1.1

Host: gitee.com

Connection: keep-alive

Content-Length: 443

Cache-Control: max-age=0

sec-ch-ua: "Chromium";v="136", "Microsoft Edge";v="136", "Not.A/Brand";v="99"

sec-ch-ua-mobile: ?0

sec-ch-ua-platform: "Windows"

Origin: https://gitee.com

Content-Type: application/x-www-form-urlencoded

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36 Edg/136.0.0.0

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

Sec-Fetch-Site: same-origin

Sec-Fetch-Mode: navigate

Sec-Fetch-User: ?1

Sec-Fetch-Dest: document

Referer: https://gitee.com/login?redirect_to_url=%2F

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

Cookie: sensorsdata2015jssdkchannel=%7B%22prop%22%3A%7B%22_sa_channel_landing_url%22%3A%22%22%7D%7D; user_locale=zh-CN; oschina_new_user=false; yp_riddler_id=a0ee7bce-9be2-4905-b3c4-72b078212a04; close_wechat_tour=true; remote_way=http; remove_bulletin=gitee-maintain-1726637804; sensorsdata2015jssdkcross=%7B%22distinct_id%22%3A%2214790680%22%2C%22first_id%22%3A%221924d2a241f1fc2-077ed2d70dd6004-4c657b58-1638720-1924d2a242033cd%22%2C%22props%22%3A%7B%22%24latest_traffic_source_type%22%3A%22%E7%9B%B4%E6%8E%A5%E6%B5%81%E9%87%8F%22%2C%22%24latest_search_keyword%22%3A%22%E6%9C%AA%E5%8F%96%E5%88%B0%E5%80%BC_%E7%9B%B4%E6%8E%A5%E6%89%93%E5%BC%80%22%2C%22%24latest_referrer%22%3A%22%22%7D%2C%22identities%22%3A%22eyIkaWRlbnRpdHlfY29va2llX2lkIjoiMTkxNGMwNzg3ZWIxZTUtMDVlNDFlMGY0ZjkyZmY4LTRjNjU3YjU4LTE2Mzg3MjAtMTkxNGMwNzg3ZWMxODM1IiwiJGlkZW50aXR5X2xvZ2luX2lkIjoiMTQ3OTA2ODAifQ%3D%3D%22%2C%22history_login_id%22%3A%7B%22name%22%3A%22%24identity_login_id%22%2C%22value%22%3A%2214790680%22%7D%2C%22%24device_id%22%3A%221914c0787eb1e5-05e41e0f4f92ff8-4c657b58-1638720-1914c0787ec1835%22%7D; visit-gitee--2025-03-21=1; BEC=1f1759df3ccd099821dcf0da6feb0357; sl-session=f0cHaBPHHGg/z1LUfgd87w==; Hm_lvt_24f17767262929947cc3631f99bfd274=1746277561,1746540565,1746540791,1746630039; HMACCOUNT=477900F79D5E3C5A; tz=Etc%2FGMT-8; csrf_token=5qzyOQMEYWF0Y3pALEopY7890fAnXwU1bYKV2VIpe7ixfqBzAHgl3oPDt6Si8NIWDP26VkHuj52UfjvrYBAxJQ%3D%3D; user_return_to_0=%2F; Hm_lpvt_24f17767262929947cc3631f99bfd274=1746630268; gitee-session-n=akNJZi8vbWM2aXk2eWcvVE5CZWdlbTlHRzBWc2RQam5RNnV2eFlpTW5Pdk13cDVYd3l2Nko2MStpTXFLUm5QaFBqazRpT3VVOHhpMUdTOXNXS0ZYSjlMdmtyS05iZ2NqckhYWHFmOVdIYW1sVmhRZi9vQXZpRDJ3Y3ZPNjV0WEZRSU1oeUd0OXh4Q0hTQVNEbmw5N0tPMktsWnFuYmFmNm5DdHJBa3J0SUhKTzRLWHJyUzZXcXp0Y0hOQmpTM0FSblpzdC83UFF5U0l5alpiSGcvejM2ZElMeE03MFU5ZjJESVR1SThyUG80MFdsbzVKK1RnM1crdHQ3VTE5RVlMUWVsWjgrQmNiOGU5ek5jNVExRjc3QzhlMDJUeUJGVXE1aG9EWXZlWmZVWWZiaHFTdUZWNWhFSWFyK0RSV2hHS2R2NWFVd1ROWSszVVRINzk1emhXaGdlaHlHdjNPZ1h3VFY1ZDcvVFRWQnFuVEE2eEVQYzBFM2ZEbWNndHBZek5ydWN3ZDkyZGFPQTFoQTJLaE0rb0RNYURSY1ViTGVMazFCMXVHeFlrSHZpRVk2czViNFllRXI3bWwzNXcvZGYwYW9acVJDSG01a3ZEMWtCNmtlRW9kR1RzSkVXT2RYVFRxV1I2YmN0UktRaFhqWnVXYWd0Rkk4K1M3RUQ4QzdNY2ZFWGNvcWQwNzdEd3RqcTVjZTk3RU01OGY3M1Fvc3hhcnJTbEw0bTJERTliWjlDNk1NS1JvWlhDSFhpVTBQZmFLLS1ScnFTSExPZ3ZVME1mbHdjQVdlc1FBPT0%3D--0223514fdc55d0b56f81273e1730b78dfa4045f7

encrypt_key=password&utf8=%E2%9C%93&authenticity_token=YqzjkgvTjq4EJKrdVMlNxecS6EdtbPc660K6gfCwbvY1frHYCK%2FKEfOEZznac7awVNKD4QvdfZISvhSzwokkaw%3D%3D&redirect_to_url=%2F&user%5Blogin%5D=19133964605&encrypt_data%5Buser%5Bpassword%5D%5D=HcTWwUC1B%2F8EMVlFf3MVBVjINuCLB%2FZc5WbLtj15yMDhto1ZL2iID%2BL3Zxk%2B1uzofwRoz5KsmZ8aAQ89NGPKmd698u1fOiCRLHwgo7HbiqCpeqAMaP1c0EnYbLO6Tdu%2FNllvGLqhopZfIbpDN7SYq1DVNvCbVq6c7dH2JPgxIwo%3D&user%5Bremember_me%5D=0

POST 请求的特点：

首行的第一部分为 POST

URL 的 query string 一般为空 (也可以不为空)

header 部分有若干个键值对结构.

body 部分一般不为空. body 内的数据格式通过 header 中的 Content-Type 指定.

body 的长度由 header 中的 Content-Length 指定.

经典面试题：谈谈 GET 和 POST 的区别

语义不同: GET 一般用于获取数据, POST 一般用于提交数据.

GET 的 body 一般为空, 需要传递的数据通过 query string 传递, POST 的 query string 一般为空, 需要传递的数据通过 body 传递

GET 请求一般是幂等的, POST 请求一般是不幂等的. (如果多次请求得到的结果一样, 就视为请求是幂等的).

GET 可以被缓存, POST 不能被缓存. (这一点也是承接幂等性).

补充说明:

关于语义: GET 完全可以用于提交数据, POST 也完全可以用于获取数据.

关于幂等性: 标准建议 GET 实现为幂等的. 实际开发中 GET 也不必完全遵守这个规则(主流网站都有 "猜你喜欢" 功能, 会根据用户的历史行为实时更新现有的结果.

关于安全性: 有些资料上说 "POST 比 GET 请安全". 这样的说法是不科学的. 是否安全取决于前端在传输密码等敏感信息时是否进行加密, 和 GET POST 无关.

关于传输数据量: 有的资料上说 "GET 传输的数据量小, POST 传输数据量大". 这个也是不科学的, 标准没有规定 GET 的 URL 的长度, 也没有规定 POST 的 body 的长度. 传输数据量多少, 完全取决于不同浏览器和不同服务器之间的实现区别.

关于传输数据类型: 有的资料上说 "GET 只能传输文本数据, POST 可以传输二进制数据". 这个也是不科学的. GET 的 query string 虽然无法直接传输二进制数据, 但是可以针对二进制数据进行 url encode.

1.2.3、其他方法

PUT 与 POST 相似，只是具有幂等特性，一般用于更新DELETE 删除服务器指定资源

OPTIONS 返回服务器所支持的请求方法

HEAD 类似于GET，只不过响应体不返回，只返回响应头

TRACE 回显服务器端收到的请求，测试的时候会用到这个

CONNECT 预留，暂无使用

这些方法的 HTTP 请求可以使用 ajax 来构造. (也可以通过一些第三方工具）

任何一个能进行网络编程的语言都可以构造 HTTP 请求. 本质上就是通过 TCP socket 写入一个符合 HTTP 协议规则的字符串

1.3、认识请求 "报头"

header 的整体的格式也是 "键值对" 结构. 每个键值对占一行. 键和值之间使用分号分割.

报头的种类有很多种，此处我们介绍几个常见的.

Host:

表示服务器主机的地址和端口.

Content-Length:

表示 body 中的数据长度.

Content-Type:

表示请求的 body 中的数据格式.

常见选项:

application/x-www-form-urlencoded: form 表单提交的数据格式. 此时 body 的格式形如: title=test&content=hello
multipart/form-data: form 表单提交的数据格式(在 form 标签中加上enctyped="multipart/form-data" . 通常用于提交图片/文件. body 格式形如:

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA

Content-Disposition: form-data; name="text"

title

------WebKitFormBoundaryrGKCBY7qhFd3TrwA

Content-Disposition: form-data; name="file"; filename="chrome.png"

Content-Type: image/png

PNG ... content of chrome.png ...

------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

application/json: 数据为 json 格式. body 格式形如:

{"username":"123456789","password":"xxxx","code":"jw7l","uuid":"d110a05ccde64b16a861fa2bddfdcd15"}

User-Agent (简称 UA)：

表示浏览器/操作系统的属性. 形如

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/91.0.4472.77 Safari/537.36

其中 Windows NT 10.0; Win64; x64 表示操作系统信息

AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36 表示浏览器信

息

Referer：

表示这个页面是从哪个页面跳转过来的. 形如

https://gitee.com/login?redirect_to_url=%2F

如果直接在浏览器中输入URL, 或者直接通过收藏夹访问页面时是没有 Referer 的.

Cookie：

Cookie 中存储了一个字符串, 这个数据可能是客户端(网页)自行通过 JS 写入的, 也可能来自于服务器(服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据). 往往可以通过这个字段实现 "身份标识" 的功能.

可以通过抓包观察页面登陆的过程(以码云为例):

清除之前的 cookie
为了方便观察, 先清除掉之前登陆的 cookie
在码云页面上, 点击 url 左侧的图标, 选择 Cookie

然后移除已经存在的 Cookie
登陆操作
登陆请求：

POST https://gitee.com/login HTTP/1.1

Host: gitee.com

Connection: keep-alive

Content-Length: 394

Cache-Control: max-age=0

sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"

sec-ch-ua-mobile: ?0

Upgrade-Insecure-Requests: 1

Origin: https://gitee.com

Content-Type: application/x-www-form-urlencoded

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,

like Gecko) Chrome/91.0.4472.101 Safari/537.36

Accept:

text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,imag

e/apng,/ ;q=0.8,application/signed-exchange;v=b3;q=0.9

Sec-Fetch-Site: same-origin

Sec-Fetch-Mode: navigate

Sec-Fetch-User: ?1

Sec-Fetch-Dest: document

Referer: https://gitee.com/login

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

encrypt_key=password&utf8=%E2%9C%93&authenticity_token=36ZqO9tglSN6EB6pF6f2Gt%2B

dalgkbpTDUsJC5OER7w8%3D&redirect_to_url=%2FHGtz2222&user%5Blogin%5D=HGtz2222&enc

rypt_data%5Buser%5Bpassword%5D%5D=Hy2gjJ60312Ss12jSe21GMLPEb766tAhCygL281FLRMpiz

xJVaWGOPlQF7lZhelab1HS2vBiwfBo5C7BnR5ospoBiK1hR6jNXv1lesaYifv9dP1iRC6ozLLMszo%2F

aRh5j5DeYRyKcE0QJjXRGEDg4emXEK1LHVY4M1uqzFS0W58%3D&user%5Bremember_me%5D=0

登陆响应：

HTTP/1.1 302 Found

Date: Thu, 10 Jun 2021 04:15:58 GMT

Content-Type: text/html; charset=utf-8

Connection: keep-alive

Keep-Alive: timeout=60

Server: nginx

X-XSS-Protection: 1; mode=block

X-Content-Type-Options: nosniff

X-UA-Compatible: chrome=1

Expires: Sun, 1 Jan 2000 01:00:00 GMT

Pragma: must-revalidate, no-cache, private

Location: https://gitee.com/HGtz2222

Cache-Control: no-cache

Set-Cookie: oschina_new_user=false; path=/; expires=Mon, 10 Jun 2041 04:16:00

-0000

Set-Cookie: gitee_user=true; path=/

Set-Cookie: gitee-sessionn=M1Rhbk1QUUxQdWk1VEZVQ1BvZXYybG13ZUJFNGR1V0pSYTZyTllEa21pVHlBUE5QU2Qwdk44NXdEam

11T3FZYXFidGNYaFJxcTVDRE1xU05GUXN0ek1Uc08reXRTay9ueTV3OGl5bTdzVGJjU1lUbTJ4bTUvN1

l3RFl4N2hNQmI1SEZpdmVJWStETlJrdWtyU0lDckhvSGJHc3NEZDFWdHc5cjdHaGVtNThNcEVOeFZlaH

c0WVY5NGUzWjc2cjdOcCtSdVJ0VndzdVNxb3dHK1hPSDBDSFB6WlZDc3prUVZ2RVJyTnpTb1c4aFg1Mm

UxM1YvQTFkb1EwaU4zT3hJcmRrS3dxVFZJNXoxaVJwa1liMlplbWR5QXQxY0lvUDNic1hxN2o0WDg1Wk

E9LS10N0VIYXg4Vm5xdllHVzdxa0VlUEp3PT0%3D-

-2f6a24f8d33929fe88ed19d4dea495fbb40ebed6; domain=.gitee.com; path=/; HttpOnly

X-Request-Id: 77f12d095edc98fab27d040a861f63b1

X-Runtime: 0.166621

Content-Length: 92You are being redirected.

可以看到, 响应中包含了 3 个 Set-Cookie 属性.

其中我们重点关注第三个. 里面包含了一个 gitee-session-n 这样的属性, 属性值是一串很长的加密之后的信息. 这个信息就是用户当前登陆的身份标识. 也称为 "令牌(token)

访问其他页面
登陆成功之后, 此时可以看到后续访问码云的其他页面(比如个人主页), 请求中就都会带着刚才获取到的Cookie 信息

GET https://gitee.com/HGtz2222 HTTP/1.1

Host: gitee.com

Connection: keep-alive

Cache-Control: max-age=0

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,

like Gecko) Chrome/91.0.4472.101 Safari/537.36

Accept:

text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,imag

e/apng,/ ;q=0.8,application/signed-exchange;v=b3;q=0.9

Sec-Fetch-Site: same-origin

Sec-Fetch-Mode: navigate

Sec-Fetch-User: ?1

Sec-Fetch-Dest: document

sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"

sec-ch-ua-mobile: ?0

Referer: https://gitee.com/login

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

Cookie: oschina_new_user=false; user_locale=zh-CN; yp_riddler_id=1ce4a551-a160-

4358-aa73-472762c79dc0; visit-gitee--2021-05-06%2010%3A12%3A24%20%2B0800=1;

sensorsdata2015jssdkcross=%7B%22distinct_id%22%3A%22726826%22%2C%22first_id%22%3

A%22175869ba5888b6-0ea2311dc53295-303464-2073600-

175869ba5899ac%22%2C%22props%22%3A%7B%22%24latest_traffic_source_type%22%3A%22%E

7%9B%B4%E6%8E%A5%E6%B5%81%E9%87%8F%22%2C%22%24latest_search_keyword%22%3A%22%E6%

9C%AA%E5%8F%96%E5%88%B0%E5%80%BC_%E7%9B%B4%E6%8E%A5%E6%89%93%E5%BC%80%22%2C%22%2

4latest_referrer%22%3A%22%22%7D%2C%22%24device_id%22%3A%22175869ba5888b6-

0ea2311dc53295-303464-2073600-175869ba5899ac%22%7D; remote_way=svn;

tz=Asia%2FShanghai;

Hm_lvt_24f17767262929947cc3631f99bfd274=1622637014,1622712683,1622863899,1623298

442; Hm_lpvt_24f17767262929947cc3631f99bfd274=1623298550; gitee_user=true; giteesessionn=M1Rhbk1QUUxQdWk1VEZVQ1BvZXYybG13ZUJFNGR1V0pSYTZyTllEa21pVHlBUE5QU2Qwdk44NXdEam

11T3FZYXFidGNYaFJxcTVDRE1xU05GUXN0ek1Uc08reXRTay9ueTV3OGl5bTdzVGJjU1lUbTJ4bTUvN1

l3RFl4N2hNQmI1SEZpdmVJWStETlJrdWtyU0lDckhvSGJHc3NEZDFWdHc5cjdHaGVtNThNcEVOeFZlaH

c0WVY5NGUzWjc2cjdOcCtSdVJ0VndzdVNxb3dHK1hPSDBDSFB6WlZDc3prUVZ2RVJyTnpTb1c4aFg1Mm

UxM1YvQTFkb1EwaU4zT3hJcmRrS3dxVFZJNXoxaVJwa1liMlplbWR5QXQxY0lvUDNic1hxN2o0WDg1Wk

E9LS10N0VIYXg4Vm5xdllHVzdxa0VlUEp3PT0%3D-

-2f6a24f8d33929fe88ed19d4dea495fbb40ebed6

请求你中的 Cookie 字段也包含了一个 gitee-session-n 属性, 里面的值和刚才服务器返回的值相同. 后续只要访问 gitee 这个网站, 就会一直带着这个令牌, 直到令牌过期/下次重新登陆

理解登陆过程：

1.4、认识请求 "正文" (body)

正文中的内容格式和 header 中的 Content-Type 密切相关. 上面也罗列了三种常见的情况. 下面可以通过抓包来观察这几种情况：

application/x-www-form-urlencoded

avatar=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAPgAAAD4CAYAAADB0SsLAAAg-...

实际的抓包结果比较长, 此处没有全部贴出.

multipart/form-data

------WebKitFormBoundary8d5Rp4eJgrUSS3wT

Content-Disposition: form-data; name="file"; filename="李星亚 Java开发工程师.pdf"

Content-Type: application/pdf

%PDF-1.7

%³

1 0 obj

<</Names <</Dests 4 0 R>> /Outlines 5 0 R /Pages 2 0 R /Type /Catalog>>

endobj

3 0 obj

<</Author ( N v~N•) /Comments () /Company () /CreationDate

(D:20201122145133+06'51') /Creator ( W P S e [W) /Keywords () /ModDate

(D:20201122145133+06'51') /Producer () /SourceModified (D:20201122145133+06'51')

/Subject () /Title () /Trapped /False>>

endobj

13 0 obj

<</AIS false /BM /Normal /CA 1 /Type /ExtGState /ca 1>>

endobj

实际的抓包结果比较长, 此处没有全部贴出.

application/json

{"username":"123456789","password":"xxxx","code":"u58u","uuid":"9bd8e09ea27b48cd

acc6a6bc41d9f462"}

以上是三种 Content-Type所抓取的正文部分。

三、HTTP 响应详解

1.1、认识 "状态码"

状态码表示访问一个页面的结果. (是访问成功, 还是失败, 还是其他的一些情况...).

以下为常见的状态码

1.1.1、200 OK

这是一个最常见的状态码, 表示访问成功.

抓包抓到的大部分结果都是 200

例如访问搜狗主页

HTTP/1.1 200 OK

Server: nginx

Date: Thu, 10 Jun 2021 06:07:27 GMT

Content-Type: text/html; charset=utf-8

Connection: keep-alive

Vary: Accept-Encoding

Set-Cookie: black_passportid=; path=/; expires=Thu, 01 Jan 1970 00:00:00

GMT; domain=.sogou.com

Pragma: No-cache

Cache-Control: max-age=0

Expires: Thu, 10 Jun 2021 06:07:27 GMT

UUID: 80022370-065c-49b0-a970-31bc467ff244

Content-Length: 14805

注意: 在抓包观察响应数据的时候, 可能会看到压缩之后的数据, 形如：

网络传输中 "带宽" 是一个稀缺资源, 为了传输效率更高往往会对数据进行压缩.

1.1.2、404 Not Found

没有找到资源.

浏览器输入一个 URL, 目的就是为了访问对方服务器上的一个资源. 如果这个 URL 标识的资源不存在, 那么就会出现 404

例如, 在浏览器中输入 www.sogou.com/index.html , 此时就在尝试访问 sogou 上的/index.html 这个资源.

如果输入正确, 则可以正确访问到. 但是如果输入错误, 比如 www.sogou.com/index2.html , 就会看到 404 这样的响应.

HTTP/1.1 404 Not Found

Server: nginx

Date: Thu, 10 Jun 2021 05:19:04 GMT

Content-Type: text/html

Connection: keep-alive

Vary: Accept-Encoding

Content-Length: 564

1.1.3、403 Forbidden

表示访问被拒绝. 有的页面通常需要用户具有一定的权限才能访问(登陆后才能访问). 如果用户没有登陆直接访问, 就容易见到 403.

例如: 查看码云的私有仓库, 如果不登陆, 就会出现 403.

1.1.4、405 Method Not Allowed

前面我们已经学习了 HTTP 中所支持的方法, 有 GET, POST, PUT, DELETE 等.

但是对方的服务器不一定都支持所有的方法(或者不允许用户使用一些其他的方法)会出现这样的警告

1.1.5、500 Internal Server Error

服务器出现内部错误. 一般是服务器的代码执行过程中遇到了一些特殊情况(服务器异常崩溃)会产生这个状态码.

1.1.6、504 Gateway Timeout

当服务器负载比较大的时候, 服务器处理单条请求的时候消耗的时间就会很长, 就可能会导致出现超时的

情况.

1.1.7、302 Move temporarily

临时重定向.

理解 "重定向"

就相当于手机号码中的 "呼叫转移" 功能.

比如我本来的手机号是 186-1234-5678, 后来换了个新号码 135-1234-5678, 那么不需要让我的朋友知道新号码,

只要我去办理一个呼叫转移业务, 其他人拨打 186-1234-5678 , 就会自动转移到 135-1234-5678 上

在登陆页面中经常会见到 302. 用于实现登陆成功后自动跳转到主页. 响应报文的 header 部分会包含一个 Location 字段, 表示要跳转到哪个页面.

1.1.8、301 Moved Permanently

永久重定向. 当浏览器收到这种响应时, 后续的请求都会被自动改成新的地址. 301 也是通过 Location 字段来表示要重定向到的新地址.

1.1.9、状态码小结

2.1、认识响应 "报头"

响应报头的基本格式和请求报头的格式基本一致.

类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义一致.

Content-Type

响应中的 Content-Type 常见取值有以下几种:

text/html : body 数据格式是 HTML
text/css : body 数据格式是 CSS
application/javascript : body 数据格式是 JavaScript
application/json : body 数据格式是 JSON

认识响应 "正文" (body)：

正文的具体格式取决于 Content-Type. 观察上面几个抓包结果中的响应部分.

text/html

#app {

height: 100%;

margin: 0px;

padding: 0px;

}

.chromeframe {

margin: 0.2em 0;

background: #ccc;

color: #000;

padding: 0.2em 0;

}

#loader-wrapper {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 999999;

}

...

text/css

@font-face{font-family:element-icons;src:url(.../.../static/fonts/elementicons.535877f5.woff) format("woff"),url(.../.../static/fonts/elementicons.732389de.ttf) format("truetype");font-weight:400;font-style:normal}
$class\*=" el-icon-"\], ...$

application/javascript

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["app"],{0:function(t,e,n){t.exports=n("56d7")},"00b3":function(t,e,n){},"

...

application/json

{"msg":"操作成功","code":200,"permissions":[] }

3.1、通过 form 表单构造 HTTP 请求

form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求.

form 发送 GET 请求

form 的重要参数:

action: 构造的 HTTP 请求的 URL 是什么.

method: 构造的 HTTP 请求的方法是 GET 还是 POST (form 只支持 GET 和 POST).

input 的重要参数:

type: 表示输入框的类型. text 表示文本, password 表示密码, submit 表示提交按钮.
name: 表示构造出的 HTTP 请求的 query string 的 key. query string 的 value 就是输入框的用户输入的内容.
value: input 标签的值. 对于 type 为 submit 类型来说, value 就对应了按钮上显示的文本.

cpp 复制代码

<form action="http://abcdef.com/myPath" method="GET">
    <input type="text" name="userId">
    <input type="text" name="classId">
    <input type="submit" value="提交">
</form>

在输入框随便填写数据,

点击 "提交", 此时就会构造出 HTTP 请求并发送出去.

构造的 HTTP 请求：

GET http://abcdef.com/myPath?userId=100\&classId=200 HTTP/1.1

Host: abcdef.com

Proxy-Connection: keep-alive

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,

like Gecko) Chrome/91.0.4472.114 Safari/537.36

Accept:

text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,imag

e/apng,/ ;q=0.8,application/signed-exchange;v=b3;q=0.9

Accept-Encoding: gzip, deflate

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

体会 form 代码和 HTTP 请求之间的对应关系：

form 的 action 属性对应 HTTP 请求的 URL

form 的 method 属性对应 HTTP 请求的方法

input 的 name 属性对应 query string 的 key

input 的内容对应 query string 的 value

form 发送 POST 请求

修改上面的代码, 把 form 的 method 修改为 POST

cpp 复制代码

<form action="http://abcdef.com/myPath" method="GET">
    <input type="text" name="userId">
    <input type="text" name="classId">
    <input type="submit" value="提交">
</form>

页面效果不变：

构造的 HTTP 请求：

POST http://abcdef.com/myPath HTTP/1.1

Host: abcdef.com

Proxy-Connection: keep-alive

Content-Length: 22

Cache-Control: max-age=0

Upgrade-Insecure-Requests: 1

Origin: null

Content-Type: application/x-www-form-urlencoded

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,

like Gecko) Chrome/91.0.4472.114 Safari/537.36

Accept:

text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,imag

e/apng,/ ;q=0.8,application/signed-exchange;v=b3;q=0.9

Accept-Encoding: gzip, deflate

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

userId=100&classId=200

主要的区别:

method 从 GET 变成了 POST

数据从 query string 移动到了 body 中

通过 ajax 构造 HTTP 请求

从前端角度, 除了浏览器地址栏能构造 GET 请求, form 表单能构造 GET 和 POST 之外, 还可以通过 ajax 的方式来构造 HTTP 请求. 并且功能更强大.

ajax 全称 Asynchronous Javascript And XML, 是 2005 年提出的一种 JavaScript 给服务器发送HTTP 请求的方式. 特点是可以不需要刷新页面/页面跳转就能进行数据传输.

在 JavaScript 中可以通过 ajax 的方式构造 HTTP 请求.

发送 GET 请求：

创建 test.html, 在

cpp 复制代码

// 1. 创建 XMLHttpRequest 对象
let httpRequest = new XMLHttpRequest();
// 2. 默认异步处理响应. 需要挂在处理响应的回调函数.
httpRequest.onreadystatechange = function () {
    // readState 表示当前的状态. 
    // 0: 请求未初始化
    // 1: 服务器连接已建立
    // 2: 请求已接收
    // 3: 请求处理中
    // 4: 请求已完成，且响应已就绪
    if (httpRequest.readyState == 4) {
        // status 属性获取 HTTP 响应状态码
        console.log(httpRequest.status);
        // responseText 属性获取 HTTP 响应 body
        console.log(httpRequest.responseText);
   }
}
// 3. 调用 open 方法设置要访问的 url
httpRequest.open('GET', 'http://42.192.83.143:8080/AjaxMockServer/info');
// 4. 调用 send 方法发送 http 请求
httpRequest.send();

浏览器和服务器交互过程(引入 ajax 后):

发送 POST 请求：

对于 POST 请求, 需要设置 body 的内容

先使用 setRequestHeader 设置 Content-Type
再通过 send 的参数设置 body 内容.

发送 application/x-www-form-urlencoded 数据：

cpp 复制代码

// 1. 创建 XMLHttpRequest 对象
let httpRequest = new XMLHttpRequest();
// 2. 默认异步处理响应. 需要挂在处理响应的回调函数.
httpRequest.onreadystatechange = function () {
    // readState 表示当前的状态. 
    // 0: 请求未初始化
    // 1: 服务器连接已建立
    // 2: 请求已接收
    // 3: 请求处理中
    // 4: 请求已完成，且响应已就绪
    if (httpRequest.readyState == 4) {
        // status 属性获取 HTTP 响应状态码
        console.log(httpRequest.status);
        // responseText 属性获取 HTTP 响应 body
        console.log(httpRequest.responseText);
   }
}
// 3. 调用 open 方法设置要访问的 url
httpRequest.open('POST', 'http://42.192.83.143:8080/AjaxMockServer/info');
// 4. 调用 setRequestHeader 设置请求头
httpRequest.setRequestHeader('Content-Type', 'application/x-www-formurlencoded');
// 5. 调用 send 方法发送 http 请求
httpRequest.send('name=zhangsan&age=18');

发送 application/json 数据：

cpp 复制代码

// 4. 调用 setRequestHeader 设置请求头
httpRequest.setRequestHeader('Content-Type', 'application/json');
// 5. 调用 send 方法发送 http 请求
httpRequest.send(JSON.stringify({
    name: 'zhangsan',
    age: 18
}));

封装 ajax 方法

原生的 XMLHTTPRequest 类使用并不方便. 我们可以在这个基础上进行简单封装.

cpp 复制代码

// 参数 args 是一个 JS 对象, 里面包含了以下属性
// method: 请求方法
// url: 请求路径
// body: 请求的正文数据
// contentType: 请求正文的格式
// callback: 处理响应的回调函数, 有两个参数, 响应正文和响应的状态码
function ajax(args) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        // 0: 请求未初始化
        // 1: 服务器连接已建立
        // 2: 请求已接收
        // 3: 请求处理中
        // 4: 请求已完成，且响应已就绪
        if (xhr.readyState == 4) {
            args.callback(xhr.responseText, xhr.status)
       }
   }
    xhr.open(args.method, args.url);
    if (args.contentType) {
        xhr.setRequestHeader('Content-type', args.contentType);
   }
    if (args.body) {
        xhr.send(args.body);
   } else {
        xhr.send();
   }
}
// 调用该函数
ajax({
    method: 'get',
    url: '/info',
    callback: function (body, status) {
        console.log(status);
        console.log(body);
   }
});

四、结语

本片文章先是介绍了HTTP协议，之后从HTTP请求与响应两方面展开。

以上就是本文全部内容，感谢各位能够看到最后，如有问题，欢迎各位大佬在评论区指正，希望大家可以有所收获！创作不易，希望大家多多支持！

最后，大家再见！祝好！我们下期见！