XMLHttpRequest

XMLHttpRequest

一个Http请求包括请求头、相应头 、request、 response等，对于很多初学者来说，由于上来接触的就是JQuery等封装好的请求方式，对于反复提到的dataType、responseType、setRequestHeader等等，往往一知半解，会使用，但是不确定是否正确。今天就让我们慢慢揭开他们神秘的面纱。

先看一个常规的请求头

Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Cookie: clientLanguage=zh_CN
Content-Type: application/x-www-form-urlencoded
Host: google.com
Pragma: no-cache
Referer: http://google.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36

本文只需要关注Accept、Content-Type这两部分，通信的过程就像两个人对话，Accept代表着浏览器告诉服务器：我能理解的数据类型；Content-Type代表着浏览器告诉服务器：我刚刚发送的请求内容是什么格式的。

这两个字段都是可以手动修改的。利用setRequestHeader('Accept','*/*')这样的方式来指定接受的数据类型，一般来说是不用修改的，因为浏览器的这个字段都会包含一个*/*，意味着各种格式都可以接受。

setRequestHeader('Content-Type','application/json')是比较有意思的部分，在POST请求的时候，代表着请求主体的格式，JQuery的ajax里面type对应的就是这个字段。各个封装的ajax都有默认的请求content-type, 如果不设置该字段，那么就会依据实际发送的数据是什么格式来确定该字段，但是为了保险起见，建议手动设置该字段。

再来看一个常规的响应头

Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Type: application/json;charset=UTF-8
Date: Fri, 12 Apr 2019 02:54:47 GMT
Expires: 0
Pragma: no-cache
Server: nginx/1.12.2
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

本文只关注Content-Type这一部分，这部分代表着服务器告诉浏览器：我返回的数据是什么格式的，你该怎么解读。

同样，也是可以手段设置的。手动设置的意义在于： 不管返回的数据真实是什么格式的，我告诉浏览器就把它当成我设置的格式来解读！ 霸道！设置该字段的方式有overrideMimeType('application/json')和xhr.responseType='json'，后者是新的方法，前者兼容性较好。强制设置该字段在有些时候很有用，比如较老的xhr不支持类型为blob等的二进制数据，可以设置responseType="text"来接受该数据，再用其他方法来处理数据。

总结

现在我们回头看看那些披着面纱的神秘人物dataType、responseType。 dataType在jQuery里面就是设置请求头的content-type，而responseType其实就是设置响应头的content-type。