这是我参与「第四届青训营 」笔记创作活动的的第十天。 今天学习了《HTTP实用指南》，今天的课程内容很不错，对于前端入门人员来说，最基本的http知识是以后找工作面试必备的技能，学好http不仅仅是对前后端分离交互工程中的一个提升，也是对网络这块知识的一个基本学习。身为程序猿，怎么能够不懂网络呢，你说是吧。

本堂课重点内容

• 什么是HTTP
• 协议分析
• 场景分析
• 实战

详细知识点介绍

详细知识点笔记分享在文章最后，一起学习，加油！

课后个人总结

通过对http协议的学习，我们可以了解Web应用程序前后端交互过程中的一些细节问题，可以深入了解网络请求的发起与响应的过程，在以后前后端分离协作的情况下，学习好http有助于我们对后端接口的一个请求的处理。 在Web开发中，页面缓存控制、数据传递、文档语言参数设定等等，都离不开HTTP协议。

笔记

HTTP实用指南

一、初识HTTP

我们在上网的时候，从打开浏览器输入url地址，到显示数据界面，到底经历了什么？

1、什么是HTTP

• Hyper Text Transfer Protocol超文本传输协议
• 应用层协议，基于TCP协议
• 请求和响应
• 简单可扩展
• 无状态

2、协议分析

（1）报文

HTTP/1.1

①请求方法

方法名	描述
GET	请求一个指定资源的表示形式，使用GET请求应该只被用于获取数据
POST	用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用
PUT	用请求有效载荷替换目标资源的所有当前表示
DELETE	删除指定的资源
HEAD	请求一个与GET请求的响应相同的响应，但没有响应体
CONNECT	建立一个由目标资源标识的服务器的隧道
OPTIONS	用于描述目标资源的通信选项
TRACE	沿着到目标资源的路径执行一个消息环回测试
PATCH	用于对资源应用部分修改

Safe（安全的）：不会修改服务器的数据的方法，如GET、HEAD、OPTIONS。
Idempotent（幂等）：同样的请求被执行一次和连续执行多次的效果是一样的，服务器的状态也是一样的，所有的safe方法都是Idempotent的，如GET、HEAD、OPTIONS、PUT、DELETE等。

②状态码

• 200 OK - 客户端请求成功
• 301 - 资源（网页等）被永久转移到其他URL
• 302 - 临时跳转
• 401 Unauthorized - 请求未经授权
• 404 - 请求资源不存在，可能是输入了错误的URL
• 500 - 服务器内部发生了不可预期的错误
• 504 Gateway TimeOut - 网关或者代理的服务器无法在规定的时间内获得想要的响应

③RESTful API

RESTful API：一种API设计风格

REST - Representational State Transfer 表现层状态转化

• 每一个URI代表一种资源
• 客户端与服务器之间，传递这种资源的某种表现层
• 客户端通过HTTP method，对服务器端资源进行操作，实现"表现层状态转化"。

④常用请求头

⑤常用响应头

⑥缓存

缓存使用流程：

⑦cookie

（2）发展

①HTTP/2

HTTP/2 ： 更快、更稳定、更简单。

• 帧（frame）：HTTP/2 通信的最小单位，每个帧都包含枕头，至少也会标识出当前帧所属的数据流。（二进制）
• 消息：与逻辑请求或者响应消息对应的完整的一系列帧。
• 数据流：已建立的连接内的双向字节流，可以承载一条或者多条消息。（交错发送，接收方重组）

特性：

• 复用性：HTTP/2 连接都是永久的，而且仅需需要每个来源一个连接
• 流控制：阻止发送方向接收方发送大量数据的机制
• 服务器推送

②HTTPS

HTTPS： Hypertext Transfer Protocol Secure

• 经过TSL / SSL加密
• 对称加密：加密和解密都是使用同一个密钥
• 非对称加密：加密和解密需要使用两个不同的密钥：公钥（public key）和私钥（private key）

3、场景分析

头条网络分析：

1、打开chrome

2、输入toutiao.com

3、打开控制台 右键检查 或者 F12

4、切换到网络network

（1）静态资源

状态码200，一定发起了请求吗？

请求响应标头分析：

静态资源方案：缓存 + CDN + 文件名hash

• CDN ： Content Delivery Network
• 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务。

（2）登录

头条登录

1、点击登录

2、使用表单登录

3、打开控制台 - 选择网络network - 勾选保留日志preserve log - 过滤 quick_login

我们分别点开这两个请求看一下，发现两个请求除了请求方法不同，其余都相同。

为什么会存在options的请求？

我们可以看到请求网址是https://sso.toutiao.com/quick_login/v2/?aid=24&account_sdk_source=sso&language=zh，实际上这里就会存在一个跨域的问题，导致这里会出现options的请求。

什么是跨域？

如果scheme、hostname和port中有一个不相同，就会出现跨域问题。

跨域问题处理

如果我们出现了跨域问题，那么就会使用CORS（Cross-Origin Resource Sharing）来处理。

• 预请求：获知服务端是否允许该跨域请求（复杂请求）

• CORS

• 代理服务器

  • 同源策略是浏览器的安全策略，不是HTTP的

• Iframe

  • 诸多不便

向地址做了什么动作？

• 使用POST方法
• 目标域名 https://sso.toutiao.com
• 目标地址 quick_login/v2/

携带和返回了哪些信息？

• 携带信息

  • Post body，数据格式为form
  • 希望获取的数据格式为json
  • 已有的cookie

• 返回信息

  • 数据格式json
  • cookie的信息

为什么下一次进入页面能记住登录态呢？

鉴权：

• session + cookie
• jwt

点击右上角的发文章，跳转后的网站为什么能自动登录？

• SSO：单点登录

4、实战

（1）AJAX之XHR

• XHR：XMLHttpRequest
• readyState

状态	名称	描述
0	UNSENT	代理被创建，但尚未调用open()方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，并且头部和状态已经可获得
3	LOADING	下载中；response Text属性已经包含数据
4	DONE	下载操作已完成

（2）AJAX之Fetch

• XMLHttpRequest的升级版
• 使用Promise
• 模块化设计，Response，Request，Header对象
• 通过数据流处理对象，支持分块读取

（3）Node

标准库：HTTP / HTTPS

• 默认模块，无需安装其他模块
• 功能有限，不是十分友好

（4）axios

常用的请求库：axios

• 支持浏览器、nodejs环境
• 丰富的拦截器

（5）用户体验

• CDN
• 预解析、预连接
• 稳定性

重试是保证稳定的有效手段，但要防止加剧恶劣情况
缓存合理使用，作为最后一道防线

\