绝对冷知识，浏览器环境下JavaScript能够利用到的提交/请求数据的方式有这么多！你都深入了解了

bingchen 发布于2019-08-19 18:46 / 2566人阅读

摘要：你知道在浏览器环境下能够利用到的提交请求数据的方式有哪些吗这些方式各自有什么特点呢在什么情况下使用呢让我们一起来整理一下。其实这也是能够利用到的提交请求数据的方式之一。

你知道在浏览器环境下JavaScript能够利用到的提交/请求数据的方式有哪些吗？这些方式各自有什么特点呢？在什么情况下使用呢？让我们一起来整理一下。

基础知识

建议大家先看完这几篇文章，了解一下基础知识

HTTP访问控制(CORS)

浏览器和服务器实现跨域（CORS）判定的原理

JavaScript 的同源策略

浅谈浏览器端JavaScript跨域解决方法

XMLHTTPRequest

XMLHTTPRequest是最常见的，也是很多框架封装的数据请求方法的底层实现，如我们最熟悉的各类框架的Ajax方法。
详细文档：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Form Action

可以利用Form(表单)来提交/请求，这太常用，于是我们习以为常了。其实这也是JavaScript能够利用到的提交/请求数据的方式之一。
详细文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
文档有意思的，常被新手忽略的的target属性，可配合iframe实现无刷新地与服务器交互（跨域）

A Href

既然Form Action也算，那a标签的href也算吧，233
详细文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Script Src

没错，这个也算。JSONP就是利用script标签的src来请求数据，然后等待数据请求完毕后从script标签中读取数据，巧妙地解决了跨越的问题。一些AMD JavaScript框架也用script标签来异步加载模块，如requirejs。一些JavaScript模版也会用script标签来加载模版，如artTemplate。
详细文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Link Href

没错我说的就是这些。脑洞开起来，一起整理出来。

详细文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Img Src

这个也可以用来数据，一般是图像数据。JavaScript可以监听图像加载后的响应。可以拿到图像像素数据，可以配合Canvas做复杂图像处理，不过有跨域限制。

详细文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Audio Src

和上面的差不多。
详细文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
对于audio底层处理有兴趣的可以参考这篇

努力翻译一篇中文最友好的，Web Audio API的使用相关的文章

Video Src

和上面的差不多。
详细文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

frame& iframe Src

差点忘了这两个兄弟，虽然哥哥frame已经基本没人用了。
详细文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Fetch

这个新出的玩意儿，只有少数高版本浏览器支持。本质与XMLHTTPRequest不同。但有的框架为了支持更多平台，统一API，对不支持Fetch的浏览器提供底层XMLHTTPRequest实现的支持。
详细文档：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

PS: 以上大多数情况下都是用到基于HTTP协议的功能，少数有用到file协议和ftp协议的。

WebSocket

WebSocket则提供给我们机会让我们利用TCP协议与服务端建立长链接，持续通信。
详细文档：https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

WebRTC

越来越厉害了，233
详细文档：https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API

还有吗？欢迎补充&纠错

补充一点，注意区分get跨域和post跨域

待更新

fetch的源码，原理相关

专线服务混合云深入了解javascript 数据库拒绝了我们的连接请求有这么多服务器请求的几种方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79974.html

前端周报：前端面试题及答案总结；JavaScript参数传递的深入理解

摘要：前端面试题及答案总结掘金技术征文金三银四，金九银十，用来形容求职最好的几个月。因为的存在，至少在被标准化的那一刻起，就支持异步编程了。然而异步编程真正发展壮大，的流行功不可没。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面试题及答案总结 |掘金技术征文金三银四，金九银十，用来形容求职最好的几个月...

ermaoL 2019-08-21 16:46 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0
JavaScript简明教程之浏览器，前端程序猿必看

摘要：浏览器对象可以获取浏览器提供的很多对象，并进行操作。对象不但充当全局作用域，而且表示浏览器窗口。对象表示当前页面的信息。由于在浏览器中以形式表示为树形结构，对象就是整个树的根节点。这个行为由浏览器实现，主流浏览器均支持选项，从开始支持。由于JavaScript的出现就是为了能在浏览器中运行，所以，浏览器自然是JavaScript开发者必须要关注的。【写的比较多，难免有疏漏的地方，希望...

_ivan 2019-08-20 10:31 评论0 收藏0
后端好书阅读与推荐（续二）

摘要：后端好书阅读与推荐系列文章后端好书阅读与推荐后端好书阅读与推荐续后端好书阅读与推荐续二几个月又过去了，又读了几本书，同时为了深切体会到某些书里面的要点还专门做了一个小项目，这里就把读书与小项目过程中的一些心得体会记录一下。后端好书阅读与推荐系列文章：后端好书阅读与推荐后端好书阅读与推荐（续）后端好书阅读与推荐（续二）几个月又过去了，又读了几本书，同时为了深切体会到某些书里面的要点还...

Jioby 2019-08-15 12:28 评论0 收藏0