前端数据交互与HTTP协议

一、初识前后端通信

1.前后端通信是什么

前端和后端数据交互的过程==浏览器和服务器之间数据交互的过程

2.后端向前端发送数据

访问页面

3.前端向后端发送数据

用户注册页面

二、前后端通信的过程与概念解释

1.前后端通信的过程

前后端通信是在“请求-响应”中完成的。

2.概念解释

（1）前端：就是浏览器端；
（2）客户端：只要能和服务器通信的就叫客户端；例：（命令行工具： curl https:www.imooc.com）
（3）后端：就是服务器端；

三、前后端的通信方式

1.使用浏览器访问网页

在浏览器地址栏注入网址，按下回车。

2.HTML标签

（1）浏览器在解析HTML标签的时候，遇到一些特殊的标签，会再次向服务器发送请求；常见的有：（link/img/script/iframe）。
注：chrom浏览器6通道解析数据。
（2）还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求：（a/form）

3.Ajax和Fetch

四、初识HTTP

1.HTTP是什么

HyperText Transfer Protocol（超文本传输协议）
（1）超文本：原先一个个单一的文本，通过超链接将其联系起来。由原先的单一的文本变成了可无限延伸、扩展的超级文本、立体文本。
（2）HTML、JS、CSS、图片、字体、音频、视频等等文件，都是通过HTTP在服务器和浏览器之间传输。
（3）每一次前后端通信，前端需要主动向后端发出请求，后端接收到前端的请求后，可以给出响应。
（4）HTTP是一个“请求-响应”协议。

2.HTTP请求响应的过程

3.HTTP报文

（1）HTTP报文是什么
浏览器向服务器发送请求时，请求本身就是信息，叫请求报文；
服务器向浏览器发送响应时传输的信息，叫响应报文；
（2）HTTP报文格式

请求：请求头（起始行、首部）+请求体
响应：响应头（起始行、首部）+响应体
注：GET请求没有请求体，数据通过请求头携带；POST请求有请求体，数据通过请求体携带

4.HTTP方法

（1）常用的HTTP方法（浏览器发送请求时采用的方法，和响应无关）：
GET、POST、PUT、DELETE
用来定义对于资源什么样的操作的，有各自的语义。
（2）HTTP方法的语义：增删改查
GET获取数据：获取资源（文件）
POST创建数据：注册
PUT更新数据：修改个人信息、修改密码
DELETE删除数据：删除一条评论
（3）RESTful接口设计
一种接口设计风格，充分利用HTTP方法的语义.

通过用户ID获取个人信息，使用GET方法：
https://www.baidu.com/api/http/getUser?id=1
注册新用户，使用POST方法：
https://www.baidu.com/api/http/addUser
修改一个用户，使用POST方法：
https://www.baidu.com/api/http/modifyUser
删除一个用户，使用POST方法：
https://www.baidu.com/api/http/deleteUser

5.GET和POST方法的对比

（1）语义：
GET：获取数据；POST：创建数据
（2）发送数据：
GET通过地址在请求头中携带数据，能携带的数据量和地址的长度有关系，一般最多就几K；
POST既可以通过地址在请求头中携带数据，也可以通过请求体携带数据，携带的数据理论上是无限的。
携带少量数据，可以使用GET请求，大量的数据可以使用POST请求
（3）缓存：
GET可以被缓存，POST不会被缓存。
（4）安全性：
GET和POST都不安全。
发送密码或其他敏感信息时不要使用GET，主要是避免直接被他人窥屏或者通过历史记录找到密码。

6.HTTP状态码

（1）HTTP状态码是什么：
定义服务器对请求的处理结果，是服务器返回的。
（2）HTTP状态码的语义：
100-199消息：代表请求已被接受，需要继续处理，一般用在websocket；
200-299消息：成功；
300-399消息：重定向；（301 Moved Permanently/302 Move Temporarily/304 Not Modified）
400-499消息：请求错误；（400 Bad Request/404 Not Found）
500-599消息：服务器错误；（500 Internal Server Error）