前端网络技术提升

3次握手，4次挥手

  在讲三次握手和四次挥手之前，我们要了解一个东西

  首先，我们网络请求的过程中，我们网络请求的发送方和接收方，之间的通讯，应该是没有障碍的

  通信的过程，如果想要建立稳定的链接的条件：通信双方都要有接收信息和发送信息的能力

  客户端需要明确 ： 服务器端要有接收信息的能力 以及给予回应的能力

  服务器端需要明确：客户端需要有接受信息和 发送信息的能力

  所以我们的三次握手，主要就是为了建立一个稳定的连接

那么我们来思考一下，为什么要三次握手才能证明建立稳定的连接呢？

假设，我们 把客户端 和 服务器端 比作 A 和 B
第一次握手： A —> B 建立连接的请求 （A给B发送信息我要向你发送信息了，你能接受到吗？）
B能知道A可以发送信息

第二次握手： B —> A 给出建立连接的响应 （B给A发送信息 我接受到你建立请求的信息了， 我可以接收到你的信息）
A 能知道 B可以接收和发送信息

第三次握手： A —> B 给出回馈 （A给B 发送信息： 我知道你可以收到我的请求了，接下来我要发送数据了）
B 能确定 A 可以接收到信息

四次挥手，为了 客户端 断开 与服务器的连接
A（客户端） B（服务器端）

第一次挥手： A ----> B 发出断开连接的请求（我的问题内容已经发送完了，我要断开连接了）
B能明确A的信息已经全部发送完毕了 A要断开连接啦

第二次挥手: B ----> A 发出断开连接的回应（我知道你要断开了，但是你的答案我还没给你传完呢）
A能明确B已经接收到我的断开连接的请求了，但是他还没把所有的答案给到我

第三次挥手： B ----> A 发出断开连接的信息 （我的答案已经都给你了，我这边可以断开了）
A能明确B已经发完了 可以断开了

第四次挥手： A ----> B 发出断开的连接的确认信息（我知道你已经发完了，我现在断开了）

跨域问题

我们先来看一下什么是跨域

首先 对于一个 域

比如
 https://www.baidu.com
 分为 协议（http or https）
 域名 （www.baidu.com）
 端口号 ： (https 的 默认端口号是 443 如果协议是 http 的话 默认的端口号是 80)

我们又管这个 域叫做 源

我们的浏览器有一个安全机制 叫做 同源策略

浏览器约定 同源下面的地址之间 是可以进行通信的
而我们的跨域就是 协议 域名 端口号 有一个不同 我们就是说其跨域

再来举一个例子 我们所知 一个 IP 地址 对应一个域名
例如 我们的本地的 一个域名

https://localhost:8080/
和我们 用 ip 地址 所写的
https://127.0.0.1:8080/
其实是一个东西 但是 这两个 并不同源
因为这两个的 域名是 不相同的
是 直接比较字符串的

浏览器不会对比 域名解析之后的 ip 而是 直接比较 域名的

遇到跨域 我们的处理方式：

客户端与服务器端的跨域

JSONP

  进行网络请求除了我们经常使用的 ajax 我们还能通过其他的方式

  比如我们调用 jQuery的 cdn 可以通过 script 的src 属性 来进行网络请求的

  所以我们 在 （script）上的 src 是 不受同源限制的影响的
  同时 如果我们script 标签 引入的 src 的文件是一个 txt 那么 我们script 执行的时候 , 实际上是 把 src 的资源的字符串 放到了 script 标签内 然后进行JavaScript 运行

  也就是说 我们拿用 script src 引入的时候 引入的资源的字符串 全部当作 JavaScript 脚本来运行

需要后台拼接包裹层

限制：

a. 请求方式 只能是 GET
b. 请求数据的大小有限制
c. 对于 cookie 没有限制 安全性不是特别高

我们想要拿到index.txt里面的字符串数据 我们应该如何进行操作

这个时候 我们就可以使用 JSONP ，我们可以给 数据 添加上一个 包裹层

W3C 并没有 将 JSONP 作为一种规范

CORS：

全称 ：cross origin resource sharing （跨域资源共享）
是 W3C 标准中提出的

服务器端 需要添加一些 响应信息 （添加响应头）

将 请求分成 两类 ： 简单请求 ， 非简单请求

简单请求 ：
满足的条件：

1. 请求方式 只能 为 GET POST HEAD
2. 请求头字段
     Accept
     Accept/language
     language
     Content-Type 的值只能是 后 三个 之一
      application/x-www-form-urlencoded
      multipart/form-data，text/plain
      Last-Event-ID
     对于 简单请求的 CORS 跨域 需要添加的相应头为
     Access-Control-Allow-Origin： "" ( 表示 所有的 源 都可以 访问) (允许访问相应数据的源)

  Access-Control-Allow-Credentials : “” 是否允许 携带cookie true 表示 允许携带 (可选项) 同时 我们 在 ajax 函数内 我们也要设置一个

  xhr.withCredentials = true 表示 这个 网络请求 可以携带cookie

  Access-Control-Expose-Headers : “” 允许前端 拿到的相应头字段 是一个字符串 （可选项）

非简单请求：

不满足 简单请求条件的 请求

请求方式 不为 GET POST HEAD

  Access-Control-Allow-Origin： “”
  Access-Control-Allow-Methods : “” 允许拿到数据的请求方式

不满足 第二个条件
  Access-Control-Allow-Headers: “” 允许拿到数据的请求中，允许包含的请求头字段