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

在js中：

let img = new Image()
img.onload = (e) => {
  console.log('图片加载完毕', e)
}
img.src = 'xx.xx'

 

navigator.sendBeacon

专为前端统计和诊断而生。

它会异步的以post方式发送数据到服务端

它会尝试在卸载（unload）文档之前向web服务器发送数据，不会影响页面渲染和阻塞页面，即使页面关闭，也不会影响其数据的发送，浏览器会对其进行调度，以确保其可靠性和最低影响性

不受跨域限制

仅IE不支持。

navigator.sendBeacon(url, data);

 

跨域下载JS请求

这是前端的根本，加载一个js脚本，无论是模块化，还是分包都会用到切割js，异步下载它。

不同的异步方式，加载执行的顺序会受浏览器影响。

静态前端库的专有CDN链接。

常见的跨域解决方案中的JSONP的解决方案也是跨域请求JS的典型。

 

form 表单提交

典型请求发起方式。

文件上传。

注意content-type的不同，以及参数的组装方式不同

代码示例：

<form action="/url" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>

 

iframe 链接

本身设计用于引用完整的外部网站

因为也会自动发起一次网络请求，并且可以支持随后发起一系列请求。

常见用于外部广告、Hybird中原生与H5通信、后台管理系统。

 

css 请求

下载外部css样式文件

用于打点时原理类同于图片打点，都是会向服务器发出一次get请求。

 
 
以上就是几种常见的由前端发起网络请求的方式

当然前端与后端进行服务器通信还有其他的诸多方法，比如 webSocket ，比如App端的消息主动推送等等

欢迎大家补充