前端

这篇笔记记录了前端开发中常用的一些HTTP协议知识。

一、本堂课重点内容

  • HTTP的发展
  • HTTP协议分析

二、详细知识点介绍

1、HTTP的发展

  • HTTP/0.9 单行协议
    • 请求GET /mypage.html
    • 响应只有HTML文档
  • HTTP/1.0 构建可扩展性
    • 增加了Header
    • 有了状态码
    • 支持多种文档类型
    • …
  • HTTP/1.1 标准化协议
    • 链接复用
    • 缓存
    • 内容协商
    • …
  • HTTP/2 更优异的表现
    • 二进制协议
    • 压缩header
    • 服务器推送
    • …
  • HTTP/3草案

2、状态码

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

3、常用请求头

  • Accept
  • Content-type
  • Cache-Control：指定请求和响应遵循的缓存机制，如no-cache
  • If-Modified-Since：对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确1s以内
  • Expires：缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间
  • Max-age：代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
  • If-None-Match：对应服务端的Etag，用来匹配文件内容是否改变（非常精确）
  • Cookie
  • Referer
  • Origin：最初的请求是从哪里发起的（只会精确到端口），Origin比Referer更尊重隐私
  • User-Agent

4、常用响应头

  • Content-type
  • Cache-Control：指定请求和响应遵循的缓存机制，如no-cache
  • Last-Modified：请求资源的最后修改时间
  • Expires：应该在什么时候认为文档已经过期，从而不再缓存它
  • Max-age：客户端的本地资源应该缓存多少秒，开启了Cache-Control之后有效
  • ETag：资源的特定版本的标识符，类似于指纹
  • Set-Cookie：设置和页面关联的Cookie，服务器通过这个头部把cookie传给客户端
  • Server：服务器的一些相关信息
  • Access-Control-Allow-Origin：服务器端允许请求的头部

5、缓存

  • 强缓存
    • Expires：时间戳
    • Cache-Control
      • 可缓存性
        • no-cahche：协商缓存验证
        • no-store：不使用任何缓存
      • 到期
        • max-age：单位是秒，存储相对于请求的时间的最大周期
      • 重新验证&重新加载
        • must-revalidate：一旦资源过期，在成功向原始服务器验证之前，不能使用
  • 协商缓存
    • ETag/If-None-Match：资源的特定版本的标识符，类似于指纹
    • Last-Modified/If-Modified-Since：最后修改时间
  • 缓存操作流程图

image.png

6、Cookie

  • Name=Value：各种cookie的名称和值
  • Expires=date：cookie的有效期，缺省时cookie仅在浏览器关闭前有效
  • Path=path：限制指定cookie的发送范围的文件目录，默认为当前
  • Domain=domain：限制cookie生效的域名，默认为创建cookie的服务域名
  • Secure：仅在https安全连接时，才可以发送cookie
  • HttpOnly：JavaScript脚本无法获得cookie
  • SameSite=[None|Strict|Lax]
    • None同站、跨站请求都可以发送
    • Strict仅在同站发送
    • Lax允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送

7、HTTP/2概述

  • 更快、更稳定、更简单
  • 最小单位为帧（frame），其中frame body部分存储HTTP/1.x的内容
  • 消息：与逻辑请求或响应消息对应的完整的一系列帧
  • 数据流：已建立的连接内的双向字节流，可以承载一条或多条消息
  • HTTP/2的连接都是永久的，而且仅需要每个来源一个连接
  • 流控制：阻止发送方向接收方发送大量数据的机制
    • 举个例子，客户端在观看一个视频到一半以后暂停，这时浏览器就没有必要再接收服务器发来的视频信息
  • 服务器推送：服务器根据请求的内容推测出其他所需的内容，一次性发送（例如请求HTML，则会有响应的CSS、JavaScript文件）

8、单点登录

  • 将登录系统抽离出来，实现一次登录即可访问多个系统

三、实践练习例子

  • 使用fetch发起一个GET请求
//请求的网址
let url = "http://127.0.0.1:7777/list";
//发起get请求
let promise = fetch(url).then(function(response) {
   //response.status表示响应的http状态码
   if(response.status === 200){
     //json是返回的response提供的一个方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了
     return response.json();
   }else{
     return {}
   }
});
promise = promise.then(function(data){
  //响应的内容
	console.log(data);
}).catch(function(err){
	console.log(err);
})

四、课后个人总结

  • 其实这一章的内容在实践中或多或少有所接触，但是并没有深入了解，尤其是请求数据和响应数据中各字段的含义，以及session、cookie和单点登录的原理

五、引用参考