这是我参与「第五届青训营 」伴学笔记创作活动的第5天
课堂重点🗒️🖋️
- HTTP协议的基本定义
- HTTP协议主要特征
- HTTP协议发展历程
- HTTP协议的报文结构
- 场景分析–静态资源
- 场景分析–登录
1. 什么是 HTTP
HTTP 是一个协议，不是开发语言，不是一个服务，也不是一种网络。只是一种协议、一种约定。 HTTP 是一个“ 传输协议 ”，所谓的“ 传输 ”（Transfer）其实很好理解，就是把一堆东西从 A 点搬到 B 点，或者从 B 点搬到 A 点，即“ A <===> B”。
- HTTP 协议是一个“ 双向协议 ”。
- Hyper Text Transfer Protocol 是超文本传输协议。
- HTTP 是一个基于
TCP/IP通信协议来传递数据（HTML 文件、图片文件、查询结果等）。 - HTTP 的 URL 是由 http:// 起始与默认使用端口 80，而 HTTPS 的 URL 则是由 https:// 起始与默认使用端口 443。
应用层协议，基于TCP协议；请求 响应；简单可扩展；无状态。
简言之，双向协议 有两个最基本的参与者 A 和 B，从 A 开始到 B 结束，数据在 A 和 B 之间双向而不是单向流动。通常我们把先发起传输动作的 A 叫做 请求方，把后接到传输的 B 叫做 应答方或者响应方。
双方约定使用 HTTP 协议来通信，浏览器把一些数据发送给服务器，服务器再把数据返回给浏览器。
下面是协议的发展历程：
1.2 协议分析-报文
HTTP/0.9单行协议
- 请求GET/mypage.html
- 响应只有HTML文档
HTTP/1.0构建可扩展性
- 增加了Header
- 有了状态码
- 支持多种文档类型
HTTP/1.1标准化协议
- 链接复用
- 缓存
- 内容协商
Method
| 方法 | 描述 |
|---|---|
| GET | 请求一个指定资源的表示形式.使用GET的请求应该只被用于获取数据 |
| POST | 用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用 |
| PUT | 用请求有效载荷替换目标资源的所有当前表示 |
| DELETE | 删除指定的资源 |
| HEAD | 请求一个与GET请求的响应相同的响应，但没有响应体 |
| CONNECT | 建立一个到由目标资源标识的服务器的隧道 |
| OPTIONS | 用于描述目标资源的通信选项 |
| TRACE | 沿着到目标资源的路径执行一个消息环回测试 |
| PATCH | 用于对资源应用部分修改 |
状态码
| 状态码 | 描述 |
|---|---|
| 200 | 客户端请求成功 |
| 301 | 资源(网页等)被永久转移到其它URL |
| 302 | 临时跳转 |
| 401 | 请求未经授权 |
| 404 | 请求资源不存在，可能是输入错误的URL |
| 500 | 服务器内部发生了不可预期的错误 |
| 504 | 网关或者代理的服务器无法在规定的时间内获得想要的响应 |
常用请求头
| 请求头 | 描述 |
|---|---|
| Accept | 接受类型，标识浏览器支持的 MIME 类型(对标服务端返回的 Content-Type ) |
| Content-Type | 客户端发出去实体内容的类型 |
| Cache-Control | 指定请求和响应遵循的缓存机制，如no-cache |
| lf-Modified-Since | 对应服务端的 Last-Modified ，用来匹配文件是否变动，只能精确到 1 s 之内 |
| Expires | 缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间 |
| Max-age | 代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存 |
| lf-None-Match | 对应服务端的 ETag ,用来匹配文件内容是否改变(非常精确) |
| Cookie | 有 cookie 并且同域访问时会自动带上 |
| Referer | 该页面的资源 URL （适用于所有类型的请求，会精确到详细页面地址，csrf 拦截常用到这个字段） |
| Origin | 最初的请求是从哪里发起的(只会精确到端口)，Origin比Referer更尊重隐私 |
| User-Agent | 用户客户端的一些必要信息，如 UA 头部等 |
| Content-Type | 服务端返回的实体内容的类型 |
| Cache-Control | 指定请求和响应遵循的缓存机制，如 no-cache |
| Last-Modified | 请求资源的最后修改时间 |
| Expires | 应该在什么时候认为文档已经过期,从而不再缓存它 |
| Max-age | 客户端的本地资源应该缓存多少秒，开启了 Cache-Control 后有效 |
| ETag | 资源的特定版本的标识符, Etags 类似于指纹 |
| Set-Cookie | 设置和页面关联的 cookie ，服务器通过这个头部把 cookie 传给客户端 |
| Server | 服务器的一些相关信息 |
| Access-Control-Allow-Origin | 服务器端允许的请求 Origin 头部（譬如为 * ) |
2. HTTP协议的应用场景分析
2.1 实战-浏览器篇
AJAX 之 XHR
- XHR: XMLHttpRequest
- readyState
AJAX 之 Fetch
- XMLHttpRequet 的升级版
- 使用 Promise
- 模块化设计, Response , Request , Header 对象
- 通过数据流处理对象，支持分块读取
2.1 实战-Node 篇
标准库: HTTP/HTTPS
- 默认模块，无需安装其他依赖
- 功能有限/不是十分友好
常用的请求库: axios
- 支持浏览器、node.js环境
- 丰富的拦截器
WebSocket
- 浏览器与服务器进行全双工通讯的网络技术
- 典型场景：实时性要求高，例如聊天室 URL 使用 ws:// 或 wss:// 等开头
结尾
综上，今天又是好好学习的一天! 😎🥱
