目录
一、前后端通信
通信即信息的传递和交换
通信三要素：
- 通信主体
- 通信内容
- 通信方式
什么是通信协议：
通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。
通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议。
互联网中的通信协议：
客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。
网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol） ，简称 HTTP 协议。
1.1 初识前后端通信
a.前后端通信是什么
前端和后端数据交互的过程
浏览器和服务器之间数据交互的过程
b.后端向前端发送数据
例如：访问页面
c.前端向后端发送数据
例如：用户注册
1.2 前后端通信的过程与概念理解
a.前后端通信的过程
前后端的通信是在‘请求-响应’中完成的
b.概念解释
前端：浏览器端
后端：服务器端
客户端：只要能和服务器通信的就叫客户端
例如通过命令行工具向慕课网发送请求：
curl https:www.imooc.com
截图如下：
1.3 前后端通信方式
i.使用浏览器访问网页
在浏览器地址栏输入网址，按下回车
ii.HTML 的标签
- 浏览器在解析 HTML 标签的时候，遇到一些特殊的标签，会再次向服务器发送请求，例如：link/img/script/iframe等
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>前后端的通信方式</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<img src="./index.png" alt="" />
<script src="./index.js"></script>
<!--
i.使用浏览器访问网页
在浏览器地址栏输入网址，按下回车
ii.HTML 的标签
浏览器在解析 HTML 标签的时候，遇到一些特殊的标签，会再次向服务器发送请求
例如：link/img/script/iframe等
还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求
例如：a/form
iii.Ajax 和 Fetch
-->
<script>
</script>
</body>
</html>
- 还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求， 例如：a/form
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>前后端的通信方式</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<a href="https://www.imooc.com">慕课网</a>
<form action="https://www.imooc.com" method="post">
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<input type="submit" value="注册" />
</form>
<script src="./index.js"></script>
<!--
i.使用浏览器访问网页
在浏览器地址栏输入网址，按下回车
ii.HTML 的标签
浏览器在解析 HTML 标签的时候，遇到一些特殊的标签，会再次向服务器发送请求
例如：link/img/script/iframe等
还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求
例如：a/form
iii.Ajax 和 Fetch
-->
<script>
</script>
</body>
</html>
当点击a标签后才会向服务器发送请求：
当点击“注册”按钮后才会向服务器发送请求：
iii.Ajax 和 Fetch
具体可参考：
https://blog.csdn.net/weixin_43285360/article/details/121340827二、初识HTTP
2.1 HTTP 是什么
- HyperText Transfer Protocol
- 超文本传输协议，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式
- HTML：超文本标记语言
例如：
超文本：原先一个个单一的文本，通过超链接将其联系起来。由原先的单一的文本变成了可无限延伸、扩展的超级文本、立体文本
HTML、JS、CSS、图片、字体、音频、视频等等文件，都是通过 HTTP（超文本传输协议） 在服务器和浏览器之间传输
每一次前后端通信，前端需要主动向后端发出请求，后端接收到前端的请求后，可以给出响应
HTTP 是一个请求-响应协议
2.2 HTTP 请求响应的过程
HTTP 协议采用了 请求/响应 的交互模型。
由于 HTTP 协议属于客户端浏览器和服务器之间的通信协议。因此，客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息。
注意：HTTP 请求消息又叫做 HTTP 请求报文。
a.请求
HTTP请求消息的组成部分：
HTTP 请求消息由请求行（request line）、请求头部（ header ） 、空行 和 请求体 4 个部分组成
请求行由请求方式、URL 和 HTTP 协议版本 3 个部分组成，他们之间使用空格隔开。
请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。比如：User-Agent 用来说明当前是什么类型的浏览器；Content-Type 用来描述发送到服务器的数据格式；Accept 用来描述客户端能够接收什么类型的返回内容；Accept-Language 用来描述客户端期望接收哪种人类语言的文本内容。请求头部由多行 键/值对 组成，每行的键和值之间用英文的冒号分隔。
关于更多请求头字段的描述，可以查看 MDN 官方文档：HTTP Headers - HTTP | MDN
最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束。请求消息中的空行，用来分隔请求头部与请求体。
请求体中存放的，是要通过 POST 方式提交到服务器的数据。注意：只有 POST 请求才有请求体，GET 请求没有请求体！
b.响应
响应消息就是服务器响应给客户端的消息内容，也叫作响应报文。
HTTP响应消息由状态行、响应头部、空行 和 响应体 4 个部分组成，如下图所示：
状态行由 HTTP 协议版本、状态码和状态码的描述文本 3 个部分组成，他们之间使用空格隔开;
响应头部用来描述服务器的基本信息。响应头部由多行 键/值对 组成，每行的键和值之间用英文的冒号分隔。
关于更多响应头字段的描述，可以查看 MDN 官方文档：HTTP Headers - HTTP | MDN
在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户端响应头部至此结束。响应消息中的空行，用来分隔响应头部与响应体。
响应体中存放的，是服务器响应给客户端的资源内容。
c.请求/响应过程：
举例：
当在浏览器中输入慕课网网址：https://www.imooc.com，按下回车后，首先浏览器会到自己的缓存中查看之前是否访问过该网站，访问过后在浏览器中是否留有缓存，若有则不会向服务器端进行请求，而是直接使用缓存；若无，则向服务器端发送请求。
注意：有的时候浏览器会考虑缓存是否过期，此时浏览器会向服务器发送一个请求来询问缓存是否过期，能否直接使用，那么服务器就会响应能否直接使用，在这里就涉及到了浏览器和服务器的通信，那么究竟是如何进行通信的呢？
当输入慕课网网址后浏览器首先会到自己存放IP的地方进行查询，该网址是否有对应的IP：
若有则直接拿到IP并与服务器建立TCP连接，这时就会开通一条通路，HTTP请求和HTTP响应就在这条通路中进行
若没有，则会到DNS域名解析服务器上进行查询，查到IP后，一般会在浏览器自身存储一份，方便下一次再次访问该IP时就能在浏览器上查到该IP
2.3 HTTP报文
a.HTTP 报文是什么
浏览器向服务器发送请求时，请求本身就是信息，叫请求报文
服务器向浏览器发送响应时传输的信息，叫响应报文
b.HTTP 报文格式
请求
请求头：起始行+首部
请求体
GET 请求，没有请求体，数据通过请求头携带
<form action="https://www.imooc.com" method="get">
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<input type="submit" value="注册" />
</form>
当填写完相关信息点击“注册”按钮后：
POST 请求，有请求体，数据通过请求体携带
<form action="https://www.imooc.com" method="post">
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<input type="submit" value="注册" />
</form>
当填写完相关信息点击“注册”按钮后：
响应
响应头：起始行+首部
响应体
三、HTTP方法
3.1 常用的 HTTP 方法
HTTP 请求方法，属于 HTTP 协议中的一部分，请求方法的作用是：用来表明要对服务器上的资源执行的操作。最常用的请求方法是 GET 和 POST，除此之外还有PUT、DELETE...，用来定义对于资源采取什么样的操作的，有各自的语义
浏览器发送请求时采用的方法，和响应无关
3.2 HTTP 方法的语义
GET 获取数据
获取资源（文件）
POST 创建数据
注册
PUT 更新数据
修改个人信息，修改密码
DELETE 删除数据
删除一条评论
这些方法虽然有各自的语义，但是并不是强制性的
3.3 RESTful 接口设计
一种接口设计风格，充分利用 HTTP 方法的语义
通过用户 ID 获取个人信息，使用 GET 方法
https://www.imooc.com/api/http/getUser?id=1
GET
https://www.imooc.com/api/http/user?id=1
注册新用户，使用 POST 方法
https://www.imooc.com/api/http/addUser
POST
https://www.imooc.com/api/http/user
修改一个用户，使用 POST 方法
https://www.imooc.com/api/http/modifyUser
PUT
https://www.imooc.com/api/http/user
删除一个用户，使用 POST 方法
https://www.imooc.com/api/http/deleteUser
DELETE
https://www.imooc.com/api/http/user
3.4 GET和POST方法对比
a.语义
GET：获取数据
POST：创建数据
b.发送数据
GET 通过地址在请求头中携带数据,能携带的数据量和地址的长度有关系，一般最多就几K
POST 既可以通过地址在请求头中携带数据，也可以通过请求体携带数据,能携带的数据量理论上是无限的,携带少量数据，可以使用 GET 请求，大量的数据可以使用 POST 请求
c.缓存
GET 可以被缓存，POST 不会被缓存
d.安全性
?username=alex
GET 和 POST 都不安全
发送密码或其他敏感信息时不要使用 GET，主要是避免直接被他人窥屏或通过历史记录找到你的密码
3.5 HTTP状态码
a.HTTP 响应状态码是什么
HTTP 响应状态码（HTTP Status Code），也属于 HTTP 协议的一部分，用来标识响应的状态。
响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次 HTTP 请求的结果是成功还是失败了。
定义服务器对请求的处理结果，是服务器返回的
HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分。
HTTP 状态码共分为 5 种类型：
完整的 HTTP 响应状态码，可以参考 MDN 官方文档 HTTP 响应代码 - HTTP | MDN
b.HTTP 响应状态码的一些具体语义
100~199 消息：代表请求已被接受，需要继续处理
websocket
2** 范围的状态码，表示服务器已成功接收到请求并进行处理。常见的 2** 类型的状态码如下：
200~299
3** 范围的状态码，表示表示服务器要求客户端重定向，需要客户端进一步的操作以完成资源的请求。常见的 3** 类型的状态码如下：
300~399
例如通过该网址：http://www.imooc.com/已经找不到数据时，则通过https://www.imooc.com/去找
301 Moved Permanently 永久性移动
302 Move Temporarily 暂时性移动
304 Not Modified 没有修改
4** 范围的状态码，表示客户端的请求有非法内容，从而导致这次请求失败。常见的 4** 类型的状态码如下：
400~499 请求错误
404 Not Found
5** 范围的状态码，表示服务器未能正常处理客户端的请求而出现意外错误。常见的 5** 类型的状态码如下：
500~599 服务器错误
500 Internal Server Error
1512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
