文章目录
- HTTP
- HTTP协议格式
- HTTP请求（Request）
-
- URL
-
- [URL encode(转义)](#URL encode(转义))
- 方法
- 请求报头（header）
- 认识请求"正文"（body）
- HTTP响应
-
- 认识"状态码"
-
- [200 OK](#200 OK)
- [404 Not Found](#404 Not Found)
- [403 Forbidden](#403 Forbidden)
- [500 Internal Server Error](#500 Internal Server Error)
- [504 Gateway Timeout](#504 Gateway Timeout)
- [302 Move temporarily](#302 Move temporarily)
- [301 Moved Permanently](#301 Moved Permanently)
- [认识响应 "报头" (header)](#认识响应 "报头" (header))
- [认识响应 "正文" (body)](#认识响应 "正文" (body))
- [构造 http 请求](#构造 http 请求)
HTTP
HTTP (全称为 "超⽂本传输协议") 是⼀种应⽤⾮常⼴泛的 应⽤层协议
所以HTTP作为基于文本格式的协议，与其他层协议不同（TCP, UDP, 以太网， IP... 都是基于二进制格式的协议)
超文本：文本中包含了一些更复杂的内容图片，包括视频，音频，特殊字体，链接
HTTP 往往是基于传输层的 TCP 协议实现的
HTTP 协议是一个非常经典的"一问一答"模型
我们在浏览器中输⼊⼀个 豆包的 "⽹址" (URL) 时, 浏览器就给豆包的服务器发送了⼀个 HTTP请求 , 豆包的服务器返回了⼀个 HTTP 响应
这个响应结果被浏览器解析之后 , 就展**⽰成我们看到的⻚⾯内容**. (这个过程中浏览器可能会给服务器发送多个 HTTP 请求, 服务器会对应返回多个响应, 这些响应⾥就包含了⻚⾯ HTML, CSS, JavaScript, 图⽚, 字体等信息)
HTTP协议格式
通过抓包软件Fiddler（"代理程序"，分析 HTTP 请求/响应的细节）观察HTTP协议格式
浏览器访问 网站 时, 就会把 HTTP 请求先发给 Fiddler , Fiddler 再把请求转发给 网站 的服务器 . 当 网站 服务器返回数据时, Fiddler 拿到返回数据, 再把数据交给浏览器
fiddler结构：
fiddler解压缩按键：
http请求和响应的结构：
总的来说：
HTTP报文结构：
1）请求 ：首行（方法 URL 版本号），请求头(header)，空行，正文（body）（有的请求没有body）
2）响应 ：首行（版本号 状态码 状态码描述），响应头，空行，正文
构成网页的关键部分
一个网页通常由三个部分构成
- HTML： 网页结构 骨
- CSS：网页的样式 皮（包括不限于 颜色， 字体， 对齐方式，位置， 边距, 边框...）
- JavaScript:网页的交互 魂（用户和网页之间的交互方式。如点击某个地方，有xx效果；按下键盘某个键，有 xxx效果；滚动鼠标滚轮，有个xxx 效果)
浏览器和服务器之间，就会存在多次HTTP 交互.
其中有的 HTTP 交互会获取到 HTML
有的会获取到 CSS
还有的会获取到 JavaScript
还有的会获取到一些依赖的资源 （图片，视频，音频，字体)
HTTP请求（Request）
URL
唯一资源定位符，一般在请求的首行
格式：协议名://ip端口号/路径?查询字符串#片段标识符
查询字符串：key=value&ley=value
URL中重点有四个部分
- IP
- 端口
- 路径
- 查询字符串
该四部分的关系：从上往下越来越具体
在一个URL中，有些部分是可以省略的
如果没有端口号，浏览器会给一个默认值
带层次的路径也能省略 ，省略之后，其实是一个/（通常对应网站的主页）query string 属于是程序员自行约定的，本身非必须
片段标识符也可以省略（需要页面内跳转才设定)
URL encode(转义)
像 / ? : 等这样的字符(或者中文), 已经被url当做特殊意义理解了. 因此这些字符不能随意出现.
⽐如, 某个参数中需要带有这些特殊字符, 就必须先对特殊字符进⾏转义
例如:"+" 被转义成了 "%2B" 
方法
GET 是最常⽤的 HTTP ⽅法. 常⽤于获取服务器上的某个资源
POST:向服务器上传 XX个资源PUT:向服务器上传xxx 资源 （文件）
DELETE:删除服务器的xxx资源
1.GET
GET请求一般出现在搜索，或者点击一个链接跳转到新的页面，或HTML间接加载其他资源时（CSS，JS，图片等）
GET 请求的特点
• ⾸⾏的第⼀部分为 GET
• header 部分有若⼲个键值对结构.
• body 部分为空
• GET 请求要想给服务器传递数据，往往就是通过 路径 / query string 来进行传递
2.POST
post一般出现在登录操作，或上传资源/文件时（提交用户输⼊的数据给服务器）
POST 请求的特点
• ⾸⾏的第⼀部分为 POST
• 带有 body, 通过 body 给服务器传递数据.（不太需要 query string 传递了）
GET 和 POST 的区别 ：一般来说没有本质区别，因为它们之间可以相互替换
- GET：数据放URL（通过query string传递数据给服务器 ），可见、用于获取、没有body
- POST：数据放body （不需要query string传数据），不可见、用于提交、有body
其他方法PUT 与 POST 相似
请求报头（header）
它是一个行文本
每一行就是一个键值对，键和值之间使用 :空格 来分割
简单介绍一下header中的重要的key
Host
表示服务器主机的IP（域名）和端口 （由于HTTPS会把header的内容加密，URL的IP端口就能和header进行校验）
Content-Length
表示 body 中的数据长度.（解决了粘包问题）
http的数据先会统一放入TCP接收缓冲区中，一个一个挨着，那么服务器如何区分出，从哪里到哪里是一个完整的 HTTP 请求呢?
- 如果没有 body, 直接读到 空行就可以认为请求结束了
- 如果有 body, header 中必然存在 Content-Length, 取出 Content-Length 的值（字节），找到空行，空行后面就是 body 的开始，从开始位置,读 Content-Length 这么多字节，就可以了
Content-Type
表示请求的 body 中的数据格式
常见的 Content-Type
- text/html
- text/css
- application/javascript
- application/json
- image/png
- image/jpg
Content-Length 和 Content-Type 只有在请求/响应中有body才会出现
如：
User-Agent (简称 UA)
表示浏览器/操作系统的属性 ，总结就是表明你用什么设备上网
如：
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36其中 Windows NT 10.0; Win64; x64 表示操作系统信息
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36 表示浏览器信息.
User-Agent 之所以是这个样⼦是因为历史遗留问题.
现在它可以用来区分用户使用的是 PC端 还是 移动端
Refer
表示这个页面是从哪个页面跳转过来的
例如：
如果直接在浏览器中输⼊URL, 或者直接通过收藏夹访问⻚⾯时是没有 Referer 的.
注意：Refer 和 浏览器 的"回退"功能无关
http 的 refer 主要是用来给服务器看的（投放广告，通过点击来源统计具体是哪个平台的收益）
Cookie
Cookie 中存储了⼀个字符串 , 这个数据可能是客户端(网页)自行通过 JS 写⼊的, 也可能来自于服务器
往往可以通过这个字段实现 "身份标识" 的功能
形式如下：
Cookie 本质上是浏览器在本地存储数据的一种机制由于浏览器的安全性，限制了网站的权限
【如禁止网站访问你的硬盘，也禁止网站调用你电脑上的其他应用程序】
但是免不了一些网站需要在我们的电脑中存储数据，于是浏览器留下了"本地存储"的方案
Cookie 中的内容，其实是服务器返回给浏览器的浏览器就会把 Cookie 保存到本地 （硬盘上）
为了安全，不允许网站随意访问硬盘，而是只能按照"键值对"方式存储简单数据
后续浏览器访问该网站的时候，Cookie 中的数据通过 HTTP 请求报头，带到服务器上
(服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据 ).
可以看到，cookie的内容也是键值对
Cookie 的应用场景
- 因为Cookie 键值对是自定义的，因此可以通过 Cookie 保存一些没那么重要，但是有用的信息.比如"上次访问时间"
- 保存用户的身份标识
网站是如何在你频繁跳转页面（如在bilibili点进一个视频）的情况下确保是你的账号操作的呢？
其实在登录页面开始就会准备
会话 和 cookie 其实是两个机制，只是在这个场景中配合使用的。会话是在服务器端存储用户的详细情况。cookie 是在客户端/浏览器 保存用户的会话标识
cookie 是按照域名维度存储的
通过 cookie 可以实现用户登录过程，
但是 cookie 并不是 浏览器唯一存储数据的方案，浏览器有更多的方案实现本地存储。
Cookie 小结：
- 从哪里来：从服务器返回的.通过Set-Cookie。本质上是程序员自定义的
- 如何保存：浏览器内部保存到硬盘上（重启程序/机器，数据不丢失），由键值对组织（也有过期时间）
- 到哪里去：后续浏览器访问服务器的其他页面的时候 ，就会带上对应的cookie
由于 cookie 一般要跟着 HTTP 请求/响应 走，一般不会存很大的数据 - 有啥作用：在浏览器这边保存必要的数据 （这样的数据是允许丢失的）
（一般是网站需要用到cookie，手机由持久化存储所以用不到）
认识请求"正文"（body）
正⽂中的内容格式和 header 中的 Content-Type 密切相关
请求响应的正文，重点要认识数据格式
如application/json text/css application/javascript
HTTP响应
格式：首行（版本号 状态码 状态码描述），响应头，空行（响应报头的结束标记），正文
认识"状态码"
状态码表示访问⼀个页面的结果. (是访问成功, 还是失败, 还是其他的⼀些情况...).
它出现在HTTP 响应的报头里首行部分
几个常见的状态码：
200 OK
表示访问成功
HTTP层面的成功 不代表业务层面的成功
像2开头的一般都是访问成功了，只是类型不同而已
404 Not Found
客户端要访问的资源不存在
例如：
403 Forbidden
表示访问被拒绝. 有的页面通常需要用户具有⼀定的权限才能访问(登陆后才能访问). 如果用户没有登陆
直接访问, 就容易见到 403.
例如: 查看码云的私有仓库, 如果不登陆, 就会出现 403.
像 4 开头的，都表示"客户端出错了"，用户打开的方式不对
500 Internal Server Error
服务器出现内部错误. ⼀般是服务器的代码执行过程 中遇到了⼀些特殊情况(服务器异常崩溃)会产生这个状态码.
例如我们写代码，代码抛出异常，我们没有很好的 catch 住
504 Gateway Timeout
gateway：网关，服务器机房的入口服务
网关本身其实是比较稳定，不容易挂的 （功能比较简单）
但是网关后面连接的机器如果挂了，网关会返回 5xx
像 5 开头的，一般是服务器出错（需要程序员修复）
302 Move temporarily
临时重定向
像 3 开头的都表示 "重定向" ，一般不需要body，但是在响应报文 header 中需要 location，表示接下来要跳转到哪个页面
重定向是什么？
就相当于手机号码中的 "呼叫转移" 功能.
比如我本来的手机号是 186-1234-5678, 后来换了个新号码 135-1234-5678, 那么不需要让我的朋友知
道新号码，只要我去办理⼀个呼叫转移业务, 其他人拨打 186-1234-5678 , 就会⾃动转移到 135-1234-5678 上
在登陆页面中经常会见到 302. 用于实现登陆成功后⾃动跳转到主页.或者在浏览器广告计费中也很常见，例如：
通过进入这两个服务器，可以让甲乙方都核验点击次数，进行计费
301 Moved Permanently
永久重定向，当浏览器收到这种响应时, 后续的请求都会被自动改成新的地址
301 也是通过 Location 字段来表示要重定向到的新地址
临时重定向和重定向
有些重定向是临时的，过一段时间就不需要，有的重定向是永久的
如果是永久重定向 ，浏览器就会做缓存 ，下次访问旧的地址, 浏览器会直接访问新地址 了.（提高效率)
总结：
认识响应 "报头" (header)
响应报头的基本格式和请求报头的格式基本⼀致.
类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义⼀致.
认识响应 "正文" (body)
正文的具体格式取决于 Content-Type.
如果是HTML类型，正文格式就是HTML格式
构造 http 请求
方法1：通过第三方工具直接构造
- 下载postman，里面可以直接创建请求（目前相较 apibox，它引入了ai帮助编码）
params：构造query string- 使用apibox（国内的接口APP）
方法2：通过 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 就对应了按钮上显⽰的⽂本.
xml
<form action="http://abcdef.com/myPath" method="GET">
<input type="text" name="userId">
<input type="text" name="classId">
<input type="submit" value="提交">
</form>在页面打开 就可以提交一个请求了