关于post与ajax post的数据类型

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

<form method="POST" enctype="multipart/form-data" action="xxx">
  <input type="file" name="file">
</form>

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接收ArrayBufferArrayBufferViewDOMStringBlob四种类型的数据,以及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/jsonmultipart/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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 浏览器与服务器之间,采用HTTP协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏...
    许先生__阅读 493评论 1 2
  • Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是...
    changxiaonan阅读 2,217评论 0 2
  • 文件操作一直是早期浏览器的痛点,全封闭式的不给JavaScript操作的空间。随着H5新接口的推出这个壁垒被打破了...
    JunChow520阅读 1,446评论 0 2
  • 前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用...
    孙悟空SUN阅读 375评论 0 0
  • 前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用...
    雷波_viho阅读 818评论 0 1