033_HTTP协议_初识HTTP协议
hello，大家好，这个小节我们来认识一下 http协议。 http是几个单词的首字母拼写，全称为Hypertext Transfer Protocol
译为超文本传输协议，那么这个http协议是互联网上应用最广泛的协议之一。顺便说一下，这个内容对于我们来说十分的重要，
不管你是做前端开发还是做后端开发，只要是在 Web 领域，那么http协议都是必须要掌握的技能之一。再次强调它十分的重要。
首先我们先来认识一下协议，协议是什么呢？协议是双方必须共同遵从的一组约定，可以看到这个协议的本质其实就是约定。
举一个例子，大家可能会听过，这个保密协议其实就是对员工和企业的行为做了约束，员工按照协议要求需要守护公司的商业机密，而公司要按照协议的要求支付员工一定的酬劳。
再举一个例子，大家可能还听过另外一种协议，离婚协议，这个离婚协议是对夫妻双方行为的一种约束，比如说父亲要按照这个协议的要求每个月支付孩子的抚养费，母亲按照协议要求要对孩子进行抚养。再比如说双方按照协议要求平分家庭的资产。这是下离婚的协议，它是对夫妻双方的行为做了约束。
那么 HTTP 协议它又是对谁进行约束呢？它其实是对浏览器和服务器之间的通信进行了约束。
浏览器给服务器发送数据，这个行为我们称之为是请求，
而服务器给浏览器返回结果这个行为我们把它称之为是响应。
浏览器给服务器发送数据这个内容，我们把它称之为是请求报文，
而服务器给浏览器所返回的结果内容，我们把它称之为是响应报文。
平常我们在使用浏览器的过程当中，比如说我们在地址栏里边输 www.baidu.com 敲回车，
这其实就给服务器发送了一个 http 的请求报文。然后服务器也给我们返回了一个 http 的响应，当然准确来说在整个过程当中它其实并不是一次请求，而是多次。
大家可能会说为什么是多次呢？不必着急，我们后边会对这个过程做一个解释。
其次有人可能心里会想，那这个请求报文和响应报文，它究竟长什么样子呢？
这个大家也不必着急，我们下一个小节就为大家去展示这个报文的真实的面貌。
好，那么这个小节关于 HTTP 协议的一个介绍，我们就先说这么多。
034_HTTP协议_窥探HTTP报文
我们来一起查看一下 HTTP 协议的报文内容。要查看这个报文内容，我们需要安装一个软件儿，这里我们选择了一个叫做fiddler。
那首先我们先介绍一下为什么这个软件儿能够查看到请求和响应的报文。
来看一张图，这个图是我们之前演示过的浏览器和服务器之间的通信方式，浏览器给服务器发请求，服务器给浏览器返回响应。
但是当我们安装了 fiddler并启动了 fiddler之后，它的交互结构就发生了变化，浏览器会把请求发送给feed，然后 feed 再把请求发送给服务器，返回结果，先给fiddler，然后 fiddler再把结果返回给浏览器。
所以你会发现在整个的交互过程当中多了一个角色，就是这个fiddler，这个结构就跟我们上学的时候跟小伙伴传递纸条那个结构是一样的。
比如说强哥在这儿，天宇老师在这儿，中间隔着一个李晶老师，我想把纸条传递给天宇老师，写完之后要先交给李晶老师，然后李晶老师再把纸条传递给天宇老师。天宇老师在看完之后，他会把纸条返回给李晶老师，然后李晶老师再把这个纸条返回给我，这样一来就完成了这个数据的交换。
那么大家可以思考一个问题，你说李晶老师他能不能看到我跟天宇老师的交谈内容呢？他其实是可以看到的，在四下无人的时候，他可以轻轻地把这个纸条展开，是吧？偷瞄一眼，他就可以知道这个纸条究竟起了什么内容。而启动 fiddler之后， fiddler这个角色就好比是李晶老师那个角色，他是可以展开报文查看到里边的内容的。
下边来带大家一起去把这个软件安装一下子，并且教大家如何去使用这个软件。
首先说一下这个软件，我已经把它放到了我们的资料文件夹下，就是第 14 这个资料的文件夹下，然后里边有个安装包，
然后双击这个 exe 文件，点击是，点击 i agree，
这里是选择安装路径的，
我建议你不要选，就直接用默认就行，因为这个软件我们只会用这么一两节课，后边在项目开发的过程当中，咱们是不会再用这个软件儿的。
好，点击 install 安装。好，那么等一会儿之后，你会发现它这里显示completed，表示为安装完成，我们点击 close 就可以了。
然后顺便说一下，这里有一个汉化，
我这里就不给大家去汉化了，有兴趣同学可以把这个实际操作一下子，这里有一个截图，
按照截图去实际操作就行了。
安装完成之后，我们需要把 软件儿启动起来，你会发现一个细节，就是桌面儿并没有产生这个软件儿的快捷方式是这样子的，这个软件儿在安装完毕之后，确确实实没有创建桌面儿快捷方式，那我们该如何去打开这个软件呢？
可以点击开始，点击完开始之后直接去输FIDD。然后咱们点击这个应用程序，
点击，然后稍微等待一下子，
打开之后有一个提示，说什么 would you like to learn more？to disable this warning click cancel，建议直接点 cancel 就可以了。
好，然后这里的话还有一个，然后咱们点击否。
光安装完还不够，我们还要再去做一个配置。注意看这里点击tools，点击options，
点完 options 之后这里有一个 https。然后点击，
点完之后这里有个选项叫 decrypt https traffic，把这个咱们勾上。
第一次勾完之后它会弹出一个菜单，
长成这个样子，
他说了，你是不是要去添加咱这个 Windows 的信任的 CA 列表，是吧？
我们点击是
大家说，我这个没弹出，没事儿，你像强哥这么去操作，点击actions，点击第一个 trust root certificate 信任证书的意思，点击，然后再来一遍。
好，等把这一步做完之后，咱们点击，OK，
点完 OK 之后，咱们再去（关闭）重启一下这个 fiddler 就可以了。
好，再去点击开始，然后输fiddler ，然后咱们把这个点开好。
接下来的话，为了更好的去查看出来是浏览器的请求，我建议大家把这儿（左下角）点一下，看这儿有一个 all processes，这是监听所有的进程，
我们把它点击，一下子选择 Web Browsers，这样一来它只会监听浏览器所发送的请求。
好，接下来我们打开浏览器，在这里去输 www.baidu.com，看这请求还挺多，是吧？然后把这个先闭着重来，
回到浏览器，然后敲回车。
好，大家可以看一下，当我们敲完回车之后，这就显示多了好多的请求，当时强哥也说了，其实我们在敲下回车之后，在整个网页加载过程当中，其实是向服务器发送了好些请求的。
第一个请求看这里，第一个请求就是我们刚才敲下回车之后给百度服务器所发送的那一个请求，那我想看看这个请求报文和响应报文的内容怎么办呢？
双击这个请求，然后右侧会列出来请求和响应的一些信息，上边是请求，下边是响应，
咱们先去看请求，我想看看原始的请求报文点哪个呢？点这个 raw，
摁住 control 加滚轮，可以放大这个区域的文本，跟大家说一下这一片内容就是刚才敲下回车之后给百度服务器所发送的内容，其实它的本质就是一堆字符串。
那我想看看响应怎么办呢？大家注意看下边，往上拖一拖，还是一样点击 raw
同学说，这里我也看不清啊，这玩意乱码了。
别急，注意看，这里有个提示，他说 response body is encoded click to decode。意思就是说响应体内容已经被编码了，可以点击这去解码。好，我点一下它，点完之后稍微等待一下子它出一个解码。
好，过一会你看内容就显示出来了，往后再拉一把，后面还有，我就不往下滚动了，下面的这一片内容就是百度服务器给咱浏览器所返回的结果，它也是一堆字符串。
那所以说这都是什么东西？这我都看不懂是吧？
别着急，下面会给大家介绍一下这个请求报文的结构，
它究竟都包含哪些，并且哪些都代表什么含义，咱们也会说一下。
035_HTTP协议_请求报文结构
介绍一下 http 请求报文的一个结构。
首先先把咱们上一个小节给百度所发送的那个请求报文拿了过来。
不过这个东西它比较多，不利于我们去查看这其中的结构和组成，所以说就对这块内容做了一个简化，做了一些裁切，主体的部分没有去做变化，只是把后边的一些内容做了一些修剪。
然后下边我们来说一说 http 请求报文的一个基本的组成部分。主要是包括这么三部分，
第一是这个请求行，是报文的第一行内容，咱把它称之为是请求行。
然后第二行开始，一直到一个空行之前，这块内容咱把它称之为是请求头。
然后第三部分是请求体。
当然同学可能会说这也没有请求体，我得先解释一下子，就是咱们给百度发的那个请求，他那个请求体是空的，但是你先别着急，后边我会给你展示一个非空情况的请求体。
还有一点值得我们去稍微注意一下子，就是这个请求头和请求体之间它是有一个空行的。
这是咱们给大家介绍了一下 http 请求报文的一个基本的组成部分，然后下一个小节我们去介绍一下请求行的相关内容。
036_HTTP协议_请求行
请求方法
hello，大家好，我们一起来看一看 http 请求行当中的相关内容。这个请求行它主要由三部分组成。
第一个为请求方法，
第二个是请求的URL，
第三个是 http 协议的版本号。
我们首先来看第一个请求方法。
http 协议的常见请求方法有这么几个，有get、有post，然后还有 put patch 以及delete。
这个 get 它主要用于获取数据，
host 主要用于新增数据，
put 和 patch 主要用于更新数据，
而 delete 主要用于删除数据。
那么在这几个方法当中，其实 get 和 post 在我们日常当中用的更为多一些。
另外补充一点，还有一些方法我们平常用的比较少，有head、options、 connect 和trace，那么这些方法大家了解即可。
URL
好，下边的话我们来看一看请求行的第二段内容，就是 URL 是三个单词的首字母拼写意为 uniform resource locator，中文含义为统一资源定位符啊。
那么其实这个 URL 本身也是一个字符串儿，这个字符串儿用来干嘛呢？用来定位服务器当中的资源，我们这个服务器会存在很多资源，然后浏览器会向这个服务器去发送请求，获取其中的某一个资源，那么这个时候就要通过一个 URL 来去定位其中的某一个资源，然后把请求发送给服务器，之后服务器会通过 URL 来去定位，找到之后再把结果返回给浏览器。
所以说这个 URL 它是用来定位资源的。
那么下边我们来看看百度的这个请求 URL 它的一个组成部分，它主要有这么几个部分组成，
第一个是协议名称，这里的话是 https。那么第二部分是主机名，那么这个主机名它可以是一个域名，也可以是一个 IP 地址，比如说我写一个10.20.30.40。
大家可能会对这个域名和 IP 地址不熟悉，大家先不用着急，我们后边会给大家单独再去介绍这块内容，
那这个主机名它有什么作用呢？这个主机名用来定位网络上的那个计算机，然后除了这个主机名之外，还有一个东西是路径，这个路径它用来定位服务器当中的某一个资源。
那么其实百度的这个 URL 它还是比较特别，为了更好地展示 URL 的一个组成，强哥又给大家准备另外一个URL，咱们一起来看一看。
首先前面这个协议名 儿还是 https，然后中间这个是一个域名儿，那在域名儿和协议名儿中间有一个冒号儿斜线，咱们也简单说明一下子，这个是协议的一个固定组成部分，就是甭管你什么协议，是吧？冒号斜线斜线这个是必须要加的，
然后在主机门的后边还有一个东西，冒号443，这个东西可以叫做端口号，
大家同学可能会说，我怎么看刚才那个百度那个它没有端口号，简单解释一下子，这个端口号它有些情况下是可以省略不写的。那么什么时候可以省略不写这个我们后边再单独去介绍。
那下边的话我们来看看端口号后边这个路径 ，它是以斜线开头 的。然后问号前边这一段它是路径 ，那么这个路径它主要用来定位这一台服务器当中的某一个资源。这个路径主要用来定位这个的，
那么下边的话我们来看一看后边这个东西，查询字符串 ，这个查询字符串大家注意观察，它其实是键名键值的一个结构，你看 keyword 名字，然后 one plus 键值。然后后边这个是一个 and 符，这个and 符它是用来做分割的，又是一个键名，又是一个键值，它是一个这样的字符串。
那同学可能会想说，那这个查询字符串有什么用？这个查询字符串主要是向服务器传递额外的参数，下面的话给大家举一个例子，就是方便大家去理解这个路径和查询字符串。
比方说有些时候早上我会到这个早餐店，然后去买一些早餐啊。比方说这是那个早餐店，然后我跟这老板说，我说老板给我来一个煎饼果子啊。注意，我跟他说了，我要来一个煎饼果子，然后这个煎饼果子就好比是这个路径 。注意，这个煎饼果子就好比是个路径。然后当我说完这个之后，我会额外再加一些参数，比方说不要给我放葱，多给我放香菜，然后给我放一个辣条，再给我放一根肠。那刚才我所说的这些葱、香菜，其实都是对这个资源的一个额外的描述，然后老板会按照我所提供的这些额外的参数，或者说额外的要求来去制作这个煎饼果子。
那么再比如说我有些时候我不吃煎饼果子，我吃什么呢？我吃手抓饼，你看这个手抓饼是另外一个资源，那这个时候我还是会提一些额外要求，比如说要给我加个场，然后给我少放点辣椒，你看这个肠和辣椒也属于对这个资源的一个额外的描述，然后老板会按照我的要求去制作这个手抓饼啊。
好，这是当前的话，我们对于路径和查询字符串这一块的一个内容，给大家举一个例子去更好地理解这个路径和查询字符串。
所以说的话，这个百度的 url 大家可以看一下，它是一个相对来说比较特别的URL，就没有查询字符串，然后路径也只有一个斜线，但是这也是一个合法的URL。那么下边的话我们来说一下http 的版本号。
http协议的版本号
这里百度所使用的 HTTP 的版本是1.1，然后我们再顺便看一看其他 HTTP 的版本以及发布时间这个内容，大家了解一下。
这个 1.0 版本，它是 96 年发布的， 1.1 版本是 99 年发布的，然后 2 版本是 15 年发布，然后三版本是 18 年发布。
大家可能会说，这三都出来了，咱们去学这个 1.1 合适吗啊？
------其实挺合适哈，先把这个一版本学好了，然后再去学这个 2 和3，就能容易一些了。
好了，那关于呢？ http 请求行的相关内容我们就先说这么多，
037_HTTP协议_请求头
hello，大家好，这个小节的话我们一起来看一看 http 请求报文当中请求头的相关内容，这个请求头它是由一系列的键值对所组成的。
在冒号前边儿的内容是咱的键名儿，在冒号儿空格儿的后边儿是键值。
我们以 host 这个请求头来为例，给大家看一下儿。
大家可以看一下，在这个冒号的前面这个host，这是键名冒号空格，后边这个 www.baidu.com 是键值。大家可以看一下下边这些请求头的格式，跟上面这格式都是一模一样的啊。
然后顺便我们再说一下这个请求头，它主要是记录了浏览器相关的一些信息，比方说大家可以看这个 User-Agent（图中第四行），它记录了当前浏览器的一些平台以及版本号。
再比如说这个Accept（图中第五行），它记录了当前浏览器能够处理的数据的类型。
再比如说这个 Accept-Encoding（图中倒数第三行） 用来记录当前浏览器所支持的压缩方式，
还有这个 Accept-Language 用来记录当前浏览器所支持的语言。
当然还有一个东西是这个 cookie（倒数第一行） 的话，小甜饼我们在后边会话控制那块会单独为大家做一个解释。
那除了记录浏览器的相关信息之外，它还会记录一些交互的行为。
比如说这个 Connection: keep alive（第二行） 用来保持连接通道，提高效率。
另外一个 Upgrades-Insecure-Requests: 1（第三行），这个是用来升级 HTTP 请求为 HTTPS， 提高交互的安全性。
那除此之外，请求头里边还会记录一些跟请求体相关的信息，当然在这个请求里边请求体是空的，所以这里边并没有体现出来。
当然大家不用着急，在后边遇到这个情形的时候，会给大家单独去做一个解释。
那同学可能会有一个想法，说强哥这请求头太多了，这我记不住啊。
下边我做一个说明，这些请求头不需要每一个都记住，在现阶段大家只需要记住这个请求头的一个格式就可以了。
将来如果你想看看其中某一个请求头是什么含义，怎么办呢？大家可以到这个网址去做一个查看，就是 MDN 关于 head 头信息的一个页面，
下边的话就包含了协议当中请求头的相关的内容，然后你想看其中某一个就可以点开，
点开之后就会对这个头做一个详细的介绍。
038_HTTP协议_请求体
hello，大家好，我们来一起看一看 http 请求报文当中的请求体，在我们之前给百度发送请求的时候，它这个请求体是空的。
不过这里想说一下，就是请求体它这个内容格式其实是非常灵活的，你可以设置任意内容。
什么意思呢？我举个例子，比方说你可以在这个请求体里边直接去写123，可以直接去写x、y、z，这些都是 OK 的，只要你跟后端商量好就行。好，那么下边的话来给大家展示一个请求体不为空的情况。
那么我们打开一个网页，这个网页的话是 processOn.com，这是一个在线的绘图网站，然后打算登录一下这个网站，
点击登录，然后用账号和密码登录这里的话，
我需要首先打开我这个插件，输一下密码。好，输完之后把账号放进来，
注意我先不登录，先不点登录。我首先把 fiddler这个工具先打开，准备抓取这个请求包。
好，那么接下来我点击登录，大家可以看一下，此时我已经登录成功了，显示能够进入我的文件了。
OK，我们打开刚才那个fiddler，打开那个 fiddler之后，第一个请求就是刚才我们点击登录之后所发送的那个请求。我们双击，打开双击之后我们说过点击这个 raw，这是可以看到原始的请求报文的，然后把响应往下转一转，然后我们放大看一看。
大家注意观察这个请求报文，它的请求方法不是 get 了，而是变成了post，然后注意观察这个请求体，大家可以看一下这个请求体（带背景颜色）的形式，
其实跟我们查询字符串儿，也就是在 URL 最后那个部分查询字符串儿，那个结构是一样的。这是一个键名儿，然后等于一个键值，然后这个40%，它其实是@ 的意思，是那个邮箱的符号儿 and 符是这个参数与参数之间的分隔符，这是个键名儿，然后等于这是键值，后边这个地方又是一个键名，又是个键值。
跟大家说一下，那这个内容是什么东西呢？它其实就是我在 processOn 这个网站当中的账号，然后还有密码，没有错，这就是在这个平台的密码。
好，这是给大家演示了一个请求体不为空的情况。
那么下边再给大家演示一个请求体不为空的情况，也是一个在项目当中用的比较多的形式。
好，我们打开另外一个网站，这个网站就是掘金，然后我们 remove all，
在这里重新的发一次请求（网址处敲回车键），走起。
找一个 JSON 的。
好，大家看这个把它放大，请求类型这一块是一个post，咱们去看请求体。
这个请求体是什么形式的呢？这个请求体是 json 形式的。没错， json 形式在项目里边这种形式我们用的比较多，把数据发给服务器，然后服务器从请求体里边把数据取出来，再转成对象，然后对数据做一个处理。
好，主要是给大家演示一下请求体不为空的情况，顺便补充一点，在就是请求体的格式其实是非常灵活的。我们所演示的这两个只是用的比较多，但并不说只有这两种形式，其他形式也是 OK 的。
039_HTTP协议_响应报文结构与响应行
hello，大家好，我们来介绍一下 http 的响应报文，这个内容的话是我们上一次百度服务器给浏览器所返回的报文内容，对其做了一个简化，为了方便咱们去查看整个报文的结构。
那 HTTP 响应报文的结构与请求报文的结构整体是一致的，也是由三部分组成，
第一块儿内容为响应行，
第二块儿内容为响应头，
第三块儿内容为响应体，
然后在响应头和响应体中间有一个空行。
好，那下边的话我们首先来看看响应行的相关内容，
它是由三部分组成，
第一块内容为HTTP 协议的版本号。
第二块儿内容为响应状态码，
第三块儿内容为响应状态的一个描述，
http 版本号儿这个内容我们在请求那里已经是介绍过了，所以说这里我们就不再二次介绍了。
所以我们先来看看这个响应的状态码，这个响应状态码它是一个三位的数字，用来标识响应的结果状态，
常见的状态码有这样几个，第一个是 200 表示请求成功， 403 表示禁止请求，404，这个我们见的比较多，表示资源没有找到。而 500 表示服务器内部错误。所以我们可以通过状态码来去得知这次请求的一个结果。
那除此之外，我们再补充一点，就是 HTTP 协议对状态码进行了分类，分为五大类，分别是 12345 数字开头的状态码，
一开头表示信息响应，
2 开头表示成功响应。
3 开头表明是一个重定向，
4 开头表明是客户端错误，
而 5 开头表明是服务器端错误，所以到时候我们也可以通过状态码的第一个数字来去判定响应的一个结果的状态。
好，那么下边我们来看看响应状态的一个描述，这个响应状态描述它本身其实就是一个字符串。
这个字符串儿它绝大多数情况都是跟状态码儿保持一一对应的，比如说 200 对应的是OK， 403 对应的是forbidden。 404 定的是 not find，而 500 定的是 internal server error
将来大家可能会遇到一些陌生的状态码，这个时候可以来参考一个网址，在这个网址当中可以进行一个查阅，比如说我举个例子，我想看一看 405 代表什么含义，就可以直接 control f 搜405。
搜完之后的话我们可以点击进入，就可以查看到这个状态码所对应的状态描述以及它的中文含义了
040_HTTP协议_响应头与响应体
hello，大家好，那这个小节我们来介绍一下响应头和响应体相关的内容。
首先我们先来看一看响应头这一块，它记录了与服务器相关的一些内容，
比如说这个Server，它记录了服务器所使用的技术。
其次这个 date 它记录了响应的一个时间，
除了这个与服务器相关的内容之外，这个响应头它还记录了与响应体相关的一些内容，
比如说 content-type，这个对于我们来说是一个比较重要的响应头，咱们用的比较多，用来声明响应体内容的格式与字符集。
那其次还有一个就是这个 content-length，它用来记录前体内容的一个长度，单位是字节。
这里的话我们顺便再说一下，响应头与请求头一样，我们不需要去记住每一个都代表什么含义，将来我们用到哪一个，咱们再讲哪一个，再去记哪一个就可以了。将来如果你遇到一个不认识的响应头，你想知道它是什么含义，那就可以打开这个 MDN 的网页，可以在这里去做一个查看。顺便再补充一下子，就是说在这个网页当中你可能会搜到那个结果，也可能搜不到
比方说在刚才百度这里，大家可以看一下有一个 Bdpagetype，那么这个响应头的话我们去搜，其实就是搜不到的，我们可以试一试Bdpage，大家可以看一下，没有结果。
没有结果说明什么呢？说明这个响应头它并不是一个标准的响应头，而是百度做的一个自定义的响应头，用来传递一些个性化的数据。那么这个协议本身是允许我们去做一些自定义的数据的。
好，那么下边的话我们来看一看响应体相关的一些内容，这个响应体它与请求体有点相像，内容格式非常灵活，你可以在这个区域随便去编写内容，当然前提得跟前端沟通好，
不过我们常见的响应体格式有这么几个，有 html，有CSS、Javascript、图片、视频、 json 这些格式我们用的比较多，同学可能会说这html，css 和 js 不是我们之前所学过的前端基础吗？
没有错，其实这些内容就是这些内容在网络当中传输时，都是放在响应报文的响应体当中，返回给浏览器的
下边通过 fiddler 来给大家演示一下子，切过来，我们打开一个网址，还是上一次用那个掘金网站，我们把这个历史先清一下。
好，清完之后我去刷新一下页面，重新发请求。之后我们往这边拽一拽，往上放一放，从上往下开始去找，然后点这个，然后点击这个 raw，大家可以看一下，这是一个 html 的响应体。
仔细观察一下，你看这是文档声明，这是 html 标签儿 head body，这是一个标准的 html 文档。
好，下边的话咱们再去看一看 CSS 这种类型的响应体。双击打开，点击 raw，然后点击解码，大家可以看一下一堆的 CSS 代码。
其次咱们再去看看 js 的，点击 raw，点击解码，可以看一下这是一个 js 的函数自调用就是 js 代码。
好，再往下走，看这里PNG，这个 PNG 我们在 raw 这一块是看不到的，因为它并不是一个普通的文本，不过我们可以在 image view 这里看到这个图片的内容。
好，除了这些之外，咱们再去找一个json。走走走，好，大家看这，点击 raw，看这里，这个响应起的格式就是一个 json 的格式。
