前端发起网络请求的几种方式

当前，前后端分离已成为互联网项目开发的业界标准，通过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"/>