form表单提交
传统的form表单提交只需要一个form标签,指定action、method='POST',并期望服务器返回一个text/html页面。
可以看到请求头中的字段,指明了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
<form method="POST" enctype="multipart/form-data" action="xxx">
<input type="file" name="file">
</form>
from设置了multipart/form-data
后就将以二进制形式传输数据了。
可以看到请求头中指定了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.length; 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控件(<input type="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。