这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
一、本堂课重点内容：
本堂课的知识要点有哪些？
- 认识HTTP
- HTTP协议分析
- 常见场景
- HTTP实际应用
二、详细知识点介绍：
认识HTTP
HTTP，英文全称为 HyperText Transfer Protocol，翻译过来就是 超文本传输协议。
HTTP 是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范。
浏览器进程示意图
HTTP传输过程：
建立TCP连接->web浏览器向web服务器发送请求命令->web浏览器发送请求头信息->web服务器应答->web服务器发送应答头信息->web服务器向浏览器发送数据->web服务器关闭或保持连接
主要特点：
- 简单快速：客户向服务器请求服务时，只需传请求方法和路径
- 灵活：允许传输任意类型的数据对象，有Content-Type加以标记
- 无状态：无状态协议，指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则必须重传。
HTTP协议分析
HTTP发展
HTTP/0.9 - 单行协议
请求GET/XXX.html 响应只有HTML文档
HTTP/1.0 - 构建可扩展性
增加了Header 有了状态码 支持多种文档类型 ...
HTTP/1.1 - 标准化协议
链接复用 缓存 内容协商 ...
HTTP/2.0
二进制协议 压缩header 服务器推送 ...
HTTP/3.0 - 草案
虽然目前HTTP2.0已经能够满足日常开发，日常使用网络传输的需求，但是我们仍然未停止对于HTTP的研究与改善。
HTTP协议分析图
请求报文示意图
响应报文示意图
示例图
Method示意图
-
Safe(安全的)∶不会修改服务器的数据的方法（GET HEAD OPTIONS）
-
ldempotent(幂等)︰ 同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的，所有safe的方法都是ldempotent的（GET HEAD OPTIONS PUT DELETE）
状态码含义
常见的状态码
- 200 OK - 客户端请求成功
- 301 - 资源（网页等）被永久转移到其他URL
- 302 - 临时跳转
- 401 Unauthorized - 请求未经授权
- 404 - 请求资源不存在，可能是输入了错误的URL
- 500 - 服务器内部发生了不可预期的错误
- 504 - Gateway Timeout - 网关或者代理的服务器无法在规定时间内获得想要的响应
Restful API
- 一种API设计风格
- REST - Representational State Transfer
- 每一个URL代表一种资源
- 客户端与服务器之间,传递这种资源的某种表现层
- 客户端通过HTTP method , 对服务器端资源进行操作,实现"表现层状态转化"
常用请求方法是GET和POST
-
GET方式：是以实体的方式得到由请求URI所指定资源的信息，如果请求URI只是一个数据产生过程，那么最终要在响应实体中返回的是处理过程的结果所指向的资源，而不是处理过程的描述。
-
POST方式：用来向目的服务器发出请求，要求它接受被附在请求后的实体，并把它当作请求队列中请求URI所指定资源的附加新子项，Post被设计成用统一的方法实现下列功能：
- 1：对现有资源的解释；
- 2：向电子公告栏、新闻组、邮件列表或类似讨论组发信息；
- 3：提交数据块；
- 4：通过附加操作来扩展数据库 。
从上面描述可以看出，Get是向服务器发索取数据的一种请求；而Post是向服务器提交数据的一种请求，要提交的数据位于信息头后面的实体中。
GET与POST方法有以下区别：
-
在客户端，Get方式在通过URL提交数据，数据在URL中可以看到；POST方式，数据放置在HTML HEADER内提交。
-
GET方式提交的数据最多只能有1024字节，而POST则没有此限制。
-
安全性问题。正如在（1）中提到，使用 Get 的时候，参数会显示在地址栏上，而 Post 不会。所以，如果这些数据是中文数据而且是非敏感数据，那么使用 get；如果用户输入的数据不是中文字符而且包含敏感数据，那么还是使用 post为好。
常用请求头
-
Accept- 接受类型，表示浏览器支持的MIME类型（对标服务端返回的Content-Type） -
Content-Type- 客户端发送出去的实体内容的类型 -
Cache-Control- 指定请求和响应遵循的缓存机制，如no-cache -
If-Modified-Since- 对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内 -
Expires- 缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间 -
Max-age- 代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存 -
If-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头部（比如*）
缓存
HTTP/2
更快,更稳定,更简单
- 帧(frame)：HTTP/2通信的最小单位,每个帧都包含帧头,至少也会标识当前帧所属的数据流
- 二进制
- 消息：与逻辑请求或响应消息的完整的一系列帧
- 数据流：已建立的连接内的双向字节流,可以承载一条或多条消息
- 交错发送,接收方重组织
- HTTP/2连接都是永久的,而且仅需要每个来源一个连接
- 流控制：阻止发送方向接收方发送大量数据的机制
- 服务器推送
HTTPS
-
HTTP：Hyper Text Transfer Protocol Secure
-
通过TSL/SSL加密
-
对称加密：加密和解密是同一个密钥
-
非对称加密
-
加密和解密需要使用两个不同的密钥：
- 公钥(public key)
- 私钥(private key)
-
常见场景
场景分析
-
打开控制台
- 右键点击检查
- F12
-
切换至network
静态资源方案：缓存 + CDN + 文件名hash
- 通过用户就近性和服务器负载的判断,CDN确保内容以一种极为高效的方式为用户的请求提供服务
跨域分析
浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
例：a页面想获取b页面资源，如果a、b页面的协议、域名、端口其中之一不同，进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问
解决方案
CORS ( Cross- Origin Resource Sharing )：整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
预请求︰获知服务端是否允许该跨源请求（复杂请求)
HTTP实际应用
AJAX之XHR：
- UNSET 代理被创建，但尚未调用open()方法
- OPENED open()方法已被调用
- HEADERS_RECEIVED send()方法已被调用，并且头部和状态已可获得
- LOADING 下载中，responseText属性已经包含部分数据
- DONE 下载操作已完成
AJAX之Fetch ：
- XMLHttpRequet的升级版
- 使用Promise
- 模块化设计，Response，Request，Header对象
- 通过数据流处理对象，支持分块读取
Node：
- 标准库：HTTP/HTTPS
- 默认模块，无需安装其他依赖
- 功能有限/不是十分友好
- 常用的请求库：axios
- 支持浏览器、nodejs环境
- 丰富的拦截器
