本期分享专题:mediaType相关应用,涉及Content-Type、DataURL
话不多说,开始正文~
媒体类型决定浏览器将以何种形式对资源进行解析。
常见的媒体格式类型(/)如下:
text/html: HTML格式
text/plain:纯文本格式
image/gif:gif图片格式
application/pdf:pdf格式
application/octet-stream:二进制流数据(如常见的文件下载)
...
复制代码
主要的使用场景如下:HTTP头部的ContentType、伪协议的data:
Content-Type
Content-Type实体头部用于指示资源的MIME类型media type。
语法格式:
Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something
复制代码
这里我们重点讨论POST请求时Content-type的几种媒体类型:
application/x-www-form-urlencoded
原生
中默认的encType,即表单默认的数据提交格式,提交的数据以key=val形式编码,用&连接,如POST / HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 14 //注明内容长度
name=M2&age=18
复制代码
注意:
数据被使用URL编码(支持ASCII字符集)。
如果是get请求,上述编码后的数据会被附加在url链接后;
如果是post请求,上述编码后的数据会被放在HTTP的请求体中。
multipart/form-data
对于发送大量二进制数据或者包含non-ASCII字符的文本,application/x-www-form-urlencoded是效率低下的(需要用更多字符表示一个non-ASCII字符)。
因此提交form时,如果数据包含文件上传,non-ASCII数据或者二进制数据时,就需要设定**
**。格式举例:
POST / HTTP/1.1
Content-Type:multipart/form-data; boundary=splitTag
--splitTag
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
... content of chrome.png ...
--splitTag--
复制代码
注意:
1)boundary分隔符将数据分为多个Parts,每个Part都包含头部信息;
2)每个部分,使用--boundary开头,以--boundary--结束。
【formData】
利用formData,使用append方法进行key-value的数据添加来模拟表单信息,然后使用XMLHttpRequest发送这个表单信息。键值可以是:
文本
文件File对象
Blob对象
var form = document.getElementById("form");
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
//可以使用form表单初始化
let formData = new FormData(form);
//字符串或对象
formData.append('name', 'M2');
//File
formData.append('userfile',fileInputElement.files[0]);
//Blob
let oFileBody='hey!';
let oBlob=new Blob([oFileBody],{type:"text/xml"});
formData.append("webmasterfile",oBlob);
xhr.send(formData);
复制代码
application/json
目前用的较多的一种编码当时。用来告诉服务端消息主体是序列化后的JSON字符串。
方便传输复杂的结构化数据。
Data URL
先简单介绍下伪协议,不同于http://、https://、ftp://,伪协议是为了关联应用程序而使用的,如:
tencent://(关联QQ),
data: //用base64编码在浏览器端输出二进制文件
javascript: //后面的代码当JavaScript来执行,并将结果值返回给当前页面。
复制代码
这里我们主要介绍DataURL,其允许内容创建者向文档中嵌入小文件。
格式如下:
data:[][;charset=][;base64],
复制代码
应用举例:
//可以将logo图片转为DataURL,内联到src中
复制代码
好处: 减少请求数。
缺点: 但是无法对资源做缓存,体积增大。
温馨提示:以下案例,可以复制到浏览器网址栏看效果。
Example1:
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
复制代码
指定为base64编码的文本,会被当做文本解码后为:Hello, World
Example2:
data:application/octet-stream;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
复制代码
指定为二进制流的形式,则会使用下载的方式处理,文件内容为:Hello, World
Example3:
data:image/gif;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
复制代码
如果强行把一段文本指定为image类型,浏览器会按照图片解析,但是显而易见解析不成功。
如果对你有帮助,请**点赞** or 在看,谢谢~
获取更多技术干货,欢迎【扫码关注】~