HTTP实用指南 | 字节青训营笔记

linht
242 阅读9分钟

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

Web开发的安全之旅行（基础原理篇）

1.初始HTTP

HTTP（Hyper Transfer Protocol）：超文本传输协议，是基于TCP协议，默认端口为80。它的作用是用来规定客户端和服务器的数据传输格式。是一种用于请求与响应模式的、无状态、无连接 的应用层协议。HTTP协议是一种请求-响应模式。

HTTP特点：

  • 应用层协议，基于TCP协议
  • 请求响应
  • 无状态

HTTP基本原理：

  • HTTP被设计于上20世纪90年代初期，是一种可扩展的协议。
  • HTTP是应用层的协议，通过TCP，或者是TLS-加密的TCP连接来发送，理论上任何可靠的传输协议都可以使用。
  • 因为其良好的扩展性，时至今日，它不仅被用来传输超文本文档，还用来传输图片、视频或者向服务器发送如HTML表单这样的信息。
  • HTTP还可以根据网页需求，仅获取部分Web文档内容更新网页。

1659434829772.png

原文链接：blog.csdn.net/NoodleDD/ar…

2.HTTP协议分析

2.1-HTTP发展历程

发展历程如下图：

1659430615937.png

————————————————————————————————————————————————

2.2-HTTP/2协议

HTTP/2概述：简称h2，是HTTP协议在1999年发布了HTTP1.1之后的首个更新。它主要基于谷歌的SPDY协议，于2015年5月正式发表，大多数主流浏览器已经在2015年底前支持了该协议。HTTP/2比以往的HTTP协议更快、更稳定、更简单

HTTP/2特点：

  • 是一个二进制协议。

  • 传输的最小单位是帧（HEADERS 帧和多个 DATA 帧）。

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

  • HTTP/2连接都是永久的，而且仅需要每个来源一个连接。

  • 服务器推送。

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

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

2.3-HTTP协议之请求报文

HTTP请求的报文分为四部分：请求行、请求头、空一行、请求体，其中前三个是所有HTTP请求都有的部分，请求体不是所有的HTTP请求都有（例如GET请求没有请求体）。

请求行：请求行由请求方法、统一资源定位符（URL）、HTTP协议及版本。

请求方法：HTTP请求中，有八种请求方式，分别为GET、POST 、HEAD、OPTIONS、PUT、DELETE、TRACE 、CONNECT 。其中最后常用的就是GET、POST请求方法，如下图。

1659431300902.png

  • safe（安全的）：不会修改服务器的数据方法（GET HEAD OPTIONS）。

  • Idempotent（幂等）:同样请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的，所以safe的方法都是Idempotent的（GET HEAD OPTIONS PUT DELETE）。

———————————————————————————————————————————————— 请求头：包含若干个属性，格式为“属性名：属性值”，服务端根据此获取客户端的信息。下图为常见的请求头及作用，还可以自定义请求头。

常用请求头（如下图）：

1659431978739.png

空一行：发送回车符和换行符，通知服务器以下不再有请求头。
请求体：即为请求参数，通常为以键值对的形式数据。一般在POST请求中才有请求体。

2.4-HTTP协议之响应报文

HTTP响应的报文分为四部分：状态行、响应头、空一行、响应体，其中前三个是所有HTTP响应都有的部分，响应体不是所有的HTTP响应都有。

状态行：状态行由协议及版本、状态码、状态码解释。

协议及版本：通常以HTTP/1.1为标准。

状态码：常用的响应状态码为

  • 200:客户端请求成功。

  • 301:资源（网页等）被永久转移到其他URL。

  • 302:重定向。

  • 401：Unauthorized-请求未经授权。

  • 403:服务器拒绝请求。

  • 404:服务器找不到请求的网页，请求资源不存在。

  • 500:服务器内部发生不可预期的错误。

  • 503:服务不可用。

1659432793598.png ———————————————————————————————————————————————— 响应头：响应头用于描述服务器的基本信息，以及数据的描述，服务器通过这些数据的描述信息，可以通知客户端如何处理等一会儿它回送的数据。

常用响应头：

1659433154916.png

空一行：发送回车符和换行符，代表后面不再有响应头。
响应体：响应的消息体。

3.HTTP协议——缓存

