WEB入门浅谈06

后端

前端与后端的交互

浏览器就相当于一个客户端程序，用户通过浏览器发送一个 HTTP 请求至服务器上，服务器核对请求内容之后返回一个 HTTP 响应到客户端（浏览器）
上。

客户端：主动发送请求的一方
服务器：被动接收请求的一方
在网络通信中，两台主机，一方是主动发起的，一方是被动接收的
一般情况下，请求和响应是一对一的关系，典型的交互方式就是一问一答，（也是最主要的交互方式），也存在一问多答，多问多答，多问一答

由于客户端与服务器之间要进行互传数据，但是由于客户端和服务器是两个主机上不同的程序，就需要保证客户端给服务器发送的数据，服务器可以理解其含义，而服务器给客户端返回的数据，客户端也可以理解含义。

协议：协议就是一种约定，约定了请求和响应里都是按照什么样的结构来组织数据。所以协议就是规定好双方按照何种规则来进行交互。
两个网络通过网络传输的数据本质上是二进制的 bit 流。
网络通信就是两个主机通过一些介质（网线、电磁波、光纤等）来传播一些光信号或者电信号。这些信号就可以进行编码，如：（高电平为1，低电平为0）
针对 bit 流到底表达了什么含义，就需要用到协议来约定

协议栈：网络通信中设计到的协议比较多，不同的协议拥有不同的功能，两台主机之间的通信，并不是靠某一个协议就能通信完成的。按照不同的功能，或者在通信中起到作用的不同，把协议分成了几个类别，也叫做协议分层（物理层、数据链路层、网络层、传输层、应用层）

物理层：物理设施，包括光纤，网线等
数据链路层：主要负责相邻主机之间的通信
网络层：比较遥远的主机之间如何传输数据
传输层：不负责传输过程，只负责起点与终点如何进行传输数据
应用层：程序员在代码中约定两台主机之间传输数据的格式是什么

这五层协议就称之为 TCP/IP 五层结构，整体协议分层构成的体系就叫做 TCP/IP 协议栈
TCP 就是传输层的核心协议
IP 就是网络层的核心协议

HTTP 协议，也是一种网络通信协议，从属于 TCP/IP 协议栈中，处在应用层中
WEB 开发中就会广泛使用到 HTTP 协议（并不止在 WEB 开发中使用）

为了更好的理解 HTTP 的工作过程，就需要借助一些辅助工具（抓包工具）（后面将使用到 Fiddler 抓包工具）

HTTP在日常生活中使用非常广泛，如：（在浏览器中访问某个 网站 ）

URL

URL Uniform Resource Location，统一资源定位符，也就是平常我们所说的网址，描述了互联网上资源的位置
一个URL的组成部分如下：（仅供参考）

协议方案名：也就是这个URL是基于某个协议的， HTTP 协议和 HTTPS 协议是两个不同的协议，但是基本原理基本一致，只不过 HTTPS 多了一个加密的过程。

登陆认证：表示客户端在访问这个URL时的状态（如购物网站中的登陆状态浏览与未登录状态浏览）

服务器地址：描述了互联网上一个服务器的位置，此处的地址其实也就是IP地址（有的ip地址通过域名来进行替换，通过域名可以直接找到ip地址，如果要查看对应域名的ip地址，可以通过命令框的ping命令来查看如 ping editor.csdn.net）域名到ip地址的转换称为DNS (重点关注)

端口号：用来确定服务器上一个具体的应用程序，使用 : 分割。可以省略，如果省略，浏览器就会自动添加一个端口号（与协议有关）（在进行网络通信时还是很有必要的）(重点关注)

带层次的路径：对应到服务器上一个具体的资源，类似于目录 (重点关注)

查询字符串：也叫query string ，是url中一个重要的组成部分，使用 ? 分割，使用=分割要查询的内容，可以理解为是一个键值对的结构 (重点关注)

片段标识符：用于在一个网站内的不同模块内跳转。用 # 分割（功能类似CSDN里点击个人博客里消息评论跳转至所在博客的此评论位置）

urlencode和urldecode

如果url中需要用到一些特殊符号，就要对这些符号进行编码（转义），尤其是在 query string 里就不能包含一些特殊符号。（如果包含就会影响浏览器对url的解析）例如，在url中，使用 ? 来分割要查询的字符串，但是如果查询的字符串是一个 ? 时，那么 url 中就会出现两个 ? ，此时就需要对特殊符号进行转义（如 ? 被转义为 %3F ），这个转义的过程就叫做 urlencode ，如果把之前的结果（ %3F ）转义为原符号，这个过程就叫做 urldecode (可以使用网络的一些转码工具进行转换)。

