你真的了解mediaType吗？

本期分享专题：mediaType相关应用，涉及Content-Type、DataURL

话不多说，开始正文~

媒体类型决定浏览器将以何种形式对资源进行解析。
常见的媒体格式类型(<type>/<subtype>)如下：

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

原生<form encType="">中默认的encType，即表单默认的数据提交格式，提交的数据以key=val形式编码，用&连接，如

POST / HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 14    //注明内容长度
 
name=M2&age=18

注意：
1) 数据被使用URL编码（支持ASCII字符集）。
2) 如果是get请求，上述编码后的数据会被附加在url链接后；
3) 如果是post请求，上述编码后的数据会被放在HTTP的请求体中。

multipart/form-data

对于发送大量二进制数据或者包含non-ASCII字符的文本,application/x-www-form-urlencoded是效率低下的（需要用更多字符表示一个non-ASCII字符）。
因此提交form时，如果数据包含文件上传，non-ASCII数据或者二进制数据时，就需要设定<form enctype='multipart/form-data'>。
格式举例：

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='<a id="a"><b id="b">hey!</b></a>';
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:[<mimeType>][;charset=<charset>][;base64],<encoded data>

应用举例：

<img src="./logo">
//可以将logo图片转为DataURL,内联到src中
<img src="data:image/png;base64,iVBORw0KGgoAAA.." />

好处：减少请求数。
缺点：但是无法对资源做缓存，体积增大。

温馨提示：以下案例，可以复制到浏览器网址栏看效果。
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 在看，谢谢~
获取更多技术干货，欢迎【扫码关注】~