在[发送表单数据]()一文中，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建立一个表单，然后发送数据到一个隐藏的<iframe>。为了访问你提交内容的处理结果，应检索下<iframe>的内容。
警告：避免使用该技术。在使用第三方服务时，该技术有安全风险，因为它会导致你面临脚本注入攻击。若你使用HTTPS，使用
<ifrme>发送表单还会影响同源策略，并导致内容被发送到一个无法访问的<ifrme>中。当然如果你要兼容很老旧的浏览器，这项技术可能就是你唯一的选择了。
下面是一个例子：
<button onclick="sendData({test:'ok'})">Click Me!</button>// 创建一个iFrame来发送我们的数据
var iframe = document.createElement("iframe");
iframe.name = "myTarget";
// 将iFrame添加到文档流中
window.addEventListener("load", function () {
iframe.style.display = "none";
document.body.appendChild(iframe);
});
// 用来发送数据的函数
// 需要一个参数，是一个由键值对组成的对象
function sendData(data) {
var name,
form = document.createElement("form"),
node = document.createElement("input");
// 定义响应加载时的行为
iframe.addEventListener("load", function () {
alert("Yeah! Data sent.");
});
form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
form.target = iframe.name;
for(name in data) {
node.name = name;
node.value = data[name].toString();
form.appendChild(node.cloneNode());
}
// 要发送数据，表单得添加到文档流中
form.style.display = "none";
document.body.appendChild(form);
form.submit();
// 表单一发送就移除它
document.body.removeChild(form);
}结果如下：
效果
手动创建一个XMLHttpRequest
XMLHttpRequest是发送HTTP请求最安全和可靠的方式。要想用XMLHttpRequest发送表单数据，得先用URL编码要发送的数据，并遵循表单数据请求的规范。
注意： 若想了解更多关于XMLHttpRequest，这几篇文章可能对你有用：An introductory article to AJAX，以及一个关于使用XMLHttpRequest的高级教程。
来重构下我们先前的例子：
<button type="button" onclick="sendData({test:'ok'})">Click Me!</button>如你所见，HTML部分并未真的有所改变，但JavaScript部分就完全不同了：
function sendData(data) {
var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var urlEncodedDataPairs = [];
var name;
// 将data对象转为一个URL编码的键值对数组
for(name in data) {
urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}
// 将键值对组合成一个字符串，并把所有经过URL编码的空格替换为'+'号；以符合浏览器表单提交的行为
// the '+' character; matches the behaviour of browser form submissions.
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
// 定义成功的数据提交后会发生什么
XHR.addEventListener('load', function(event) {
alert('Yeah! Data sent and response loaded.');
});
// 定义失败的情况会发生什么
XHR.addEventListener('error', function(event) {
alert('Oups! Something goes wrong.');
});
// 配置请求
XHR.open('POST', 'https://example.com/cors.php');
// 添加表单数据POST请求所需的HTTP请求头
XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 最后，发送数据
XHR.send(urlEncodedData);
}结果如下：
效果
注意： 若你想使用此处的XMLHttpRequest方法发送数据到第三方网站，也会受到同源策略的限制。要实现跨域请求，还需要CORS和HTTP访问控制。
使用XMLHttpRequest和FormData对象
手动构建HTTP请求是挺麻烦的，幸运的是，最近的一项XMLHttpRequest标准提供了一个处理表单请求的简便方法–FormData对象。
FormData对象可被用来建立要传输的表单数据，或者从表单元素中获取数据来管理如何发送。要注意FormData对象是“只写”的，这意味着你可以改变它们、但不能访问它们的内容。
使用FormData对象的方法会在[使用FormData对象]()一文中详细介绍，下面有两个例子：
使用独立的FormData对象
<button type="button" onclick="sendData({test:'ok'})">Click Me!</button>现在你该很熟悉这个HTML的样子了。
function sendData(data) {
var XHR = new XMLHttpRequest();
var FD = new FormData();
// 将数据添加到FormData对象中
for(name in data) {
FD.append(name, data[name]);
}
// 定义成功的数据提交后会发生什么
XHR.addEventListener('load', function(event) {
alert('Yeah! Data sent and response loaded.');
});
// 定义失败的情况会发生什么
XHR.addEventListener('error', function(event) {
alert('Oups! Something went wrong.');
});
// 配置请求
XHR.open('POST', 'https://example.com/cors.php');
// 发送FormData对象，HTTP头会自动设置
XHR.send(FD);
}结果如下：
效果
将FormData绑到表单元素上使用
你也可以将FormData对象绑定到一个表单元素上，这样做会创建一个FormData对象来表示表单中的数据。
HTML是典型的表单：
<form id="myForm">
<label for="myName">Send me your name:</label>
<input id="myName" name="name" value="John">
<input type="submit" value="Send Me!">
</form>但JavaScript会接管表单的提交操作：
window.addEventListener("load", function () {
function sendData() {
var XHR = new XMLHttpRequest();
// 绑定FormData对象和表单元素
var FD = new FormData(form);
// 定义成功的数据提交后会发生什么
XHR.addEventListener("load", function(event) {
alert(event.target.responseText);
});
// 定义失败的情况会发生什么
XHR.addEventListener("error", function(event) {
alert('Oups! Something goes wrong.');
});
// 配置请求
XHR.open("POST", "https://example.com/cors.php");
// 发送的数据是用户在表单中提供的
XHR.send(FD);
}
// 访问表单元素
var form = document.getElementById("myForm");
// 并接管其submit事件
form.addEventListener("submit", function (event) {
event.preventDefault();
sendData();
});
});结果如下：
效果
处理二进制数据
若你在一个含有<input type="file">组件的表单中使用FormData对象，那么数据会被自动处理。但要手动发送二进制数据的话，还有很多额外工作要做。
现代Web有很多二进制数据源：比如FileReader、Canvas、WebRTC。但不幸的是，某些老旧浏览器不能访问二进制数据或者需要复杂的方法才能实现。这些遗留的问题已不在本文讨论范围之内。若你想了解更多关于FileReader API，请阅读Using files from web applications。
用FormData来发送二进制是很直接的，使用append()方法就好了。但要手动做到这点，就需要一些技巧了。
在下面的例子中，我们会用来FileReader API来访问二进制数据，然后手动建立多部分的表单数据请求。
<form id="myForm">
<p>
<label for="i1">text data:</label>
<input id="i1" name="myText" value="Some text data">
</p>
<p>
<label for="i2">file data:</label>
<input id="i2" name="myFile" type="file">
</p>
<button>Send Me!</button>
</form>如你所见，HTML用了标准的<form>，这没什么神奇的。“神奇”的部分在JavaScript里：
// 由于我们要访问DOM结点，所以得在页面加载完后才初始化脚本
window.addEventListener('load', function () {
// 这些变量用来存储表单数据
var text = document.getElementById("i1");
var file = {
dom : document.getElementById("i2"),
binary : null
};
// 使用FileReader API来访问文件内容
var reader = new FileReader();
// 由于FileReader是异步的，所以得在其完成文件读取后才存储结果
reader.addEventListener("load", function () {
file.binary = reader.result;
});
// 在页面加载时，若已经选择了文件就直接读取它
if(file.dom.files[0]) {
reader.readAsBinaryString(file.dom.files[0]);
}
// 否则在用户选择文件时再读取它
file.dom.addEventListener("change", function () {
if(reader.readyState === FileReader.LOADING) {
reader.abort();
}
reader.readAsBinaryString(file.dom.files[0]);
});
// sendData是本例的主要函数
function sendData() {
// 若已经选择了文件，就等浏览器读取完
// 否则就延迟本函数的执行
if(!file.binary && file.dom.files.length > 0) {
setTimeout(sendData, 10);
return;
}
// 要构建多部分的表单数据请求，需要一个XMLHttpRequest实例
var XHR = new XMLHttpRequest();
// 需要一个分隔符来定义请求体的每部分
var boundary = "blob";
// 将请求体存为一个字符串
var data = "";
// 若用户选择了文件
if (file.dom.files[0]) {
// 开启请求体的新部分
data += "--" + boundary + "\r\n";
// 该部分描述为表单数据
data += 'content-disposition: form-data; '
// 定义表单数据的名字
+ 'name="' + file.dom.name + '"; '
// 提供真实的文件名
+ 'filename="' + file.dom.files[0].name + '"\r\n';
// 提供文件的MIME类型
data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
// 元数据和真实数据部分间有一个空行
data += '\r\n';
// 往请求体里添加二进制数据
data += file.binary + '\r\n';
}
// 文本数据的组织更加简单
// 开启请求体的新部分
data += "--" + boundary + "\r\n";
// 描述为表单数据并命名
data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
// 元数据和真实数据部分间有一个空行
data += '\r\n';
// 往请求体里添加文本数据
data += text.value + "\r\n";
// 完成了所有部分，就“闭合”请求体
data += "--" + boundary + "--";
// 定义成功的数据提交后会发生什么
XHR.addEventListener('load', function(event) {
alert('Yeah! Data sent and response loaded.');
});
// 定义失败的情况会发生什么
XHR.addEventListener('error', function(event) {
alert('Oups! Something went wrong.');
});
// 配置请求
XHR.open('POST', 'https://example.com/cors.php');
// 添加必要的HTTP请求头来处理多部分表单数据的POST请求
XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
// 最后，发送数据
XHR.send(data);
}
// 访问表单
var form = document.getElementById("myForm");
// 接管submit事件
form.addEventListener('submit', function (event) {
event.preventDefault();
sendData();
});
});结果如下：
效果
结论
浏览器的不同，导致通过JavaScript发送表单数据可以简单或很困难。FromData对象是通常的解决方案，而且我们应该毫不犹豫地在老旧浏览器上使用其polyfill：
这个gist用Web Workers来提供FromData
HTML5-formdata致力于提供FromData对象的polyfill，但这得依赖File API
这个polyfill提供了FromData的大部分新方法（entries, keys, values和对for…of的支持）
