105-《前后端交互》-http协议目录什么是http协议 http的工作流程请求请求类型 get和post 的区

一、http协议简介

前提：通过学习http协议能够深入理解前后端数据是如何进行交互的（即前端是通过什么方式将数据传递给后端，后端是通过什么返回数据给前端的）

1.1 http协议概念

在生活中，沟通是日常内容。计算机之间的数据沟通是通过根据数据的类型不同采用不同的方式去处理。
- 计算机之间的沟通（数据交互）
  - 邮件：smtp协议处理
  - 文件：ftp协议处理
  - 网站数据：http协议处理
- 人与人沟通：自然语言（中文、英语、其他）
http协议（超文本传输协议：hyper-text transfer protocol）：电脑之间超文本数据的传输规范。超文本就是前端代码（html、css、js、图片、视音频）
http协议本质上在电脑中是一个处理程序，能够在计算机中处理跟超文本传输相关的所有工作。
http协议主要内部核心概念
- 请求
- 响应
- 状态码

1.2 http协议的工作流程

当浏览器要发送数据数据到服务器（页面输入服务器地址或通过js代码）时，http协议就会开始工作：http协议会根据服务器地址判断该服务器是否存在（即预检请求），如果不存在直接返回404页面给浏览器。如果存在，http协议会将浏览器要发送的数据以及一些配置信息包装成http协议的专属数据-请求发送给服务器，服务器接受后http协议工作暂停，数据服务器拿到后自己处理，处理后http协议继续工作，将服务器要返回的数据（res.send()）以及配置信息包装成http专属数据格式-响应返回给浏览器（前端），浏览器自行解析数据并处理（渲染在页面上，或通过js代码处理）。这样http协议就完成了一次完整的工作流程。
总结：将浏览器的数据包装成请求发送给服务器，以及将服务器返回的数据包装成响应发送给浏览器（前端）

二、请求和响应

2.1 请求（request）

概念：每次浏览器和服务器进行数据交互时，都会有一个请求以及一个响应。请求是http协议的专属数据格式，主要用于在浏览器和服务器之间进行传输。
请求组成
- 请求头：包含了该次数据交互的一些配置信息。比如服务器地址是哪、http协议的版本、传输的一些其他配置。比如请求数据的长度、请求携带数据的类型，是否压缩之类的。一般请求头不用设置，保持默认即可。
- 请求体（可选）：主要包含要发送给服务器的非明文数据，请求体是根据请求类型的不同来决定是否有请求体。
常见的请求头（一部分）
- Accept:期望接收的数据类型
- content-Length:请求体的数据字符长度，无请求体为0
- connection:浏览器和服务器的连接方式：keep-alive: 长连接
- content-type：请求体的数据类型
- Cache-Control:是否启动缓存
- Accept-Encoding:支持的扩展数据类型。比如支持压缩
- host:发送请求的域名，即服务器地址
请求类型
- 前提：因为有的时候发送的数据不宜明文展示，比如密码之类的，http协议就提供了多种请求类型来满足不同的发送需求
- 分类
  - get：默认请求类型：一般用于向服务器获取数据。当然也支持发送数据，但通过get方式发送的数据会直接拼接在请求地址的后面:/movie/add?title=子弹飞.。浏览器直接输入地址也是用的get方式
  - post：一般是用于发送数据（比如新增、登录之类的），并且数据时通过请求体发送的，请求体是非明文发送，相比get会安全一些。
  - put：基本跟post是一致的，put更适用于更新数据。
  - delete：基本跟post是一致的，delete适用于删除的数据交互
  - ….
  - 实际：在公司里基本上只用get和post，put和delete比较少用
    - get：一般用于各种查询操作
    - post：适用于各种新增、修改、删除、上传文件等
在代码中指定请求类型
- <form method>:表单标签<form>有个method能够指定表达的提交请求类型，默认是get，可以修改为post或其他类型
```
<form method="post"></form>
```
- 利用js的ajax技术
- 使用apifox进行设置()
服务器需要配置请求类型
- Express项目
  - 提供了多个api用于处理各种的请求类型：
    - router.get()：处理get请求
    - router.post():处理post请求
    - router.put():处理put请求
    - router.delete():处理delete请求
  - 从get切换为post
```
router.get()  切换为 router.post()  参数保持不变
```
  - 接受数据的方式不同
    - 针对get请求使用req.query接受
    - 针对非get请求使用req.body接受数据
```
router.get('/find',function(){
    let {name} = req.query;
})
router.post('/add',function(){
    let {name} = req.body;
})
```
- get和post请求的区别
  - 数据：get是明文发送，post是非明文发送
  - 发送数据大小限制
    - get：2kb
    - post:不限大小
  - 应用
    - get一般是获取数据，比如查询
    - post一般是发送数据，比如新增和修改

2.2 响应

概念：响应是服务器要返回的数据以及一些配置信息包装的一种数据格式，是http协议专属，主要用于服务器向浏览器之间的传输。响应由http协议传输给浏览器之后，浏览器会解析数据并处理（渲染在页面上或js代码处理）
组成
- 响应头（response headers）：包含了状态码以及其他配置信息
- 响应体：包含服务器返回的数据（在Express项目中，就指的是res.send中的数据）
常见

响应头

配置项
- Access-Control-Allow-Origin：允许哪些域名可以跨域请求该服务器数据。*表示任何一个域名都可以访问服务器。
- Location: www.baidu.com(服务端需要客户端访问的页面路径)
- Server:apache tomcat（这是一种基本的测试服务器，大型公司都会有自己测试服务器） (服务端的Web服务端名
- Content-Encoding: gzip (服务端能够发送压缩编码类型)
- Content-Length: 888 (响应体数据的长度)
- Content-Language: zh-cn (服务端发送的语言类型)
- Content-Type:application/json;charset=UTF-8 (服务端返回数据的类型及采用的编码方式)
- Last-Modified: Mon, 22 May 2017 09:41:07 GMT (服务端对该资源最后修改的时间)
- Refresh: 1;url=www.baidu.com(服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)
- Content-Disposition: attachment; filename=aaa.zip (服务端要求客户端以下载文件的方式打开该文件
- Transfer-Encoding: chunked (分块传递数据到客户端）
- Set-Cookie:SS=Q0=5Lb_nQ; path=/search (服务端发送到客户端的暂存数据)
- Expires: -1//3种 (服务端禁止客户端缓存页面数据)
- Cache-Control: no-cache (服务端禁止客户端缓存页面数据)
- Pragma: no-cache (服务端禁止客户端缓存页面数据)
- Connection: close(1.0)/(1.1)Keep-Alive (维护客户端和服务端的连接关系)
- Date: Mon, 22 May 2017 18:41:07 GMT (服务端响应客户端的时间)

三、http状态码

概念：状态码是指每次http请求处理的状态编号，随着请求处理的结果不同，会有不同的数字来表示，状态码可以快捷的看出这次请求处理结果是什么。每一次请求响应都有一个状态码

3.1 常见状态码

200:请求正常处理完毕，一般指请求处理成功
304：要请求的资源未修改，如有缓存则使用缓存。
404：资源未找到。表示该请求处理失效
401：登录已失效。一般表示登录已过有效期
403：请求被拒绝：可能浏览器发送的请求不符合服务器接受的标准
500：一般是指服务器发生错误，一般是后端代码有问题。