资讯专栏INFORMATION COLUMN

【译】通过JavaScript发送表单

qylost / 729人阅读

摘要:能异步地发送任意数据的技术称为,表示异步的和。若你使用,使用发送表单还会影响同源策略,并导致内容被发送到一个无法访问的中。但要手动发送二进制数据的话,还有很多额外工作要做。用来发送二进制是很直接的,使用方法就好了。

系列文章说明

原文

在[发送表单数据]()一文中,HTML表单可以声明式地发送一个HTTP请求。但表单也可以用JavaScript来准备一个HTTP请求。本文将探索如何做到这点。

表单,不只是表单

随着开放式Web应用的出现,现在提供HTML表单、而不是文字表单供用户填写的做法,已经越发普遍了。而越来越多的开发者也获得了数据传输的控制权。

获得对数据传输的控制权

标准的HTML表单提交操作会加载数据发送到的URL,这就意味着浏览器的窗口中会进行整个页面的重新加载。而如果避免了页面的重新加载,就会避免页面的闪烁和网络延迟,进而提供更顺畅的用户体验。

在许多现代的UI设计中,HTML表单只是用来收集用户的输入。当用户要发送数据时,Web应用会进行控制,并在后台异步地发送数据,只更新UI中需要更改的部分。

能异步地发送任意数据的技术称为AJAX,表示“异步的JavaScript和XML”。

和传统表单处理的不同

AJAX使用了XMLHttpRequest(XHR)DOM对象,它可以建立HTTP请求、发送请求并处理结果。

注意: 老的AJAX技术可能不是用XMLHttpRequest。比如JSONP和eval()函数结合起来使用。虽然该方法可行,但不推荐使用它,因为其存在严重的安全问题。所以除非为了兼容那些特别老旧、不支持XMLHttpRequest或JSON的浏览器,还是避免使用该技术

由于历史原因,XMLHttpRequest本是设计用来获取和发送交换格式为XML的数据的。但现在JSON取代了XML,有着更普遍的使用。

不过XML和JSON都不符合作为表单数据请求的编码。表单数据(application/x-www-form-urlencoded)是用于构造键值对的URL编码列表的,若是要传输二进制数据,HTTP请求会被重塑为 multipart/form-data

若你能掌控前端(运行在浏览器上的代码)和后端(运行在服务器上的代码),你就能发送JSON或XML、并随心所欲地处理它们。

但如果你使用的是第三方服务,这就没那么容易了,因为某些服务只接受表单数据。当然也有使用表单数据处理起来更方便的情况,比如数据是键值对或二进制数据时,用现成的后端工具就能处理它们、不需要额外的代码。

那么,具体该如何发送数据呢?

发送表单数据

目前有三种方式来发送表单数据,既有老旧的技术、也有新特性FormData对象,接下来就来深入了解下它们。

在隐藏的iframe中构建DOM

发送表单数据最古老的方法,是用DOM API建立一个表单,然后发送数据到一个隐藏的