HTTP缓存：当Web请求抵达缓存时， 如果本地有“已缓存的”副本，就可以从本地存储设备而不是从原始服务器中提取这个文档。

缓存类型：强缓存和协商缓存。
强缓存与协商缓存区别：强缓存不发请求到服务器，协商缓存会发请求到服务器；

浏览器缓存流程：

1659434113574.png

3.1-强缓存

强缓存： 浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。

  • 比如某个css文件，如果浏览器再加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；

1659433806709.png

3.2-协商缓存

协商缓存： 当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一个http header验证这个资源是否命中协商缓存；

  • 如果协商缓存命中，服务器会将这个请求返回（此时http状态码为304），但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；

  • 若未命中请求，则将资源返回客户端，并更新本地缓存数据（http状态码200）。

1659433981032.png

原文链接：blog.csdn.net/zxl1990_ok/…

4.HTTPS协议

HTTPS概述：（Hypertext Transfer Protocol Secure）超文本传输安全协议，是以网络安全为目标的HTTP通道，经过TSL/SSL加密，简单来讲就是HTTP的安全版

加密分为：对称加密和非对称加密。

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

  • 非对称加密：加密和解密需要使用两个不同的密钥（公钥和私钥）。
1659437065928.png

4.1-HTTP协议和HTTPS协议对比

1659437429100.png

5.AJAX

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

AJAX同步请求：

  按照JS请求的发送顺序去执行操作。

AJAX异步请求：

 可以同时进行多项操作，尽量不等待
 JS不等待后台返回数据,执行其他操作。

AJAX的请求流程：

  1. 创建ajax对象

  2. 设置请求,发送请求地址，发送请求方式

  3. 发送数据

  4. 设置一个监听事件、监听后台是否返回请求

  5. 处理数据

5.1-AJAX之XHR

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

XHR接口强制要求每个请求都具备严格的HTTP语义–应用提供数据和URL，浏览器格式化请求并管理每个连接的完整生命周期，所以XHR仅仅允许应用自定义一些HTTP首部，但更多的首部是不能自己设定的

原文链接：blog.csdn.net/wenxin_liu/…

5.2-AJAX之Fetch

Fetch是XMLHttpRequest的升级版。

Fetch特点：

  • 使用Promise。

  • 模块化设计，Response、Request、Header对象。

  • 通过数据流处理对象，支持分块读取。

5.3-axios

axios是基于promise的异步ajax请求库，axios的特点 1.支持请求/响应拦截器 ★ 2.浏览器端（ajax请求）/node端(一般的HTTP请求)都可以使用 3.支持请求取消 4.批量发送多个请求 --> promise.all也可以 5.请求/响应数据转换 --> 使用时写的是对象，axios自动转换成了json。接受时axios也自动将json转换为了对象

axios的post请求头默认是application/x-www-form-urlencoded，如果data是对象,默认Json。

原文链接：blog.csdn.net/qq_41370833…

6.用户体验

影响用户体验的两个方面：网络优化和稳定性。

网络优化如下图：

1659438836334.png ————————————————————————————————————————————————

稳定性：

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

image.png ————————————————————————————————————————————————

7.通信方式——WebSocket

Websocket是html5规范中的一个部分，它借鉴了socket这种思想，为web应用程序客户端和服务端之间（注意是客户端服务端）提供了一种全双工通信机制。 webSocket协议Tcp握手阶段是通过http通信完成的，目的是为了更好达到兼容。具体过程是我们在客户端构建一个websocket实例，并且为它绑定一个需要连接到的服务器地址，当客户端连接服务端的时候，会向服务端发送一个类似下面的http报文。

发送信息：

1659439270845.png

WebSocket特点：

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

原文链接：blog.csdn.net/weixin_4491…

8.个人总结

这是在青训营学习前端的第7天，今天主要讲的是HTTP协议的一些基础知识，我主要学习了HTTP的基础知识、方法和应用场景。对于我来说，我的个人基础比较差，对HTTP的基础原理等知识不是很清楚，所以我根据老师上课所说的知识+课外查询的资料整理成了以上这篇文章，主要针对前端需要涉及到的一些HTTP的基础原理，让大家能了解到基础知识，一起从底层基础开始学习，希望能帮助到大家，谢谢！

avatar
文章
阅读
粉丝