前端跟后端通过 ajax 请求来传输数据，服务端通常会返回 json 数据来处理，我们可以通过设置 XMLHttpRequest.responseType 返回服务器响应的数据类型，如果不设置或者设置为 "" 会使用 text 类型返回

responseType 必须设置跟服务器返回的类型是兼容的，否则就算浏览器返回了数据，前端也可能收到 null

responseType 可选值
值 描述
"" 跟设置 text 相同，实际上是 DOMString
text response 是包含在 DOMString 对象中的文本
arraybuffer response 是一个包含二进制数据的 JavaScript ArrayBuffer
blob response 是一个包含二进制数据的 Blob 对象
document response 是一个 HTML Document 或 XML XMLDocument ，这取决于接收到的数据的 MIME 类型
json response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的，这个也是使用最多的情况

arrayBuffer 的应用（服务器二进制流转图片）

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
 
oReq.onload = function(oEvent) {
  const blob = new Blob([oReq.response], {type: "image/png"});
  const url = window.URL.createObjectURL(blob)
  console.log(url)
};
oReq.send();

blob 的应用（服务器二进制流转图片）

// 使用 responseType = 'blob' 来实现
oReq.responseType = "blob";
 
oReq.onload = function(oEvent) {
  const blob = oReq.response;
  const url = window.URL.createObjectURL(blob)
  console.log(url)
}

在老的浏览器接受二进制数据

function load_binary_resource(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url, false);
  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType('text/plain; charset=x-user-defined');
  req.send(null);
  if (req.status != 200) return '';
  return req.responseText;
}

req.overrideMimeType 重写了默认的 MIME 类型，主要是告诉浏览器不要解析数据，直接返回未处理的字节码

var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) & 0xff; // 扔掉的高位字节(f7)

上例从请求回来的二进制数据中得到偏移量为 x 处的字节.有效的偏移量范围是 0 到 filestream.length - 1

Javascript html5