xhr中的 response 和responseText 区别

Question

Answer 1

首先明白一点，xhr（XMLHttpRequest），这个对象，代表着http协议规范在客户端js中的实现。

http规范，直白点说，就是http请求中的数据传输规范还有其他一些标准。无论是什么语言，什么地方的http实现，本质上，都是tcp之上的满足http规范的数据传输。

在web前端，一次http请求，对应着一个xhr实例（基本的面向对象概念）。

这个xhr实例上，就可以取到http协议中规定的各种协议属性。本质上，所有的请求响应报文的主体，都是二进制的数据，我们传输的文本内容，也是编码好的二进制数据。

http规范中规定了一个Content-type头，用来指明数据主体的格式，来告诉收发的两端将二进制的数据主体按照什么类型进行解析。而这两个接口（response和responseText），其实只是提供了一些便捷的接口，配合responseType，方便用户获取到解析好的响应，省去手动解析响应主体的步骤。

如果你想详细理解的话，其实你需要去了解下数据传输时候的编码和解码。不同mime type的数据，传输时候的编码方式是不同的。

普通的文本（text/plain），就是编码好的字串，这两个接口上都可以直接读取。

json（application/json）,传输时候，其实是序列化后的json字串，传输时候是按照字串传输的。前端接收到的时候，其实可以直接在responseText上，按照字符串解析成一个json字串，然后手动JSON.parse。也可以手动指定responseType，直接在response上获取解析好的json对象。

document（text/html），如果指定好了responseType, responseText可以获取到html文本，response却可以获取到解析好的DOM对象。

对于其他数据，比如媒体类型（视频，音频），普通二进制流，如果你去responseText获取，那肯定就是乱码了，因为这种二进制肯定没法按照DOMString解析。但是你却可以指定好responseType为blob，在response上获取到Blob对象，然后再通过对应的工具进行处理解析。

总之啊，初级的理解这俩区别，那就是按照文档说的，让你啥时候用啥就用啥。如果你想理解下底层的本质，你需要去了解http协议规范，和数据编码。

Answer 2

来自mdn的解释

XMLHttpRequest.response Read only
Returns an ArrayBuffer, Blob, Document, JavaScript object, or a DOMString, depending on the value of XMLHttpRequest.responseType, that contains the response entity body.
XMLHttpRequest.responseText Read only
Returns a DOMString that contains the response to the request as text, or null if the request was unsuccessful or has not yet been sent.