HTTP协议及缓存机制
前端工程师开发界面，需要调用后端的接口，提交/获取数据<——>http协议，这要求我们事先掌握好 Ajax
# 1.几道面试题（以点带面）
- http 常见的状态码有哪些？
- http 常见的 header 有哪些？
- 什么是 Restful API
- 描述一下http的缓存机制（重要）
# 2.涉及知识点
# 2.1 http状态码
# 状态码分类
- 1xx：服务器收到请求
- 2xx：请求成功，如200
- 3xx：重定向，如302
- 4xx：客户端错误，如404
- 5xx：服务端错误，如500
# 常见状态码
| 常见状态码 | 含义 |
|---|---|
| 200 | 成功 |
| 301 | 永久重定向（配合location,浏览器自动处理） |
| 302 | 临时重定向（配合location,浏览器自动处理） |
| 304 | 资源未被修改 （之前请求过了，服务器这边对该资源暂未做改动，故不发送数据，客户端用本地缓存即可） |
| 404 | 资源未找到 |
| 403 | 没有权限 |
| 500 | 服务器错误 |
| 504 | 网关超时 |
# 关于协议和规范
- 就是一个约定
- 要求大家都跟着执行
- 不要违反规范，例如IE浏览器
# 2.2 http methods
# 传统的methods
- get 获取服务器的数据
- post 向服务器提交数据
- 简单的网页功能，就这两个操作
# 现在的methods
- get 获取数据
- post 新建数据
- patch/put 更新数据
- delete 删除数据
# Restful API
- 一种新的API设计方法（早已推广使用）
- 传统API设计：把每个url当做一个功能
- Restful API设计：把每个url当做一个唯一的资源
# 2.3 如何将url设计成一个资源
- 尽量不用 url 参数
- 用method表示操作类型
# 不使用 url 参数
- 传统API设计：
/api/list?pageIndex=2 - Restful API设计：
/api/list/2
# 用method表示操作类型（传统API设计）
- post 请求
/api/create-blog - post请求
/api/update-blog?id=100 - get 请求
/api/get-blog?id=100
# 用method表示操作类型（Restful API设计）
- post请求
/api/blog - patch请求
/api/blog/100 - get请求
/api/blog/100
# 2.4 http headers
- 常见的 Request Headers（请求时客户端向服务端发送的headers）
- 常见的 Response Headers（服务端向客户端返回时发送的headers）
# Request Headers
| Request Headers | 含义或用途 |
|---|---|
| Accept | 浏览器可接收的数据格式 |
| Accept-Encoding | 浏览器可接收的压缩算法，如gzip |
| Accept-Languange | 浏览器可接收的语言，如 zh-CN |
| Connection:keep-alive | 一次TCP连接重复使用 |
| cookie | 同域时发送给服务端的文本数据（浏览器自带） |
| Host | 请求的域名 |
| User-Agent(简称UA) | 浏览器信息 |
| Content-type | 发送数据的格式，如 application/json |
# Response Headers
| Response Headers | 含义或用途 |
|---|---|
| Content-type | 返回数据的格式，如 application/json |
| Content-length | 返回数据的大小，多少字节 |
| Content-Encoding | 返回数据的压缩算法，如gzip |
| Set-Cookie | 服务器可通过该响应头修改cookie |
# 自定义header
- 客户端或者服务器端都可添加自定义的header
- header名和对应的值都无限制，只要不和已规范的其他固定header名冲突即可
- 可以用做简单的权限验证，比如客户端只有发送了某个自定义header和特定的对应值，服务器端验证合法后，才能成功请求到对应API的资源
# 缓存相关的 headers
- Cache-Control
- Expires
- Last-Modified
- If-Modified-Since
- Etag
- If-None-Match
# 2.5 http缓存
# 关于缓存
- 什么是缓存？是存贮数据（使用频繁的数据）的临时地方
- 为什么需要缓存？减轻服务器压力，减少网络延迟，加快页面打开速度
- 哪些资源可以被缓存？一大部分情况只有静态资源（js、css、img)
# 强制缓存（cache-control和Expires）
# Cache-Control
- 该响应头在Response Headers 中，故只被服务器端控制
- 控制强制缓存的逻辑
- 例如 Cache-Control:max-age=31536000(单位是秒），意思是服务器要求把对应资源缓存在客户端中一年时间
| cache-control的值 | 作用 |
|---|---|
| max-age | 常用，设置缓存的最大过期时间 |
| no-cache | 常用，不用强制缓存，正常向服务端发起请求，像html这种资源可以用该值 |
| no-store | 不用强制缓存，也不用服务端的缓存措施（如协商缓存），只要服务端正常返回一份资源 |
| private | 只允许最终的用户缓存，即用户手中的电脑、手机等终端 |
| public | 允许传输时中间的某些路由或代理进行缓存 |
# 关于 Expires
- 同在 Response Headers 中
- 同为控制缓存过期
- Expires是老标准，已被 Cache-Control 代替，不过浏览器暂时仍兼容Expires
# 协商缓存（又称对比缓存）
- 这是服务器端缓存策略
- 服务器判断客户端资源，是否和服务端资源一样
- 一致则返回304,否则返回200和最新的资源
# 资源标识
- 在Response Headers中，有两种
Last-Modified资源的最后修改时间Etag资源的唯一标识（一个字符串，类似人类的指纹）
# Last-Modified
注意：If-Modified-Since的值是直接拷贝Last-Modified的值，故If-Modified-Since==Last-Modified，只是If-Modified-Since是在Request Headers中，Last-Modified是在Response Headers中
# Etag
注意：If-None-Match的值是直接拷贝Etag的值，故If-None-Match==Etag，只是If-None-Match是在Request Headers中，Etag是在Response Headers中
# Last-Modified 和 Etag对比
- 会优先使用 Etag
- Last-Modified 只能精确到秒级
- 如果资源被重复生成，而内容不变，则Etag更精确
# 缓存综述流程图
# 2.6 刷新页面对http缓存的影响
# 三种刷新操作
- 正常操作：地址栏输入url,跳转链接，前进后退等
- 手动刷新：F5键,点击刷新按钮，右击菜单刷新
- 强制刷新：Ctrl+F5键
# 不同刷新操作，不同的缓存策略
- 正常操作：强制缓存有效，协商缓存有效
- 手动刷新：强制缓存失效，协商缓存有效
- 强制刷新：强制缓存失效，协商缓存失效
# 3.对前文问题的解答
# 3.1 http 常见的状态码有哪些？
| 常见状态码 | 含义 |
|---|---|
| 200 | 成功 |
| 301 | 永久重定向（配合location,浏览器自动处理） |
| 302 | 临时重定向（配合location,浏览器自动处理） |
| 304 | 资源未被修改 （之前请求过了，服务器这边对该资源暂未做改动，故不发送数据，客户端用本地缓存即可） |
| 404 | 资源未找到 |
| 403 | 没有权限 |
| 500 | 服务器错误 |
| 504 | 网关超时 |
# 3.2 http 常见的 header 有哪些？
参考2.4节，说出来三五个也基本过关了
# 3.3 什么是 Restful API
传统API把每个url当做一个功能，Restful API则把每个url当做一个唯一的资源。设计Restful API时，应不用 url 参数，并使用method表示操作类型。
# 3.4 描述一下http的缓存机制
参考2.5节，把缓存综述流程图完整画出来就没问题了