媒体类型mediaType

全栈程序员-站长 • 2022年5月26日上午8:00 • 未分类 • 阅读 34

大家好，又见面了，我是你们的朋友全栈君。

媒体类型决定浏览器将以何种形式对资源进行解析。
常见的媒体格式类型(/)如下：
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中
媒体类型mediaType
复制代码好处：减少请求数。
缺点：但是无法对资源做缓存，体积增大。

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

在这里插入图片描述