2. 深入学习http

2.5 关于referer

        Referer 描述了当前页面是从哪个页面跳转来的，如果是直接在地址栏输入 url(或者点击收藏夹中的按钮) 都是没有 Referer。如下图所示：

        HTTP 最大的问题在于"明文传输”,明文传输就容易被第三方获取并篡改.
        HTTPS 针对 HTTP 数据进行了加密 (header 和 body 都加密了).第三方想要获取或者篡改,就没那么容易了(HTTPS 详细介绍)，通过这个手段,就可以有效遏制运营商劫持这样的情况 

2.6 Cookie 

        Cookie 可以认为是浏览器在本地存储数据的一种机制，如下所示：

        浏览器的数据来自于服务器,浏览器后续的操作也是要提交给服务器的.服务器这边管理着一个网站的各种核心数据，但是程序运行过程中,也会有一些数据,需要在浏览器这边存储的,并且在后续请求的时候数据可能需要再发给服务器,(类似于上次登陆时间.上次访问时间,用户的身份信息,累计的访问次数..，临时性的数据，存储在浏览器比较合适的。)

        实际上更容易想到的是,把这样的数据直接存储到本地文件中，但是实际上不可行的，浏览器为了考虑到安全性,禁止网页直接访问你的电脑的文件系统；网页代码中也就无法直接生成一个硬盘的文件来储数据了；

        为了保证安全性,又能进行存储数据,于是就引入了 Cookie(也是按照硬盘文件的方式保存的,但是浏览器把操作文件给封装了,网页只能往 Cookie 中存储键值对；

        Cookie 往往是从服务器返回的数据(也可以是页面自己生成的)；
        Cookie 存储到浏览器所在主机的硬盘上, 并且是按照域名为维度来存储的.(每个域名下可以存自己的 Cookie,彼此之间不影响)
        Cookie 是按照键值对的形式来组织的,这里的键值对也都是程序猿自定义的 (和 query string 差不多)，后续再请求这个服务器的时候,就会把 Cookie 中的内容自动代入到请求中,发给服务器,服务器通过 Cookie 的内容做一些逻辑上的处理

        浏览器中正在使用的cookie如下图所示：

        

        键值对之间，使用;分割. 键和值使用 = 分割.上图所述的这些内容就是浏览器本地存储的cookie,都会再后续请求服务器的时候,把这些内容给代入到请求中,传给服务器

3. 关于http响应

        响应状态码表示了这次请求对应的响应,是啥样的状态(成功,失败,等其他的情况,以及对应的原因是啥)，总体所有的响应如下所示：

404 Not Found：

        请求中访问的资源,在服务器上不存在；404 这个状态码表示的是资源不存在，同时在 body 中也是可以返回一个指定的错误页面，很多网站会把这个错误页面做的很丰富多彩；

403 Forbidde：

        表示访问的资源没有权限；

5xx ：

        表示服务器出错了 看到这个说明服务器挂了

特殊的状态码,418：

        lam a teapot!(杯具），418 状态码是 HTTP RFC 文档中专门规定的一个状态码表白这个事情是非常不靠谱的，这个状态码并没有实际的意义,只是“"开个玩笑”,称为“彩蛋”

        以上所述,是 HTTP 协议报文结构的基本情况.对于键值对来说--> HTTP 中存在很多种键值对:

1) 、query string

2)、 heade
3) 、cookie
4) 、body

类似于：form表单和json格式：
form key1 =value1&key2=value2
json { key1: value1, key2: value2}

4. 客户端构造请求

        如何让客户端构造一个 HTTP 请求？

        浏览器：
1、直接在浏览器的地址栏 输入 url, 此时构造了一个 GET 请求
2、 htm| 中,一些特殊的 html 标签, 可能会触发 GET 请求.比如像 img, a, link, script ..等

3、通过 form 表单来触发 GET / POST 请求

        form 本质也是一个 HTML 标签，写一个简单的 html 代码,来编写逻辑；

        HTML、 CSS、 JS 也是编程语言，他们和C 和 Java 有一个明显的差别,这几个语言是运行在浏览器上的，不像 C 需要安装 VS，也不像 Java 需要安装JDK，只要有浏览器就能运行。

在下面的内容中，我们使用VSCode来编写前端代码；

        VSCode 中不需要创建项目,只需要打开一个目录即可,在你想要编辑的目录中,右键打开即可；

        1）、下面来简单介绍一下html的相关标签

        2）、直接输入!<tab>，就会自动生成基本的 htm| 代码模板 )

        3）、form 表单如何编写.

        简单举例输入框的设置：

        提交按钮的设置：

        完整的请求构造如下所示：

        请求抓包如下所示：

        将其改为post请求之后抓包如下所示：

        对于 GET 来说, 这几个键值对, 是在 url 中；对于 POST 来说,这几个键值对,就在 body 中了；

4.、ajax 的方式
        form 有一些缺陷，只支持 GET 和 POST,不支持其他方法，同时form 会触发页面跳转,(有的时候不想跳转）

        ajax可以通过 js 提供的 api 来构造 http 请求；针对拿到的响应,同样可以使用js 灵活处理,想要怎么处理都行,或者想跳转不跳转也都行.如此给前端代码,带来了更多的可操作空间.故此现在的网站,主体都是通过 ajax 的方式来进行交互的；

        浏览器原生提供了 ajax 的 api, 原生的 api 特别难用.所以一些第三方库封装了 ajax,就准备使用封装的版本来进行操作,我们本次所使用的是 jquery 这个库就是封装的 ajax；

        使用ajax构造http请求的步骤如下所示：

        1、引入 jquery 库.(第三方库,是需要额外下载引入的)

        前端引入第三方库非常容易的.只要代码中写一个库的地址即可.

        2、编写代码

        

        $是一个变量名(全局变量,在jquery 中定义的)，通过这个变量来调用一些方法来使用jquery 中的 api；

        js 中 {}表示对象，{}里面是使用键值对的方式来描述 "属性名" 和"属性值”的.

        上图这里 的success 这个函数,不是立即执行的.而是服务器返回 200 这样的响应的时候,才会执行到 success，至于服务器啥时候返回 200 是不太确定的，可能是 10ms 之后,也可能是 1s之后,也可能永远也不返回.至于啥时候返回 200 了,啥时候执行 success.主要是因为success 执行时机不是程序员自己能控制的，而是在合适的时候自动被调用的；

        像这样的函数,就是"回调函数”；

        这个写法就是定义变量，不需要写类型 ，不管啥类型, 都是 let，变量具体类型是根据= 后面初始化的值的类型来确定的，此处'1'是一个字符串,所以 value1 变量类型也就是字符串了；

        这个操作就可以把js 对象转成json 格式的字符串了；

        至于更简单的构造 http 请求的方式，可以直接通过第三方工具，即图形化界面构造.

5、postman构造http请求

        postman布局如下所示：

           基本页面布局即操作：

 ps：本次的学习就到这里了，如果大家感兴趣的话就请一键三连哦！！！