什么是网络请求？

简单得说，就是浏览器，向服务器获取资源（数据、文件、图片、HTML文件等）

当你用谷歌浏览器打开百度时，按下F12打开谷歌的开发者工具，可以看到浏览器向服务器请求的资源，有图片，有html文档等。
image.png

资源缓存

网络请求的部分资源（如HTML、图片、js脚本、css文件等）是有缓存在浏览器的，如下图
image.png
当第一次访问这个网页时，会浏览器会全部获取；
当再次访问，浏览器会判断电脑上内存里面有没有这个资源的缓存，有的话就直接展示，没有的话或者资源过期了再问服务器要。

网络请求的方式

1、Ajax

2005 年，Jesse James Garrett 撰写了一篇文章，“Ajax—A New Approach to Web Applications”。

这篇文章中描绘了一个被他称作 Ajax（Asynchronous JavaScript+XML，即异步 JavaScript 加 XML）的技术。

这个技术涉及发送服务器请求额外数据而不刷新页面，从而实现更好的用户体验。

2、XHR（XMLHttpRequest）

把 Ajax 推到历史舞台上的关键技术是 XMLHttpRequest（XHR）对象。

【历史】：
1、这个对象最早由微软发明，然后被其他浏览器所借鉴。
2、在 XHR 出现之前，Ajax 风格的通信必须通过一些黑科技实现，主要是使用隐藏的窗格或内嵌窗格。

【作用】：
1、XHR 为发送服务器请求和获取响应提供了合理的接口。
这个接口可以实现异步从服务器获取额外数据，意味着用户点击不用页面刷新也可以获取数据。

2、通过 XHR 对象获取数据后，可以使用 DOM 方法把数据插入网页。

【数据格式】：
1、虽然 Ajax 这个名称中包含 XML，但实际上 Ajax 通信与数据格式无关。
这个技术主要是可以实现在不刷新页面的情况下从服务器获取数据，格式并不一定是 XML。

2、现在多使用JSON格式作为前后端通信的数据格式。

【使用方式】：
原生：https://www.yuque.com/yejielin/mypn47/exaa5g
一些流行的第三方库：Axios

3、Fetch API

XHR 对象的 API 被普遍认为比较难用，而 Fetch API 自从诞生以后就迅速成为了 XHR 更现代的替代标准。

Fetch API 支持期约（promise）和服务线程（service worker），已经成为极其强大的 Web 开发工具。

网络请求的构成

简单得说，
网络请求 = 请求头 + 请求体
服务器响应 = 响应头 + 响应体
image.png

请求头 Reguest Header

image.png

响应头 Response Header

image.png

状态码

image.png

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

Fetch API

Fetch API 能够执行 XMLHttpRequest 对象的所有任务，但更容易使用，接口也更现代化，能够在Web 工作线程等现代 Web 工具中使用。

XMLHttpRequest 可以选择异步，而 Fetch API 则必须是异步。

Fetch API 本身是使用 JavaScript 请求资源的优秀工具，同时这个 API 也能够应用在服务线程（service worker）中，提供拦截、重定向和修改通过 fetch()生成的请求接口。

  1. fetch('bar.txt') 
  2.  .then((response) => { 
  3.    console.log(response.status); // 200 
  4.    console.log(response.statusText); // OK
  6.   // 通过text() 方法获取内容
  7.    response.text().then((data) => { 
  8.      console.log(data); 
  10.    }); 
  11.  }, (err) => { 
  12.    console.log(err); 
  13.  });

只使用 URL 时，fetch()会发送 GET 请求，只包含最低限度的请求头。要进一步配置如何发送请求，需要传入可选的第二个参数 init 对象。
https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

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

ajax、axios、fetch之间优缺点重点对比

https://zhuanlan.zhihu.com/p/58062212

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

浏览器 同源策略 & 跨域

https://www.yuque.com/yejielin/mypn47/rh5rao

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

Web Socket

Web Socket 是与服务器的全双工、双向通信渠道。与其他方案不同，Web Socket 不使用 HTTP，而使用了自定义协议，目的是更快地发送小数据块。这需要专用的服务器，但速度优势明显。