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

当前，前后端分离已成为互联网项目开发的业界标准，通过JSON数据格式进行前后端数据的交互可以对整体项目进行有效的解耦，前后端分离也为项目未来的分布式架构、多端化服务扩展打下坚实的基础。

前后端分离，离不开前端代码与后端代码的数据交互。

那么前端都有哪几种向后端发起请求的方式呢？

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端的消息主动推送等等