媒体类型mediaType

媒体类型mediaType媒体类型决定浏览器将以何种形式对资源进行解析。常见的媒体格式类型(/)如下:text/html:HTML格式text/plain:纯文本格式image/gif:gif图片格式application/pdf:pdf格式application/octet-stream:二进制流数据(如常见的文件下载)…复制代码主要的使用场景如下:HTTP头部的ContentType、伪协议的data:Content-TypeContent-Type实体头部用于指示资源的MIME类型mediatype。

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

媒体类型决定浏览器将以何种形式对资源进行解析。
常见的媒体格式类型(/)如下:
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],
复制代码应用举例:
媒体类型mediaType
//可以将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 在看,谢谢~
获取更多技术干货,欢迎【扫码关注】~

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/141347.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • QQ图片文件夹说明及清理

    QQ图片文件夹说明及清理C2C(个人与好友之间的图片传输,清空与否依照个人意愿)Group(群组之间的图片传输,很乱建议全部清空)MarktingMsgCachePic(Markting+Msg+Cache+Pic意思是消息图片缓冲集合,就是你聊天时候发送的一些图片保存的地方,无用,可删除)MsgWander(漫游信息,浏览信息,可删)SharePic(分享图片,可删)*注意不要删掉文件夹(比如SharePic)要打开选

  • 微服务优缺点_微服务优势和不足

    微服务优缺点_微服务优势和不足优点1.每个微服务都很小,这样能聚焦一个指定的业务功能或业务需求;2.微服务能够被小团队单独开发;3.微服务是松耦合的,是有功能意义的服务,无论是在开发阶段或部署阶段都是独立的;4.微服务能使用不同的语言开发;5.微服务易于被一个开发人员理解,修改和维护,这样小团队能够更关注自己的工作成果,无需通过合作才能体现价值;6.微服务只是业务逻辑的代码,不会和HTML,CSS或其他界面组件混合;缺点:1.运维要求较高; 2.分布式的复杂性; 3.接口调整成本高; 4.学习难度曲线

    2022年10月22日
  • vb6: dim rs As New ADODB.Recordset 用户定义类型未定义[通俗易懂]

    vb6: dim rs As New ADODB.Recordset 用户定义类型未定义[通俗易懂]你没有启用ADODB的引用,或者加载ADODC控件,在“工程|引用”中添加“MicrosoftActiveXDataObject[版本号,比如2.8等]Library”就可以了[用户定义类型未定义]

  • 动态规划 4、基础背包问题总结(从01开始)「建议收藏」

    动态规划 4、基础背包问题总结(从01开始)「建议收藏」一、01背包问题简述:n种物品,每种一个,选或不选随你,背包一定有容量,求不超过容量的情况下,价值最大。递归方程:dp[i][v]=max{dp[i][v],dp[i-1][v-c[i]]+w[i]}

  • pycharm导入自定义模块_模块导入速度python

    pycharm导入自定义模块_模块导入速度pythonPycharm是很多Python开发者的首选IDE,如果能把一个工具熟练运用,往往有事半功倍的效果,各种快捷键、重构功能、调试技巧。由于Python是一门动态语言,对于自动导入包模块没有静态语言那么方便,但是我们有了Pycharm,还是可以很强大的。平时写代码的时候,要引用系统自带的模块或者是第三方模块,甚至是项目中其它地方的模块,有时候代码快写了一整屏,为了把一个模块导入进来,我们不得不把光标

  • Centos8 部署Promethus(普罗米修斯)+grafana画图「建议收藏」

    Centos8 部署Promethus(普罗米修斯)+grafana画图「建议收藏」文章目录1.普罗米修斯概述2.时间序列数据2.1.普罗米修斯概述Prometheus(由go语言(golang)开发)是一套开源的监控&报警&时间序列数据库的组合。适合监控docker容器。2.时间序列数据什么是序列数据时间序列数据(TimeSeriesData):按照时间顺序记录系统、设备状态变化的数据被称为时序数据。应用的场景很多,如:气候的变化某一个地区的各车辆的行驶轨迹数据传统证券行业实时交易数据实时运维监控数据等时间序列数据特点

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号