HTTP 实用指南 | 青训营笔记

dsyislearning
112 阅读9分钟

HTTP 实用指南 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第 10 天

概述

本节课程主要分为以下五个方面：

  1. HTTP 协议简介

  2. HTTP 协议的基本结构与发展历程

  3. 常见场景中的 HTTP 协议应用

  4. 在不同的环境中发起 HTTP 请求

  5. 知识扩展，了解更多网络通信协议

课前部分请同学们准备好相关环境，如果有学习过计算机网络等相关课程的同学可以快速回顾下相关知识；课中部分我们会对 HTTP 协议的关键知识点做一下讲解，并结合实际场景，帮助同学们巩固学习；课后部分是一些相关学习资料，帮助同学们进一步完善知识体系。

初识 HTTP

背景知识

HTTP（HyperText Transfer Protocol）是万维网（World Wide Web）的基础协议。自 Tim Berners-Lee 博士和他的团队在 1989-1991 年间创造出它以来，HTTP 已经发生了太多的变化，在保持协议简单性的同时，不断扩展其灵活性。如今，HTTP 已经从一个只在实验室之间交换文件的早期协议进化到了可以传输图片，高分辨率视频和 3D 效果的现代复杂互联网协议。

概念

HTTP 是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的 Web 文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。

HTTP 概述

特点

  1. 简单
  • 虽然下一代 HTTP/2 协议将 HTTP 消息封装到了帧（frames）中，HTTP 大体上还是被设计得简单易读。HTTP 报文能够被人读懂，还允许简单测试，降低了门槛，对新人很友好。
  1. 可扩展
  • 在 HTTP/1.0 中出现的 HTTP headers 让协议扩展变得非常容易。只要服务端和客户端就新 headers 达成语义一致，新功能就可以被轻松加入进来。
  1. 无状态，有会话

  • HTTP 是无状态的：在同一个连接中，两个执行成功的请求之间是没有关系的。这就带来了一个问题，用户没有办法在同一个网站中进行连续的交互，比如在一个电商网站里，用户把某个商品加入到购物车，切换一个页面后再次添加了商品，这两次添加商品的请求之间没有关联，浏览器无法知道用户最终选择了哪些商品。而使用 HTTP 的头部扩展，HTTP Cookies 就可以解决这个问题。把 Cookies 添加到头部中，创建一个会话让每次请求都能共享相同的上下文信息，达成相同的状态。

  • 注意，HTTP 本质是无状态的，使用 Cookies 可以创建有状态的会话。

协议分析

持续发展

  1. HTTP/0.9 单行协议
  • 请求 GET /mypage.html
  • 响应只有 HTML 文档
  1. HTTP/1.0 构建可扩展性
  • 增加了 Header
  • 有了状态码
  • 支持多种文档类型
  • ...
  1. HTTP/1.1 标准化协议
  • 链接复用
  • 缓存
  • 内容协商
  • ...
  1. HTTP/2 更优异的表现
  • 二进制协议
  • 压缩 header
  • 服务器推送
  • ...
  1. HTTP/3 草案

HTTP 的演变

报文解析

HTTP/1.1 以及更早的 HTTP 协议报文都是语义可读的。在 HTTP/2 中，这些报文被嵌入到了一个新的二进制结构，帧。帧允许实现很多优化，比如报文头部的压缩和复用。即使只有原始 HTTP 报文的一部分以 HTTP/2 发送出来，每条报文的语义依旧不变，客户端会重组原始 HTTP/1.1 请求。因此用 HTTP/1.1 格式来理解 HTTP/2 报文仍旧有效。

HTTP 报文

Pasted image 20220803134645.png

Method

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

特性：

  • Safe（安全）：不会修改服务器数据的方法，例如 GET、HEAD。OPTIONS

  • Independent（幂等）：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的。

    • 所有 Safe 的方法 都是 Independent 的
    • GET、HEAD、OPTIONS、PUT、DELETE

状态码

状态码含义
1xx指示信息，表示请求已接收，继续处理
2xx成功，表示请求已被成功接收、理解、接受
3xx重定向，要完成请求必须进行更进一步的操作
4xx客户端错误，请求有语法错误或请求无法实现
5xx服务器端错误，服务器未能实现合法的请求

常见状态码：

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

RESTful API

REST - Representational State Transfer

RESTful API ：一种 API 设计风格

  • 每一个 URI 代表一种资源
  • 客户端与服务器之间，传递这种资源的某种表现层
  • 客户端通过 HTTP method ，对服务器端资源进行操作，实现 ”表现层状态转化“
