• XMLHttpRequest「ajax|axios|$.ajax…|」/fetch数据交互
    + 跨域处理方案：ajax、fetch、jsonp、postMessage…
    + 资源获取「html|css|js|image|音视频…」
    + webscoket
    + …

    客户端把信息传递给服务器或者向服务器发送请求「请求 Request」
    服务器端接收客户端信息并且返回给客户端相关的内容「响应 Response」
    请求+响应=HTTP事物
    客户端和服务器端之间传输的所有内容，统称为HTTP报文
    起始行：基本信息「包含HTTP的版本等」
    请求起始行 GET{请求方式} /res-min/themes/marxico.css{请求地址} HTTP/1.1{HTTP版本号}
    响应起始行 HTTP/1.1{HTTP版本号} 200{HTTP响应状态码} OK{状态码描述}
    首部（头）：请求头「客户端->服务器」、响应头「服务器->客户端」
    主体：请求主体「客户端->服务器」、响应主体「服务器->客户端」

    谷歌浏览器控制台 NetWork包含了所有客户端和服务器之间的通信信息

    HTTP版本号：1.0 / 1.1 / 2.0
    HTTP响应状态码：200 / 301 / 302 / 304 / 307 / 400 / 401 / 404 / 500 / 503 …
    请求方式：GET{GET/HEAD/DELETE/OPTIONS} POST{POST/PUT/PATCH}
    请求地址：URL地址，可能在地址后面有问号参数 /api/list?xxx=xxx&xxx=xxx「问号参数：客户端->服务器」

    =============
    客户端和服务器之间的数据传输，依托于网络「通信模式 TCP/UDP… & 传输协议 HTTP/HTTPS/FTP…」

    =============

    从输入URL地址到看到页面，中间都经历了啥？

    1.URL解析「识别URL」
    2.检查缓存「强缓存、协商缓存{针对于资源文件请求} & 本地存储{针对于数据请求}」
    3.DNS服务器解析「域名解析：根据域名解析出服务器的外网IP」
    4.TCP三次握手「建立客户端和服务器之间的网络连接通道」
    5.基于HTTP/HTTPS等传输协议，实现客户端和服务器之间的信息通信
    6.TCP四次挥手「把建立好的网络通道释放掉」
    7.客户端渲染「呈现出页面和效果」
    */

/*

1.URL解析「识别URL」

  1. URI统一资源标识符  <br />       URL:统一资源定位符<br />       URN:统一资源名称

http://user:pass@www.zhufengpeixun.cn:80/st/index.html?xxx=xxx&xxx=xxx#video
传输协议：http / https / ftp …
+ HTTP超文本传输协议{除了传输文本「例如：字符串…」还可以传输其余的信息「例如：文件流、二进制或者Buffer格式再或者BASE64格式的数据…」}
+ HTTPS=HTTP+SSL 更加安全的HTTP{传输的内容经过加密处理}，一般涉及支付类的产品都采用这种协议
+ FTP文件传输协议，一般用于直接基于一些FTP工具「例如：filezilla…」，把开发的文件部署到服务器上
+ …

  1.    用户名密码：user:pass「一般是不用的」
  3.    域名：www.zhufengpeixun.cn<br />          + 顶级域名 zhufengpeixun.cn<br />          + 一级域名 www.zhufengpeixun.cn<br />          + 二级域名 video.zhufengpeixun.cn<br />          + 三级域名 student.video.zhufengpeixun.cn<br />          + ...<br />          购买的是顶级域名，自己后期可以分配二级/三级域名<br />          域名的目的就是给对应的服务器外网IP起一个别名，方便用户记忆<br />        域名和服务器都购买完成后，需要在DNS服务器上生成一条解析记录，用于以后的DNS解析<br />        .com / .cn / .net / .org / .gov / ...
  5.     协议、域名、端口号只要有一个不同，则为跨域！！<br />          www.baidu.com VS www.qq.com ：跨域<br />          www.baidu.com VS video.baidu.com ：跨域「主域相同，但是子域不同」<br />          www.baidu.com:80 VS www.baidu.com:443：跨域<br />         [http://www.baidu.com](http://www.baidu.com) VS [https://www.baidu.com](https://www.baidu.com)：跨域<br />         [http://www.baidu.com:80/st.html](http://www.baidu.com:80/st.html) VS [http://www.baidu.com:80/index.html](http://www.baidu.com:80/index.html)：同源
  7.    端口号：80<br />       请求资源的路径名称：/st/index.html<br />       问号参数信息：?xxx=xxx&xxx=xxx<br />       HASH(哈希)值：#video

URL编译问题
encodeURI & decodeURI：编译空格和中文，一般编译整个URL中的信息
encodeURIComponent & decodeURIComponent：编译空格和中文以及一些特殊符号，所以一般只是用来编译传递的信息值的，而不是整个URL「放置URL解析不了或者传递信息的乱码等问题」
——前后端都支持的API

  1.     escape & unescape<br />        ----用于客户端页面信息传递或者一些信息的编译的「例如：cookie中的中文内容编译」
  1. let url = `http://www.xxx.com/st/index.html?lx=1&name=${encodeURIComponent('测 试')}&from=${encodeURIComponent('http://www.qq.com/')}`;
  2. console.log(url); */
  3. // console.log(escape('测试'));
  4. // console.log(encodeURIComponent('测试'));

2.检查缓存「强缓存、协商缓存{针对于资源文件请求} & 本地存储{针对于数据请求}」

  1. @@强缓存还是协商缓存都是服务器端设置的，客户端浏览器自己会根据返回的一些信息，进行相关处理，无需前端单独设置啥东西<br />    <br />    缓存处理是基于HTTP网络层进行优化的一个非常重要的手段「针对的资源文件请求」

强缓存：Expires / Cache-Control

  1.    问题：本地缓存了文件，但是服务对应的资源文件更新了，我们如何保证获取的是最新的内容？<br />          + 请求资源文件的时候设置时间戳<br />            第一次<br />            <link href='index.css?20210224215800'><br />            如果服务器资源有更新，再次发请求，保证时间戳不一样，这样就不会走本地的强缓存了，而是从新拉取最新的资源<br />            <link href='index.css?20210227000000'><br />          + 文件HASH名<br />            第一次<br />            <link href='dasdasd43546.css'><br />            如果服务器资源更新，文件名字重新HASH（webpack）<br />            <link href='75675675fsdff6.css'>
  3. 所以HTML文件永远不会去做强缓存<br />        第一次<br />        <html><br />           <link href='dasdasd43546.css'><br />        </html>
  5.     第二次<br />        <html><br />           <link href='75675675fsdff6.css'><br />        </html>
  7. -------------

协商缓存：Last-Modified / ETag

  1.    Last-Modified:记录服务器资源文件最后一次更新的时间<br />       ETag:只要服务器资源文件改变，会生成一个不同的标识
  3. 当强缓存失效(或者不存在)「例如：html可以做协商缓存」，会校验协商缓存「前提是设置了协商缓存」<br />       每一次都会向服务器校验资源是否更新