HTTP使用指南 | 青训营笔记

用户835936271820
133 阅读6分钟

HTTP使用指南 | 青训营笔记

这是我参加【第五届青训营】笔记创作活动的第5天

01初识

背景知识：什么是HTTP，其基本特点

浏览器的地址栏输入字符串到页面渲染，这个过程中发生了什么？

image-20220803092953740.png 流程分析：在地址栏输入字符串，识别出意图是要访问这个地址，搜索进入头条，得到请求地址→发出真实请求，经过网络到达服务器→读取响应→渲染→页面加载完成。

初识HTTP—-什么是HTTP

Hyper Text Transfer Protocol超文本传输协议

特点：应用层协议，基于TCP协议；请求 响应；简单可扩展；无状态。

image-20220803093522134.png

02协议分析

报文结构，发展历程

发展历程：

单行协议HTTP/0.9→构建可扩展HTTP/1.0→标准化洗衣HTTP/1.1→更优异的表现HTTP/2→草案HTTP/3

image-20220803093632159.png

协议分析-报文

HTTP/1.1

image-20220803093919859.png

1.请求报文

http的请求报文由：请求行、头部、空行、主体(请求数据)四个部分组成。其中请求行由请求方法字段、URL字段和HTTP协议版本字段3个字段组成，它们用空格分隔。

常用的请求类型：

image-20220803094032098.png

GET用来做获取资源请求；POST用来做提交的请求；PUT已有载体的替换；DELETE删除；HEAD/CONNECT用的相对较少——-HEAD与GET请求基本相似，但是没有具体的响应体；CONNECT建联过程；OPTIONS前置请求；TRACE测试；PATCH修改。

2.响应报文

一个响应由状态行、响应头部、空行和响应数据4部分组成。

3.请求行类型

safe(安全的)：不会修改服务器的数据的方法：GET HEAD OPTIONS

idempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的

所有safe的方法都是idempotent的：GET HEAD OPTIONS PUT DELETE

状态码

image-20220803094935198.png

RESTful API

RESTful API ：一种API设计风格；REST - Representational State Transfer

(1)每一个URI代表—种资源；

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

(3)客户端通过HTTP method，对服务器端资源进行操作，实现"表现层状态转化"。

报文结构及字段的介绍

image-20220803095342401.png

常用请求头

image-20220803095408374.png

常用响应头

image-20220803095704192.png

缓存

image-20220803095847694.png

image-20220803100230766.png

先看强缓存是否新鲜，如果不新鲜先校验ETag是否存在，若有发起请求，验证是不是最新的，新则返回304，用本地缓存返回，不新则返回200状态码，然后把结果返回。

image-20220803100729072.png

HTTP/2

概述：更快、更稳定、更简单

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

image-20220803101528453.png

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

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

交错发送，接收方重组织。

image-20220803101538683.png HTTP/2特性：HTTP/2连接都是永久的，而且仅需要每个来源一个连接

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

服务器推送

image-20220803101508230.png

HTTPS概述

HTTPS：Hypertext Transfer Protocol Secure

经过TSL/SSL加密

对称加密：加密和解密都是使用同一个密钥；

非对称加密：加密和解密需要使用两个不同的密钥：公钥(public key )和私钥(private key)

image-20220803102010240.png

image-20220803102229050.png

03场景分析

静态资源、登陆

场景分析：1.打开chrome；

2.输入www.toutiao.com；

3.打开控制台 右键->检查F12 4.切换到network

image-20220803102502183.png

静态资源：

image-20220803102522360.png

状态码200一定发起了请求吗？from disk cache从本地缓存拿到的响应

image-20220803102604301.png

image-20220803102622321.png

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

CDN：Content Delivery Network

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

image-20220803103348051.png

场景分析———-登录

业务场景：表单登录；扫码登录

技术方式：SSO

image-20220803103557240.png

表单登录

image-20220803103621085.png

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

image-20220803104005046.png

为什么会有options的请求？跨域；cross-origin

什么是跨域

image-20220803110122305.png

scheme/host/port任意一个区域有区别都是跨域。

最后一行没有写出端口号，默认443端口号，也是同域的

跨域请求是怎么被处理的：

image-20220803105959594.png

跨域解决方案：

CORS；

代理服务器（同源策略是浏览器的安全策略，不是HTTP的）；

Iframe（诸多不便）。

image-20220803110436405.png

image-20220803110721798.png

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

使用POST方法；目标域名：sso.toutiao.com;目标path/quick_login/v2/

2.携带了哪些信息，返回了哪些信息？

携带信息：

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

返回信息：数据格式json；种cookie的信息。

鉴权

image-20220803143202364.png

image-20220803143304364.png

04实际应用

浏览器与node中使用

实战——-浏览器篇

AJAX之XHR

AJAX概述：是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，也称懒加载。通过在后台与服务器进行数据交互，使网页实现异步更新，也就是在不加载整个网页的情况下，对网页的某部分进行更新。

XHR：XMLHttpRequest 的简写， XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本

或者一个DOM文档的形式返回内容。

AJAX的请求流程：

  1. 创建ajax对象
  2. 设置请求,发送请求地址，发送请求方式
  3. 发送数据
  4. 设置一个监听事件、监听后台是否返回请求
  5. 处理数据

image-20220803143614484.png

AJAX之Fetch

Fetch是XMLHttpRequest的升级版。

Fetch特点：

  • 使用Promise。
  • 模块化设计，Response、Request、Header对象。
  • 通过数据流处理对象，支持分块读取。

image-20220803143820532.png

标准库：HTTP/HTTPS

默认模块，无需安装其他依赖；

功能有限/不是十分友好。

image-20220803143929453.png

常用的请求库：axios

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

image-20220803144014455.png

用户体验

网络优化

image-20220803144108394.png

稳定性

image-20220803144144943.png

05了解更多

不止HTTP协议一个选择

扩展——通信方式

WebSocket

浏览器与服务器进行全双工通讯的网络技术

典型场景：实时性要求高，例如聊天室

URL使用ws://或wss://等开头

image-20220803144433608.png 扩展

QUIC：Quick UDP Internet Connection

image-20220803144547892.png

avatar
文章
阅读
粉丝