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

202 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

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

当前,前后端分离已成为互联网项目开发的业界标准,通过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端的消息主动推送等等

\