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

2016-07-10 22:41:00

你知道在浏览器环境下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协议的。