请求返回码含义
GET /zoos200 OK列出所有动物园，服务器成功返回了
POST /zoos201 CREATED新建一个动物园，服务器创建成功
PUT /zoos/ID400 INVALID REQUEST更新某个指定动物园的信息（提供该动物园的全部信息）
用户发出的请求信息有误，服务器没有进行新建或修改数据操作
DELETE /zoos/ID204 NO CONTENT删除某个动物园，删除数据成功

常用请求头

请求头含义
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 头部（譬如为 * ）

缓存

强缓存

  • Expires，时间戳
  • Cache-Control
    • 可缓存性
      • no-cache ：协商缓存验证
      • no-store ：不使用任何缓存
    • 到期
      • max-age ：单位是秒，存储的最大周期，相对于请求的时间
    • 重新验证 重新加载
      • must-revalidate ：一旦资源过期，在成功向原始服务器验证之前，不能使用

协商缓存

  • Etag / If-None-Match ：资源的特定版本的标识符，类似于指纹
  • Last-Modified / If-Modified-Since ：最后修改时间

Pasted image 20220803155751.png

Cookie

Set-Cookie response

Name=value各种 cookie 的名称和值
Expires=DataCookie 的有效期，缺省时 Cookie 仅在浏览器关闭之前有效
Path=Path限制指定 Cookie 的发送范围的文件目录，默认为当前
Domain=domain限制 Cookie 生效的域名，默认为创建 Cookie 的服务域名
secure仅在 HTTPS 安全连接时，才可以发送 Cookie
HttpOnlyJavaScript 脚本无法获得 Cookie
SameSite=[None|Strict|Lax]- None 同站、跨站请求都可发送
- Strict 仅在同站发送
- 允许与顶级导航一起发送，并将与第三方网站发起的 GET 请求一起发送

发展协议

HTTP/2

Pasted image 20220803161051.png

Pasted image 20220803161105.png

Pasted image 20220803161125.png

HTTPS

Pasted image 20220803161227.png

Pasted image 20220803161214.png

场景分析

静态资源

Pasted image 20220803163226.png

Pasted image 20220803163245.png

Pasted image 20220803163301.png

Pasted image 20220803163334.png

Pasted image 20220803163351.png

登录

  • 业务场景
    • 表单登录
    • 扫码登录
  • 技术方式
    • SSO

Pasted image 20220803163501.png

Pasted image 20220803163515.png

Pasted image 20220803163528.png

Pasted image 20220803165254.png

Pasted image 20220803165317.png

Pasted image 20220803165340.png

Pasted image 20220803165401.png

Pasted image 20220803165419.png

Pasted image 20220803165435.png

SSO（Single Sign On）：单点登录

Pasted image 20220803165517.png

实战

浏览器

AJAX 之 XHR

Pasted image 20220803161454.png

AJAX 之 Fetch

Pasted image 20220803161508.png

node

标准库：HTTP/HTTPS

Pasted image 20220803161557.png

axios

Pasted image 20220803161627.png

用户体验

网络优化

Pasted image 20220803161652.png

稳定性

Pasted image 20220803161709.png

了解更多

WebSocket

  • 浏览器与服务器进行全双工通讯的网络技术
  • 典型场景：实时性要求高，例如聊天室
  • URL 使用 ws:// 或 wss:// 等开头

Pasted image 20220803161858.png

QUIC

Quick UDP Internet Connection

  • 0-RTT 建联（首次建联除外）
  • 类似 TCP 的可靠传输
  • 类似 TLS 的加密传输，支持完美前向安全
  • 用户空间的拥塞控制，最新的 BBR 算法
  • 支持 h2 的基于流的多路复用，但没有 TCP 的 HOL 问题
  • 前向纠错 FEC
  • 类似 MPTCP 的 Connection migration

Pasted image 20220803162151.png

HTTP 学习资料推荐

学习建议：

  • 相对来讲 HTTP 协议的常用知识不复杂， “基础篇” 材料中，MDN 可以作为工具查询，“图解HTTP” 与 “HTTP权威指南” 选择一个阅读，作为体系化学习资料

  • 进阶篇中提供的是标准协议描述，感兴趣的同学阅读即可，也可作为工具使用

  • 基础篇

  • 进阶篇

    • Hypertext Transfer Protocol version 2 - RFC9113
    • HPACK - Header Compression for HTTP/2 - RFC7541
avatar
文章
阅读
粉丝