http请求content-type与响应responseType

http请求

http请求信息由浏览器把地址栏URL信息和页面（html、jsp、asp）组装成http请求消息体

• ＜request-line＞(请求消息行)
• ＜headers＞(请求消息头)
• ＜blank line＞(空行)
• ＜request-body＞(请求消息数据)

content-type是请求消息头中的一个请求参数，标识请求消息数据的格式

http响应

HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文

• ＜status-line＞(状态行)
• ＜headers＞(消息报头)
• ＜blank line＞(空行)
• ＜response-body＞(响应正文)

content-type是响应消息报头中的一个参数，标识响应正文数据的格式

请求content-type的组成

格式 Content-Type: type/subtype;parameter;
例如 Content-Type: text/html;charset:utf-8;

主类型type

• text------------文本类型
• application-- 应用类型
• *----------------所有类型

子类型subtype

• html-----------html格式
• xml -----------xml格式
• json-----------json格式
• *---------------所有格式

参数parameter

常用的是编码方式参数charset:utf-8

常见的媒体类型

type/subtype 即是互联网媒体类型，也叫作MIME-Type

主类型是text

text/html ： HTML格式
text/plain ：纯文本格式      
text/xml ：  XML格式(忽略xml头所指定编码格式而默认采用us-ascii编码)
image/png： png图片格式

主类型是application

application/xhtml+xml ：XHTML格式
application/xml     ： XML数据格式(根据xml头指定的编码格式来编码)
application/json    ： JSON数据格式
application/octet-stream ： 二进制流数据（如常见的文件下载）

请求content-type的三种设置方式

1.设置在发送请求页面的header中

不能指定application/x-www-form-urlencoded和multipart/form-data这两种类型

<header>
  <meta content="text/html" charset="utf-8"/>
</header>

2.设置在form表单提交的enctype参数中

只能指定application/x-www-form-urlencoded和multipart/form-data这两种类型
默认是application/x-www-form-urlencoded类型，浏览器会把表单中发送的数据编码为“key=value”对的形式
当向服务器发送大量的文本、包含非ASCII字符的文本或二进制数据时，例如上传文件时，选择multipart/form-data

<form action="" enctype="multipart/form-data"></form>
<form action="" enctype="application/x-www-form-urlencoded"></form>

3.设置在request header参数中

没有限制都可以用
xhr.send(data)中data参数的数据类型会影响请求头部content-type的默认值，
如果用xhr.setRequestHeader()手动设置了中content-type的值，以上默认值就会被覆盖。

var str = 'DOMString就等同于JS中的普通字符串'；
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) {};
//xhr.send(data)的参数data是DOMString 类型，content-type默认值为text/plain;charset=UTF-8
xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
xhr.send(str);

xhr.send(data),data可以是什么类型的数据，【点击链接】

响应responseType

xhr.response的数据类型

responseType值	xhr.response 数据类型	说明
""	String字符串	默认值(在不设置responseType时)
"text"	String字符串
"document"	Document对象	希望返回 XML 格式数据时使用
"json"	javascript对象	存在兼容性问题，IE10/IE11不支持
"blob"	Blob对象
"arrayBuffer"	ArrayBuffer对象

  var formData = new FormData();
  formData.append('username', 'johndoe');
  formData.append('id', 123456);
  //创建xhr对象 
  var xhr = new XMLHttpRequest();
  //设置xhr请求的超时时间
  xhr.timeout = 3000;
  //设置响应返回的数据格式
  xhr.responseType = "text";
  //创建一个 post 请求，采用异步
  xhr.open('POST', '/server', true);
  //注册相关事件回调处理函数
  xhr.onload = function(e) { 
    if(this.status == 200||this.status == 304){
        alert(this.responseText);
    }
  };
  xhr.ontimeout = function(e) { ... };
  xhr.onerror = function(e) { ... };
  xhr.upload.onprogress = function(e) { ... };
  
  //发送数据
  xhr.send(formData);

如何获取response数据，【点击链接】