HTTP中的Content-Type

最新推荐文章于 2023-08-27 16:51:24 发布

zzh1918

最新推荐文章于 2023-08-27 16:51:24 发布

阅读量280

点赞数

分类专栏： javascript 文章标签：互联网 http html 前端后端

本文链接：https://blog.csdn.net/qq_37860930/article/details/78507699

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

MIME

在介绍Content-Type之前，先介绍一下MIME。
早期的互联网时代，网页都很简单，大部分都是文字内容。随着互联网的发展，传递的信息越来越丰富，如图片、声音、视频等。计算机都是传递的二进制文件，那他是怎么知道哪些是图片文件，哪些是声音文件？
很简单，我们直接告诉接受方“喂，这是声音文件，你用声音文件的程序打开”；“这是视频文件…”。
这样接受文件的那一方就知道怎么打开文件了。

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展，它是一个互联网标准，在1992年最早应用于电子邮件系统，但后来也应用到浏览器。服务器会将它们发送的多媒体数据的类型告诉浏览器，而通知手段就是说明该多媒体数据的MIME类型，从而让浏览器知道接收到的信息哪些是MP3文件，哪些是Shockwave文件等等。服务器将MIME标志符放入传送的数据中来告诉浏览器使用哪种插件读取相关文件。

文件的扩展名决定了文件是什么样的MIME类型。
每个MIME类型由两部分组成，前面是数据的大类别，例如声音audio、图象image等，后面定义具体的种类。

文件	扩展名	MIME
超文本标记语言文本	.html	text/html
普通文本	.txt	text/plain
PNG图像	.png	image/png
TAR文件	.tar	application/x-tar
json文件	.json	application/json

Content-Type

在http中，MIME被定义在了Content-Type中。若服务器返回的是html文档，就在响应头中定义Content-Type: text/html。若服务器返回的是jpeg，则Content-Type: image/jpeg。

表单的提交

在Form元素的语法中，EncType表明提交数据的格式用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。例如：

application/x-www-form-urlencoded：窗体数据被编码为名称/值对。这是标准的编码格式。
multipart/form-data：窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分，这个一般文件上传时用。
text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

form表单默认为application/x-www-form-urlencoded，数据被编码为key/value格式发送到服务器。

当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个新的url。
当action为post时候，浏览器把form数据封装到http body中，然后发送到server。

在使用ajax发送请求时，需要我们自己设置content-type，否则默认为text/plain。
这也是为什么ajax的用post请求必须设置如下代码：

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

注意：上面的代码必须设置在open和send方法之间
ajax的get方式本来就要将参数以键值对的形式添加到url后面，这和表单的get方法提交一样，但ajax的post方式若以默认的content-type（text/plain），则会出现问题。
我们用PHP的print_r($_POST)来接受不同content-type值时传递的内容

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="btn">button</button>
    <p id="display"></p>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
    var XHR=new XMLHttpRequest();
    XHR.open("post","09.php");
    // XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    XHR.send("name=zzh&age=21");
    XHR.onreadystatechange=function(){
        if (XHR.readyState==4&&XHR.status==200) {   
                          document.getElementById('display').innerHTML=XHR.responseText;
        }
    }
}
</script>
</body>
</html>

<?php
print_r($_POST);

当我们直接post字符串 “name=zzh&age=21”时，打印出array()
打开调试工具可以看到
这里写图片描述
Content-Type为text/plain，也就说你post的什么它就传递什么。之所以PHP打印出空数组是因为$_POST是保存的是form提交的数据，这里提交的字符串不是form提交的数据。

当我们设置content-type：application/x-www-form-urlencoded时
打印出 Array ( [name] => zzh [age] => 21 )
这里写图片描述
application/x-www-form-urlencoded会使数据被编码为名称/值对。
且以表单数据提交，所以能打印。

以上就是我自己对content-type的理解，若有错误欢迎指出！

zzh1918

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTTP中的Content-Type

MIME在介绍Content-Type之前，先介绍一下MIME。早期的互联网时代，网页都很简单，大部分都是文字内容。随着互联网的发展，传递的信息越来越丰富，如图片、声音、视频等。计算机都是传递的二进制文件，那他是怎么知道哪些是图片文件，哪些是声音文件？很简单，我们只要告诉接受方“喂，这是声音文件，你用声音文件的程序打开”；“这是视频文件…”。这样接受文件的那一方就知道怎么打开文件了
复制链接

扫一扫