HTTP具体格式

在抓包工具(fiddler)中选择对应的请求，然后在右上角选择 raw 标签就可以看到最原始的 http 请求，在右下角选择raw就可以看到对应的响应

HTTP的特点：
HTTP 是一个纯文本协议，而不是二进制数据
HTTP 协议的格式是按照 行文本 的方式来组织的，每一行
HTTP 响应也是按照 行文本 的方式来组织，但是为了节省网络传输的带块，经常会对数据进行压缩，可以在 fiddler 里点击 Response body is encoded. Click to decode. 进行解压缩操作，就可以看到响应里具体的内容

响应报文里包含了页面的HTML
请求和响应的具体结构主要分为四个部分：
首行
请求报头 响应报头
空行
请求正文 响应正文

请求：
在首行里，又分为三个部分，分别是请求的方法，url，http协议的版本号

HTTP 协议中的请求方法有很多，最常用的就是 GET 和 POST ，除此之外还有 PUT DELETE HEAD OPTIONS 等
GET 方法一般用于 在服务器上获取数据(不绝对)
POST 方法一般用于 往服务器上提交数据(不绝对)

请求报头：
这些请求头就描述了这个HTTP请求的一些属性，都是键值对格式的
每个键值对占一行，key和value之间用:分割，每个属性(键值对)都表示了不同的含义

空行：空行表示请求报头的结束，类似于单链表，null表示结束标记

请求正文： 对于GET亲求，一般没有body（请求正文）的，对于POST请求，一般是有body的（如登陆界面），

对于GET请求，可以有 query string 也可以没有 query string ，但是 POST
一般没有 query string ，需要提交给服务器的信息都保存在 body 中（如登陆界面的用户名与密码）

对于 GET 和 POST 来说，本身在进行数据传输时都是不安全的

响应：
首行：三个部分 用空格分割 分别是： 版本号 状态码 状态码的描述信息

状态码：一次请求，可能会成功，可能失败，也可能有其它情况，不同的情况有不同的状态码。
常见状态码的有：
200 OK 表示访问成功
404 NOT FOUND 要访问的资源没找到
403 FORBIDDEN 要访问的资源没有权限
500 INTERNAL SERVER ERROR 服务器不存在
302 MOVE TEMPORARILY 重定向（如：访问A页面跳转到B页面）301 303 304等都可以起到重定向的效果

重定向：浏览器先发送一个请求，然后服务器给一个登陆成功的响应，其中会有重定向到指定页面，浏览器接收响应后再发送一个访问重定向之后的地址，服务器再返回一个重定向之后的页面。
location这个属性就表示重定向到哪个地址

状态码的分类：
1XX 信息型状态码 表示接收的请求正在处理
2XX 成功状态码 请求正常处理完毕
3XX 重定向状态码 进行附加操作完成请求
4XX 客户端错误状态码 服务器无法处理请求
5XX 服务器错误状态码 服务器处理请求错误

状态码也有一个彩蛋：418 I’m a teapot 我是一个茶壶（杯具）

补充

GET和POST的区别： 没有本质区别，大部分情况下，GET能实现的场景，换成POST也行，POST能实现的场景，GET也能实现。个别情况下，是不可以相互替换的，如：传输一个大的文件时。
细节上的区别：GET一般把用户自定义的数据放在query string中，POST一般把用户自定义的数据放在body中。（GET一般没有body，POST一般有body，但不是绝对的）

GET一般设计成幂等的，POST一般不考虑设计幂等

GET请求可以被缓存 POST请求一般不可以被缓存

GET请求可以被浏览器收藏夹保存起来的 而POST不能被浏览器收藏夹保存，保存起来，body中的信息就没有了

---

幂等：某一个操作，操作一次和操作多次，效果完全一样，如果符合这样的要求就叫做幂等 读取数据一般就是幂等的，修改数据一般就是不幂等的

---

缓存不光涉及到浏览器，也涉及到各种代理服务器等等网络设备
浏览器访问页面就是带有缓存的
通过网络获取数据，一般是很慢的，为了提高用户体验，提高页面加载速度，浏览器一般都会对一些不太会改变的结果进行缓存 如 图片

---

fiddler
灰色的包表示已经有缓存的
蓝色的包表示html 一般需要重点关注
绿色的包表示js
红色的表表示404