mediatype.text html,你真的了解mediaType吗？

本期分享专题：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 在看，谢谢~

获取更多技术干货，欢迎【扫码关注】~