XMLHttpRequest with gzip

XMLHttpRequest with gzip

本文关键字：gzip with XMLHttpRequest      更新时间：2023-09-26

使用node.js的request模块，可以很容易地设置一个请求，请求并正确地从源文件中压缩数据:

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)
    }
);

然而，我有一些js代码嵌入在一个html文档，也需要做一个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请求和解压缩的数据。如有任何帮助，将不胜感激。

解决方案

我相信我已经想出怎么做这件事了。假设您已经导入了pako javascript库(javascript链接:这里)进行解压，即

<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。解析，因为膨胀的响应是一个字符串，并保存像{"chocolate":["dark"，"white"，…]}用反斜杠保存，如{'"chocolate'":…}。解析JSON对象的字符串可以使用parse函数完成。

故障排除:

这是相当奇怪的数据是如何解释你的XMLHttpRequest。我最初认为你可以设置你的请求类型为"arraybuffer"，然后使用FileReader来解析响应字符串。但实际上我是将数组缓冲区转换为blob，然后再转换回FileReader中的数组缓冲区，这完全是多余的，而且很混乱。

可能与浏览器有关:http://www.w3c-test.org/XMLHttpRequest/response-data-gzip.htm例如，这个测试在IE上失败。您必须使用以下库手动压缩响应，例如:https://github.com/nodeca/pako

相关文章：