javascript - 带有 gzip 的 XMLHttpRequest

Question

随着request module对于 node.js，设置请求并正确压缩来自源的压缩数据的请求非常容易:

var request = require('request');
var requestOptions = {
    url: 'http://whatever.com/getDataWithCompression',
    gzip: true  // <--- this is all that is required
};
request(
    requestOptions,
    function (error, response, data) {
        // do stuff with data (which is already decompressed)
    }
);

但是，我在 html 文档中嵌入了一些 js 代码，它也需要发出 http 请求，所以如果没有 node.js request 模块，我正在使用 XMLHttpRequest 相反:

var request = new XMLHttpRequest();
request.open('GET', 'http://whatever.com/getData', true);
request.onload = function() {
    // do stuff with request.responseText
};
request.send();

但是尽管进行了大量的谷歌搜索，我还是无法弄清楚如何发出 XMLHttpRequest 请求并解压缩 gzip 数据。将不胜感激。

Answer 1

解决方案

我相信我已经想出了如何做到这一点。假设您已经导入了 pako javascript library (Javascript 链接:here)用于解压缩，即

<script type="text/javascript" src="pako.js"></script>

然后就可以解压数据了，比如压缩成JSON格式，如下:

var data;
var request = new XMLHttpRequest();
request.responseType = 'arraybuffer';
request.onload = function() {
  data = JSON.parse(pako.inflate(request.response, { to: 'string' }));
};
request.open('GET',"data.gzip");
request.send();

请注意，我使用 JSON.parse，因为膨胀的响应是一个字符串，并且像 {"chocolate":["dark","white",...]} 这样的保存数据是用反斜杠保存的，例如 {\“巧克力\”: ...}。可以使用 parse 函数解析 JSON 对象的字符串。

故障排除:

XMLHttpRequest 解释数据的方式很奇怪。我最初认为您可以将请求类型设置为“arraybuffer”，然后使用 FileReader 来解析响应字符串。但实际上我是将数组缓冲区转换为 blob，然后再转换回 FileReader 中的数组缓冲区，这完全是多余的，而且一团糟。