HTTP使用指南|青训营笔记

星倦756
90 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

01、初识HTTP

image-20230120150742266.png

image-20230120150722649.png

什么是HTTP？

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

02、协议分析

协议分析的发展

HTTP/0.9单行协议

  • 请求GET/mypage.html
  • 响应只有HTML文档

HTTP/1.0构建可扩展性

  • 增加了Header
  • 有了状态码
  • 支持多种文档类型

HTTP/1.1标准化协议

  • 链接复用
  • 缓存
  • 内容协商

HTTP/2更优异的表现

  • 二进制协议
  • 压缩header
  • 服务器推送

HTTP/3草案

协议分析报文

Method

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

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

ldempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的 所有safe的方法都是Idempotent的GET HEAD OPTIONS PUT DELETE。

状态码

image-20230120151917958.png

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

RESTful API

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

（1）每一个URI代表一种资源；

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

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

常用请求头
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(适用于所有类型的请求，会精确到详细页面地址，csr拦截常用到这个字段)
Origin最初的请求是从哪里发起的（只会精确到端口)，Origin比Referer更尊重隐私
User-Agent用户客户端的一些必要信息，如UA头部等
常用响应头
Content-Type服务端返回的实体内容的类型
Cache-Control指定请求和响应遵循的缓存机制，如no-cache
Last-Modified请求资源的最后修改时间
Expires应该在什么时候认为文档已经过期，从而不再缓存它
Max-age客户端的本地资源应该缓存多少秒，开启了Cache-Controll后有效
ETag资源的特定版本的标识符，Etags类似于指纹
Set-Cookie设置和页面关联的cookie,服务器通过这个头部把cookie传给客户端
Server服务器的一些相关信息
Access-Control-Allow-Origin服务器端允许的请求Drigin头部（譬如为*）

缓存

强缓存

Expires,时间戳

Cache-Control

  • 可缓存性

    • no-cache:协商缓存验证
    • no-store：不使用任何缓存

到期

  • max-age:单位是秒，存储的最大周期，相对于请求的时间

重新验证*重新加载

  • must-revalidate:一旦资源过期，在成功向原始服务器验证之前，不能使用

协商缓存

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

image-20230120152615426.png

03、场景分析

静态资源

  • 静态资源方案：缓存+CDN+文件名hash
  • CDN:Content DeliveryNetwork
  • 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

跨域

  • CORS (Cross-Origin Resource Sharing

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

  • 相关协议头

    • Access-Control-Allow-Origin

    • Access-Control-Expose-Headers

    • Access-Control-Max-Age

    • Access-Control-Allow-Credentials

    • Access-Control-Allow-Methods

    • Access-Control-Allow-Headers

    • Access-Control-Request-Method

    • Access-Control-Request-Headers

    • Origin

image-20230120152901364.png

跨域解决方案

  • CORS

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

  • Iframe

    • 诸多不便

04、实战

AJAX之XHR

  • XHR:XMLHttpRequest
  • readyState
0UNSENT代理被创建，但尚未调用open（）方法
1OPENEDopen（）方法已经被调用
2HEADERS_RECEIVEDsend0方法已经被调用，并且头部和状态已经可获得
3LOADING下载中；responseText属性已经包含部分数据
4DONE下载操作已完成。

AJAX之Fetch

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

用户体验

image-20230120153105772.png

稳定性

image-20230120153159844.png

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