媒体类型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)
blank

相关推荐

  • 博弈论基础_博弈论基础罗伯特

    博弈论基础_博弈论基础罗伯特博弈论这个环节特别好玩,游戏嘛(不会的话做题就不好玩了,当年打比赛比赛结束后两三分钟才推出来,一看答案想撕草稿纸)本篇文章含有大量逻辑证明,做题用不到,不想看的可以略过直接看结论和模板参考文献特别鸣谢孙大佬的PPT和精彩讲解威佐夫博弈尼姆博弈SG函数斐波那契博弈区间最值查询ST表详解预处理查询巴什博弈问题模型只有一堆n个物品,两个人轮流从这堆物品中取物,规定每次至少取一个,最多取…

    2022年10月15日
  • linux json文件(tlv格式解析)

    Linux上安装jq:$wgethttp://stedolan.github.io/jq/download/linux32/jq(32-bitsystem)$wgethttp://stedolan.github.io/jq/download/linux64/jq(64-bitsystem)$chmod+x./jq$sudocpjq/usr/bin 

  • Postman 汉化(Postman中文版)

    Postman 汉化(Postman中文版)postman官网下载地址https://www.postman.com/downloads/postman汉化包https://github.com/hlmd/Postman-cn/releases1.首先从官网下载postMan安装包2.下载postMan汉化包(app.zip)3.将汉化包解压并复制到Postman目录下4.重启postMan即可完成汉化…

    2022年10月24日
  • 超详细讲解SpringMVC三层架构

    超详细讲解SpringMVC三层架构SpringMVC三层架构javaSpringMVC的工程结构一般来说分为三层,自下而上是Modle层(模型,数据访问层)、Cotroller层(控制,逻辑控制层)、View层(视图,页面显示层),其中Modle层分为两层:dao层、service层,MVC架构分层的主要作用是解耦。采用分层架构的好处,普遍接受的是系统分层有利于系统的维护,系统的扩展。就是增强系统的可维护性和可扩展性。对于Spring这样的框架,(View\Web)表示层调用控制层(Controller),控制层调用业务层(Servi

  • 云计算、大数据和物联网三者之间有哪些区别和联系?_云计算物联网大数据的区别

    云计算、大数据和物联网三者之间有哪些区别和联系?_云计算物联网大数据的区别云计算、大数据和物联网代表了IT领域最新的技术发展趋势,三者既有区别又有联系。云计算最初主要包括了两类含义:一类是以谷歌的GFS和MapReduce为代表的大规模分布式并行计算技术;另一类是以亚马逊的虚拟机和对象存储为代表的“按需租用”的商业模式。随着大数据概念的提出,云计算中的分布式计算技术开始更多地被列入大数据技术,而人们提到云计算时,更多指的是底层基础IT资源的整合优化以及以服务的方式提供…

  • uart 时序_8080接口时序

    uart 时序_8080接口时序数据传送速率用波特率来表示,指单位时间内载波参数变化的次数,或每秒钟传送的二进制位数  如每秒钟传送240个字符,而每个字符包含10位(1个起始位,1个停止位,8个数据位),这时的波特率为2400Bd  传输时序如下图    在UART中,信号线上共有两种状态,分别用逻辑1(高电平)和逻辑0(低电平)来区分  在空闲时,数据线应该保持在逻辑高电平状态  其中…

发表回复

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

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