form表单提交

传统的form表单提交只需要一个form标签，指定action、method='POST'，并期望服务器返回一个text/html页面。

传统表单post请求头

请求体

可以看到请求头中的字段，指明了content-type、content-length，post的内容为application/x-www-form-urlencoded格式的纯文本，这个mime类型也是表单的默认编码属性(enctype)

再来看看表单post上传文件的情况。最早的HTTP POST是不支持文件上传的，给编程开发带来很多问题。但是在1995年，ietf出台了rfc1867,也就是《RFC 1867 -Form-based File Upload in HTML》，用以支持文件上传。所以Content-Type的类型扩充了multipart/form-data用以支持向服务器发送二进制数据。form需要被指定enctype=multipart/form-data

from设置了multipart/form-data后就将以二进制形式传输数据了。

包含上传文件的表单post请求头

请求体

可以看到请求头中指定了mime类型与请求体数据分隔符。根据RFC 1867定义，我们需要选择一段数据作为“分割边界”( boundary属性)，这个“边界数据”不能在内容其他地方出现，一般来说使用一段从概率上说“几乎不可能”的数据即可。

下面的数据便根据boundary划分段，每一段便是一项数据。(每个field被分成小部分，而且包含一个value是"form-data"的"Content-Disposition"的头部；一个"name"属性对应field的ID,等等，文件的话包括一个filename)。

数据内容以两条横线结尾，并以一个换行结束。

传统表单post提交发送两种格式的数据，application/x-www-form-urlencoded -> 请求体为纯文本； multipart/form-data -> 请求体为二进制数据

ajax post

ajax send支持以下几种数据类型：

void send(ArrayBufferView data);

void send(Blob data);

void send(Document data);

void send(DOMString data);

void send(FormData data);

总体可分为，发送 文本 / 二进制 数据。文本(Document, DOMString)，二进制(Blob，ArrayBufferView，FormData)

DOMString

xhr.send(DOMString)类型时，若之前未指定请求头的Content-Type，则默认发送text/plain类型的数据；而一般服务器期望接收urlencoded或json格式的数据，以解析得到对象。因此在发送前需指定：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 或

xhr.setRequestHeader('Content-Type', 'application/json');

Doucment

Blob、ArrayBufferView

Blob是计算机界通用术语之一，全称写作：BLOB (binary large object)，表示二进制大对象。

创建Blob对象的方法有几种，可以调用Blob构造函数,详情移步 https://developer.mozilla.org/en-US/docs/Web/API/Blob

xhr可以直接send一个Blob对象，请求头中的Content-Type等于创建Blob时指定的MIME Type

var data = new Blob(['hello world'], {type: 'text/plain'});

xhr.send(data);

关于Blob、ArrayBufferView、File三个类型之间的关系，可以用下图简单表述：

关系

ArrayBuffer是一段内存，要操作它必须通过ArrayBufferView(是一个Helper类型，它的具体实现有TypedArray与DataView两种)；

构造Blob接收ArrayBuffer、ArrayBufferView、DOMString、Blob四种类型的数据，以及MIMIE type参数。Blob对象有slice方法可以切割数据，可以append一段ArrayBuffer数据；此外这个类型的最常见用途是在xhr.send()与URL.createObjectURL()。

ArrayBuffer表示二进制数据的原始缓冲区，该缓冲区用于存储各种类型化数组的数据，是二进制数据通用的固定长度容器。

类型化数组(Typed Arrays)是JavaScript中新出现的一个概念，专为访问原始的二进制数据而生。

DataView对象在可以在ArrayBuffer中的任何位置读取和写入不同类型的二进制数据。

来看两个例子：

1、直接操作ArrayBuffer 并send ArrayBufferView 来模拟发送表单文本数据

var xhr = new XMLHttpRequest();

xhr.open('POST', '/onpost');

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

var ab = new ArrayBuffer(10);

var tab = new Int8Array(ab);

for (var i=0; i

tab[i] = 97+i;

}

tab[5]=61; // =

xhr.send(tab);

来看看请求报文：

POST http://localhost:10000/onpost HTTP/1.1

Host: localhost:10000

Connection: keep-alive

Content-Length: 10

Origin: http://localhost:10000

User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

Content-Type: application/x-www-form-urlencoded

Accept: */*

Referer: http://localhost:10000/

Accept-Encoding: gzip, deflate

Accept-Language: zh-CN,zh;q=0.8

abcde=ghij

2、发送Blob数据

var bb = new Blob(['hello=world'], {type:'application/x-www-form-urlencoded'});

xhr.send(bb);

效果与例子1相同。

当然，实际应用中不会用这种方式来发text。。这里仅是模拟，表明服务器解析报文是根据Content-Type与请求体内容来的。有传输其他MIME Type的二进制数据的需求，服务器端需要作相应的处理。NodeJS的常用parser中间件body-parser、multer，分别只能解析application/x-www-form-urlencoded与application/json，multipart/form-data类型。

http://www.jianshu.com/p/83be90945336 这篇文章对于js操作、传输二进制数据的讲解十分通俗易懂。

File

File顾名思意就是“文件”，通常而言，表示我们使用file控件()选择的FileList对象，或者是使用拖拽操作搞出的DataTransfer对象。

这里的File对象也是二进制对象，因此，从属于Blob对象，Blob对象的一些属性与方法，File对象同样适合，且推荐使用Blob对象的属性与方法。

来看一个xhr.send(file)的例子：

var file = $('input[type="file"]').files[0]; // 我上传了一个jpg

xhr.send(file);

请求头：

POST http://localhost:10000/onpost HTTP/1.1

Host: localhost:10000

Connection: keep-alive

Content-Length: 178854

Origin: http://localhost:10000

User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

Content-Type: image/jpeg

Accept: */*

Referer: http://localhost:10000/

Accept-Encoding: gzip, deflate

Accept-Language: zh-CN,zh;q=0.8

浏览器会根据file的MIMIE类型填写Content-Type，以及Content-Length(字节数)。

FormData

以上传输二进制数据 / 文件的方法都不如FormData常用。

XMLHttpRequest Level 2添加了一个新的接口FormData. 利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件，我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”。比起普通的ajax, 使用FormData的最大优点就是我们可以异步上传一个二进制文件。

xhr.send(FormData)时，与传统表单POST multipart/from-data一样，指定了请求头中的Content-Type、Boundary。