前后端交互——HTTP请求及协议格式详解

浏览器和服务器之间数据交互的过程

一、初识前后端通信

1.前后端通信的过程

前端：浏览器端
客户端：只要能和服务器通信的就叫客户端（curl https:www.imooc.com）
后端：服务器端

2.前后端通信的方式

（1）使用浏览器访问网页
在浏览器地址栏输入网址，按下回车即请求
（2）HTML的标签
浏览器在解析HTML标签的时候，遇到一些特殊的标签，会再次向服务器发送请求（link/script/iframe/img）
还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求（a/form）
（3）Ajax和Fetch

二、HTTP协议

1.初识HTTP

HTTP(HyperText Transfer Protocol)超文本传输协议，HTML、JS、CSS、图片、字体、音频、视频等文件，都是通过HTTP在服务器和浏览器之间传输。
每一次前后端通信，前端需要主动向后端发出请求，后端接收到前端的请求后，可以给出响应。HTTP是一个请求-响应协议。(浏览器和服务器之间遵循的协议)

2.HTTP请求过程

3.HTTP报文

报文是什么

浏览器向服务器发送请求时，请求本身就是信息，叫请求报文。
服务器向浏览器发送响应时传输的信息，叫响应报文。

HTTP报文格式

1.请求报文
请求行：起始行
请求头：首部
请求体：
GET请求，没有请求体，数据通过请求头携带（通过GET方法，发送的数据会在网址栏中体现出来）
POST请求，有请求体，数据通过请求体携带

2.响应报文
响应头：起始行+首部
响应体

HTTP方法

1.常用的HTTP方法

浏览器发送请求时采用的方法，和响应无关
GET（获取数据） POST（创建数据） PUT（更新数据） DELETE（删除数据）
用来定义对于资源采取什么样的操作的，有各自的语义

2.GET和POST方法的对比

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

HTTP状态码

查看状态码含义

1.HTTP状态码是什么

定义服务器对请求的处理结果，是服务器返回的

2.HTTP状态码的语义

• 100-199 代表请求已被接受，需要继续处理
• 200-299 成功
• 300-399 重定向（301永久移动 302暂时移动 304没有修改）
• 400-499 请求错误（404notfound ）
• 500-599 服务器错误

HTTP请求报文格式详解

1.请求头（起始行+首部）

（此部分内容参考原文章）
请求头由若干个键值对构成(记录浏览器的一些相关信息)
格式： 名字: 值（冒号后面有空格）
查看请求头具体含义

Host

Host表示该请求对应的服务器的地址。

Content-Length

表示请求体的长度，只有post请求才会有，单位是字节。

Content-Type

表示请求体的格式，只有post请求才会有，取值如下：

• application/x-www-form-urlencoded:form表单提交的数据格式（默认的编码方式，将请求参数按照URL编码的形式进行编码，例如name=value&name2=value2。）
• multipart/from-data:使用HTML时提交图片/文件时，会出现的格式（一般用于文件上传，将请求参数按照multipart的方式进行编码，每个参数都会有一个独立的Content-Disposition字段，以及对应的数据。）
• application/json：数据为json格式，键值对形式

User-Agent

表示是浏览器/操作系统的属性，可以用来区分是windows还是android或是ios

Referer

表示该页面是从哪个页面跳转过来的，如果直接在网址中输入url则是没有referer的

Cookie

键值对的形式，所表示的含义，由程序员自定义

请求体

通常用来向服务器发送数据，例如表单提交、上传文件等。

HTTP响应报文格式详解

响应体

常见响应体的内容格式：

• HTML
• CSS
• JavaScript
• 图片
• 视频
• JSON