前端发起网络请求的几种方式
当前，前后端分离已成为互联网项目开发的业界标准，通过JSON数据格式进行前后端数据的交互可以对整体项目进行有效的解耦，前后端分离也为项目未来的分布式架构、多端化服务扩展打下坚实的基础。
前后端分离，离不开前端代码与后端代码的数据交互。
那么前端都有哪几种向后端发起请求的方式呢？
js直接发起XHR
XHR作为兼容性最好的纯数据请求方式，被广泛用于前端数据请求。
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
它可以
- 在不重新加载页面的情况下更新网页
- 在页面已加载后向服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
它是异步请求数据的首选。
早期jQuery时代的 $.ajax 还是现在流行的 axios，底层原理其实都是 new XMLHttpRequest()。
它出生较早，数据使用回调的方式进行处理，写法较繁琐。
xhr可以原生支持异步请求
使用示例：
var xhr = new XMLHttpRequest(); xhr.open("get","url", true); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status == 200){ alert(xhr.responseText); } } }
featch API
现代前端发起请求的标准方式，大大简化了发起请求的复杂度，代码量较少。
天然融合promise，默认异步，只有网络异常或跨域时才会reject掉。
想要实现同步效果需要借助 async await
较底层，可用于文件数据流读取
它是浏览器原生支持的，可以不用引用http的类库即可实现发送请求
但是fetch也是有兼容问题的，但随着时间的流逝，浏览器厂商的升级，IE的死亡，这个问题在不久的将来不会是大问题fetch配置请求是否携带cookie和接受服务端写入cookie是需要额外设置的credentials
使用示例:
fetch('url', { method: 'GET', // *GET, POST, PUT, DELETE body: '', headers: { 'user-agent': 'Mozilla/4.0', 'content-type': 'application/json' }, credentials: 'include' }) .then(function(response) { return response }) .then(function(response) { console.log(response); });
图片的src请求
众所周知，HTML中img标签，只要放置了src属性，就会发出请求。
重复的图片地址，所有浏览器都只请求一次。
常用于加载一张图片用于显示或绘制画布。
用于统计打点。好处是资源消耗超少，天然跨域。但由于是Get请求，数据量有限制。
<img src="xx.xx" style="display: none"/>
