这是我参与[第四届青训营]笔记创作活动的第七天。

一、初识：

什么是HTTP:

http(Hypertext transfer protocol)超文本传输协议，通过浏览器和服务器进行数据交互，进行超文本（文本、图片、视频等）传输的规定。也就是说，http协议规定了超文本传输所要遵守的规则。

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

二、协议分析：

发展：

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

HTPS：

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

报文：

Method

GET

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

POST

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

PUT

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

DELETE

删除指定的资源

HEAD

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

CONNECT

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

OPTIONS

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

TRACE

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

PATCH

用于对资源应用部分修改。

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

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

状态码：

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

RESTful API

RESTful API:

一种API设计风格;REST - Representational State Transfer (1)每一个URI代表一种资源; (2)客户端和服务器之间,传递这种资源的某种表现层; (3)客户端通过HTTP method，对服务器端资源进行操作，实现"表现层状态转化"。

缓存

强缓存：

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

协商缓存：

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

三、常见场景：

1.打开chrome(任意浏览器)

2.输入https:/ /www.toutiao.com

3．打开控制台

右键->检查 F12

4.切换到network

静态资源

登陆

静态资源：

缓存策略：

强缓存
Cache-control：一年

其他信息：

允许所有域名缓存
资源类型：CSS

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

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

四、实际应用：

浏览器篇：

function request(option){
if (String(option)!- ‘[object 0bject] ' ) return undefined
option.method = option.method ? option.method.toUpperCase( ) :'GET"option.data = option.data II0
var formData = []
for (var key in option.data)i
formData.push(  '.concat(key, '=', option.data[key]Y}
option.data = formData.join( '&')if (option.method ms= "GET') i
option.url += location .search.length am= 0 ? ".concat( ' ?' ， option.data) : ".concat( '&' ,option.data)
}
var xhr = new XMLHttpRequest()
xhr.responseType = option.responseType I "json'xhr.onreadystatechange = functhon(0{
if (xhr.readyState aes 4){
if (xhr.status === 200){
if 〔option.success 6& typeof option.success ms 'function')foption.success( xhr.response)
}
}else i
if (option.error 8& typeof option.error a== 'function') {option.error()
}
}}}
xhr.open(option.method,option.url,true)if (option.method =ae "POST')i
xhr.setRequestHeader( 'Content-Type'， 'application/x-www-form-urlencoded')}
xhr.send(option.method mm 'POST'? option.data : null)

AJAX之Fetch：

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

常用的请求库：axios

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

用户体验：

稳定性：

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

五、了解更多：

通信方式：

WebSocket

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

QuIC: Quick UDP lInternet Connection

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

HTTP实用指南|青训营笔记