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

前言

了解HTTP协议有助于更好的学习前端开发，对于实际应用有着巨大的帮助。

初始

什么是HTTP

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

Method

用法

GET

请求一个指定资源的表示形式使，用GET的请求应该只被用于获取数据

POST

用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用

PUT

用请求有效载荷替换目标资源的所有当前表示

DELETE

删除指定的资源

HEAD

请求一个与GET请求的响应相同的响应，但没有响应体

CONNECT

建立一个到由目标资源标识的服务器的隧道

OPTIONS

用于描述目标资源的通信选项

TRACE

沿着到目标资源的路径执行一一个消息环回测试

PATCH

用于对资源应用部分修改

Method的一些特点：

Safe(安全的):不会修改服务器的数据的方法

eg：GET HEAD OPTIONS

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

状态码

RESTful API

RESTful API :一种API设计风格;

REST：Representational State Transfer

每一个URI代表一种资源;
客户端和服务器之间，传递这种资源的某种表现层﹔
客户端通过HTTP method，对服务器端资源进行操作，实现"表现层状态转化"。

请求

返回码

含义

GET/zoos

200 OK

列出所有动物园，服务器成功返回了

POST/zoos

201 CREATED

新建一个动物园，服务器创建成功

PUT/zoos/ID

400 INVALID REQUEST

更新某个指定动物园的信息(提供该动物园的全部信息) 用户发出的请求有错误,服务器没有进行新建或修改数据的操作

DELETE/zoos/ID

204 NO CONTENT

删除某个动物园，删除数据成功

常用请求头

接收类型，表示浏览器支持的MIME类型(对标服务端返回的Content-Type)

Content-Type

客户端发送出去实体内容的类型

Cache-Control

指定请求和响应遵循的缓存机制，如no-cache

lf-Modified-Since

对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内

Expires

缓存控制,在这个时间内不会请求，直接使用缓存,服务端时间

Max-age

代表资源在本地缓存多少秒,有效时间内不会请求,而是使用缓存

lf-None-Match

对应服务端的ETag，用来匹配文件内容是否改变（非常精确)

有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头部（譬如为*)

缓存

Cookie

Set - Cookie - response

Name=value

各种cookie的名称和值

Expires=Date

Cookie的有效期,缺省时Cookie仅在浏览器关闭之前有效。

Path=Path

限制指定Cookie的发送范围的文件目录，默认为当前

Domain=domain

限制cookie生效的域名，默认为创建cookie的服务域名

secure

仅在HTTPS安全连接时，才可以发送Cookie

HttpOnly

JavaScript脚本无法获得Cookie

SameSite=None/Strict/Lax

1.None同站、跨站请求都可发送 2.Strict仅在同站发送 3.允许与顶级导航一起发送,并将与第三方网站发起的GET请求一起发送未经授权严禁录制

持续发展

HTTP/2

HTTP/2概述：更快、更稳定、更简单

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

消息:与逻辑请求或响应消息对应的完整的一系列帧
数据流:已建立的连接内的双向字节流,可以承载一条或多条消息
交错发送,接收方重组织

HTTP/2连接都是永久的，而且仅需要每个来源一个连接
流控制︰阻止发送方向接收方发送大量数据的机制
服务器推送

HTTPS

HTTPS : Hypertext Transfer Protocol Secure
经过TSL/SSL加密
对称加密︰加密和解密都是使用同一个密钥
非对称加密，加密和解密需要使用两个不同的密钥︰公钥(public key)和私钥(private key)

场景分析

静态资源

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

CDN : Content Delivery Network

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

跨域

解决跨域的方法：

1. CORS (Cross-Origin Resource Sharing )

预请求︰获知服务端是否允许该跨源请求（复杂请求)

代理服务器

同源策略是浏览器的安全策略,不是HTTP的

Iframe

诸多不便

发起请求

浏览器

AJAX之XHR

XHR:XMLHttpRequest

readyState

UNSENT

代理被创建，但尚未调用open()方法

OPENED

open()方法已经被调用

HEADERS_RECEIVED

send()方法已经被调用，并且头部和状态已经可获得

下载中; responseText属性已经包含部分数据

DONE

下载操作已完成

AJAX之Fetch

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

node

标准库:HTTP/HTTPS

默认模块，无需安装其他依赖
功能有限/不是十分友好

常用的请求库:axios

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

用户体验

网络优化

稳定性

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

了解更多

不止HTTP协议这一个选择

WebSocket

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

HTTP实用指南｜ 青训营笔记

前言

初始