HTTP 实用指南 | 青训营笔记今天学习了 HTTP 的一些知识点 1. 初识 1.1 初识 HTTP 来看一道常见的

这是我参与【第四届青训营】笔记创作活动的第 7 天，今天学习了 HTTP 的一些知识点

1. 初识

1.1 初识 HTTP

来看一道常见的面试题：

从浏览器地址栏输入 url 到显示页面的步骤

参考：

浏览器根据请求的 url 交给 DNS 域名解析，找到真实的 IP，向服务器发起请求
服务器交给后台处理完成后返回数据，浏览器接收文件（HTTP, CSS, JS等）
浏览器对加载到的资源（HTTP, CSS, JS等）进行语法解析，建立相应的内部数据结构（如 HTML 的 DOM）
载入解析到的资源文件，渲染页面，完成~

1.2 什么是 HTTP

Hyper Text Transfer Protocol 超文本传输协议

应用层协议，基于 TCP

请求相应

简单无扩展

无状态

2. 协议分析

2.1 发展

2.1.1 HTTP/2

概述

更快、更稳定、更简单 HTTP/2 连接都是永久的，而且仅需要每个来源一个连接

帧（frame）：HTTP/2 通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。

消息：与逻辑请求或相应消息对应的完整的一系列帧。

数据流：已建立的连接内的双向字节流，可以承载一条或多条消息，

流控制：阻止发送方向接收方发送大量数据的机制

2.1.2 HTTPS

HTTPS: Hypertext Transfer Protocol Secure

经过 TSL / SSL 加密对称加密：加密和解密都是使用同一个密钥非对称加密：加密和解密需要使用两个不同的密钥

公钥（public key）

私钥（private key）

2.2 报文

2.2.1 方法

通常有一下这些方法

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

Method

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

2.2.2 状态码

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

2.2.3 Restful API

介绍

Restful API: 一种 API 设计风格；每一个 URL 代表一种资源

客户端和服务器之间，传递这种资源的某种表现层

客户端通过 HTTP method，对服务器端资源进行操作，表现 “表现层状态转化”

2.2.4 常用请求头

2.2.5 常用相应头

2.2.6 缓存

强缓存

协商缓存

流程

2.2.7 cookie

3. 场景分析

操作步骤

打卡 Chrome
输入一个网址
打开控制台
- 右键 -> 检查
- 或者 F12
切换到 Network

3.1 场景分析——静态资源

上图中，缓存策略是怎样的？

强缓存
Cache-control: 一年

还有什么信息吗？

允许所有域名访问
资源类型： CSS

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

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

3.2 场景分析——登录

业务场景

表单登录
扫码登录

技术方式

账号密码登录
打卡控制台—— network —— 勾选 preserve log —— 过滤 quick_login
观察请求

为什么有 options 的请求？

答：跨域，cross-origin

3.2.1 关于跨域和同域（比较经典）

跨域 CORS ( Cross-Origin Resource Sharing)

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

3.2.2 问题

有以下几个问题

向什么地址做了什么动作？

携带了哪些信息，返回了哪些信息

思考：

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

答：

向什么地址做了什么动作？

使用 POST 方法

目标域名 sso.toutiao.com

目标 path/quick_login/v2/

携带了哪些信息，返回了哪些信息

携带信息

POST body，数据格式为 form

希望获取的数据格式为 json

已有的 cookie

返回信息

数据格式为 json

cookie 的信息

3.2.3 鉴权

方法

Session + cookie

JWT(JSON web token)

3.2.4 自动登录

SSO: 单点登录

4. 实际应用

4.1 浏览器

4.1.1 AJAX 之 XHR

XHR: XMLHttpRequest

readyState

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