Zerlinda's Blog

Content-Type及三种常见的application

1.  Content-Type

  MediaType,即是Internet Media Type,互联网媒体类型;也叫做MIME类型,在Http协议消息头中,使用Content-Type来表示具体请求中的媒体类型信息。 例如: Content-Type: text/html;charset:utf-8;

 常见的媒体格式类型如下:

  •     text/html : HTML格式

  •     text/plain :纯文本格式      

  •     text/xml :  XML格式

  •     image/gif :gif图片格式    

  •     image/jpeg :jpg图片格式 

  •     image/png:png图片格式

   以application开头的媒体格式类型:

  •    application/xhtml+xml :XHTML格式

  •    application/xml     : XML数据格式

  •    application/atom+xml  :Atom XML聚合格式    

  •    application/json    : JSON数据格式

  •    application/pdf       :pdf格式  

  •    application/msword  : Word文档格式

  •    application/octet-stream : 二进制流数据(如常见的文件下载)

  •    application/x-www-form-urlencoded : <form encType=””>中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)

   另外一种常见的媒体格式是上传文件之时使用的:

  •     multipart/form-data : 需要在表单中进行文件上传时,就需要使用该格式

     以上就是我们在日常的开发中,经常会用到的若干content-type的内容格式。

2. application

表单的enctype 属性可设置或返回用于编码表单内容的 MIME 类型。如果表单没有 enctype 属性,那么当提交文本时的默认值是 "application/x-www-form-urlencoded"。当 input type 是 "file" 时,值是 "multipart/form-data"。

常用的三种content-type:application/x-www-form-urlencoded , multipart/form-data , application/json

下面一段代码包括了三种类型的content-type:

function post(url, data, header) {
  var promise = new Promise(function(resolve, reject) {
    switch(header.trim()){
      case 'application/x-www-form-urlencoded':
        var arrs = [];
        if(typeof data == 'object') {
          for(var k in data) {
            arrs.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]));
          }
          data = arrs.join('&');
        }
        break;
      case 'application/json':
        data = JSON.stringify(data);
        break;
      case 'multipart/form-data':
        var form = new FormData();
        if(typeof data == 'object') {
          for(var k in data) {
            form.append(k, data[k]);
          }
          data = form;
        }
        break;
    }
    //创建发送请求
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //兼容ie
    xhr.open('post', url);
    xhr.setRequestHeader('Content-Type', header);
    xhr.send(data);
    xhr.onreadystatechange = handler;
    //返回状态判断
    function handler() {
      if(this.readyState !== 4) {
        return;
      }
      if(this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
  });
  return promise;
};

跟着代码一起看看这三种content-type

application/x-www-form-urlencoded 

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样: 

首先,Content-Type 被指定为 application/x-www-form-urlencoded;其次,提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。

 

multipart/form-data 

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 form 的 enctyped 等于这个值。直接来看一个请求示例: 

这里首先生成了一个 boundary 用于分割不同的字段,为了避免与正文内容重复,boundary 很长很复杂。消息主体里按照字段个数又分为多个结构类似的部分,每部分都是以 –boundary 开始,紧接着内容描述信息,然后是回车,最后是字段具体内容(文本或二进制)。如果传输的是文件,还要包含文件名和文件类型信息。消息主体最后以 –boundary– 标示结束。

 

这种方式一般用来上传文件,各大服务端语言对它也有着良好的支持。 

 

上面提到的这两种 POST 数据的方式,都是浏览器原生支持的,随着越来越多的 Web 站点,尤其是 WebApp,全部使用 Ajax 进行数据交互之后,我们完全可以定义新的数据提交方式,给开发带来更多便利。 

 

application/json 

application/json 现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。 

JSON 格式支持比键值对复杂得多的结构化数据,这一点也很有用。

这种方案,可以方便的提交复杂的结构化数据,特别适合 RESTful 的接口。各大抓包工具如 Chrome 自带的开发者工具、Firebug、Fiddler,都会以树形结构展示 JSON 数据,非常友好。

发表评论

电子邮件地址不会被公开。 必填项已用*标注