蛋炒饭的前端笔记

外观

HTTP 相关知识

HTTP 一共有八大请求方式，最常用的是 GET 和 POST。

常见的默认 GET 请求：

  • 浏览器地址栏输入网址时
  • 可以请求外部资源的 HTML 标签，例如：<img> <a> <link> <script>
  • form 表单提交时，若没有指明方式，默认使用 GET

HTTP 协议

HTTP 协议是无状态的，cookie 用于解决这个问题

  • HTTP 1.0：不支持长连接
  • HTTP 1.1：支持长连接，但是同时发送的资源数量过小
  • HTTP 2.0：同时发送的资源数量有所提升
    • 一个 TCP 连接可以请求多个资源，多路复用
    • 服务端推送，服务端可以对一个请求发送多个响应
    • 设置请求优先级，服务端根据请求所设置的优先级来分配资源
    • HTTP 头部压缩，减小体积

请求报文

### 请求报文首行:请求方式 协议名://主机地址:端口号/？urlencoded参数 HTTP协议名/版本
GET http://localhost:3000/?name=kobe&password=123 HTTP/1.1

### 请求头
Host: localhost:3000 # 发送请求的目标主机
Connection: keep-alive # 浏览器告诉服务器，浏览器支持长连接
Pragma: no-cache # 不走缓存
Cache-Control: no-cache # 不走缓存(强缓存)
Upgrade-Insecure-Requests: 1 # 浏览器告诉服务器可以使用 https或http1.1
DNT: 1 # 浏览器告诉服务器：禁止跟踪。最终是否跟踪，还得看服务器是否配合
User-Agent: Chrome/73.0.3683.75 Safari/537.36 ... # 用户代理，之前用于判断浏览器型号
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3 # 浏览器能够接收资源的类型及优先级，优先级q不写默认是1最高
Referer: http://localhost:63347/0719_node/demo.html?_ijt=tphpp47dag8jevtqrnq4 # 本次请求是“站”在哪里发出去的。可用于 1.防盗链。 2.广告计费
Accept-Encoding: gzip, deflate, br # 浏览器告诉服务器，浏览器所能接受的压缩文件类型
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7 # 浏览器告诉服务器，浏览器所能支持的语言种类
Cookie: Webstorm-9af2238=09820128-3adb-43e4-8242-a6f65c9e523a # Webstorm给你种下的cookie

### 空行
### 请求体：GET请求没有请求体

### POST请求
Content-Length: 22 # 返回数据的长度
Origin: http://localhost:63347 # 精简版的Referer
Content-Type: application/x-www-form-urlencoded # 浏览器告诉服务器，携带参数的类型
### 请求体
name=kobe&password=123
  • form 表单的 post 请求和 get 请求 参数均已 urlencoded 形式进行编码
  • get 请求将 urlencoded 编码的参数放入请求地址携带给服务器，所以称之为：查询字符串参数
  • post 请求将 urlencoded 编码的参数放入请求体，所以称之为：请求体参数

响应报文

### 响应报文首行
HTTP/1.1 200 OK # 协议名/协议版本 状态码

### 响应头
X-Powered-By: Express # 服务器所采用的框架
Content-Type: text/html; charset=utf-8 # 告诉浏览器返回资源的类型及编码格式
Content-Length: 2 # 返回数据的长度
ETag: W/"2-eoX0dku9ba8cNUXvu/DyeabcC+s" # 协商缓存必要字段
Connection: keep-alive # 服务器告诉浏览器，下次请求时，或许会采用长连接

### 空行
### 响应体
OK

状态码

  • 1XX：服务器收到请求，需要请求者继续执行操作
  • 2XX：请求成功
    • 200：请求成功
  • 3XX：重定向
    • 301：资源已永久转移到其他地址 Moved Permanently
    • 302：暂时重定向
    • 304：资源重定向到缓存，协商缓存 Not Modified
  • 4XX：客户端错误，请求包含语法错误或无法完成请求
    • 400：请求信息错误，服务器无法理解请求的格式 Bad Request
    • 401：请求需要用户身份认证 Unauthorized
    • 403：服务器拒绝客户端的请求 Forbidden
    • 404：服务器找不到请求的资源 Not Found
  • 5XX：服务器错误
    • 500：服务器内部错误 Internal Server Error
    • 502：服务器作为网关或代理，从上游服务器收到无效响应 Bad Gateway
    • 503：服务器当前无法处理请求 Service Unavailable
    • 504：服务器作为网关或代理，未及时从上游服务器收到响应 Gateway Timeout

本质就是一个【字符串】，里面包含着浏览器和服务器沟通的信息（交互时产生的信息）

  • 存储的形式以：【key-value】的形式存储
  • 浏览器会自动携带该网站的 cookie，只要是该网站下的 cookie，全部携带
  • 分类：
    • 会话 cookie（关闭浏览器后，会话 cookie 会自动消失，会话 cookie 存储在浏览器运行的那块【内存】上）
    • 持久化 cookie：（看过期时间，一旦到了过期时间，自动销毁，存储在用户的硬盘上,备注：如果没有到过期时间，同时用户清理了浏览器的缓存，持久化 cookie 也会消失）
  • 工作原理：
    • 当浏览器第一次请求服务器的时候，服务器可能返回一个或多个 cookie 给浏览器
    • 浏览器判断 cookie 种类：会话 cookie：存储在浏览器运行的那块内存上；持久化 cookie：存储在用户的硬盘上
    • 以后请求该网站的时候，自动携带上该网站的所有 cookie（无法进行干预）
    • 服务器拿到之前自己“种”下 cookie，分析里面的内容，校验 cookie 的合法性，根据 cookie 里保存的内容，进行具体的业务逻辑。
  • 应用： 解决 http 无状态的问题（例子：7天免登录，一般来说不会单独使用 cookie，一般配合后台的 session 存储使用）
  • 不同的语言、不同的后端架构 cookie 的具体语法是不一样的，但是 cookie 原理和工作过程是不变的
  • cookie 不一定只由服务器生成，前端同样可以生成 cookie，但是前端生成的 cookie 几乎没有意义
  • 对比浏览器的本地存储：
    • localStorage：
      • 保存的数据，只要用户不清除，一直存在
      • 作为一个中转人，实现跨页签通信
      • 保存数据的大小：5MB-10MB
    • sessionStorage：
      • 保存的数据，关闭浏览器就消失
      • 保存数据的大小：5MB-10MB
    • cookie：
      • 会话cookie——关浏览器消失、持久化cookie——到过期时间消失
      • 保存数据的大小:4K-8K
      • 主要用于解决http无状态(一般配合后端的session会话存储使用)
      • 浏览器请求服务器时，会自动携带该网站的所有cookie