Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

XMLHttpRequest with gzip

With the request module for node.js, it's really easy to set up a request that asks for and properly gunzips compressed data from the source:

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

However, I have some js code embedded in an html document that also needs to make an http request, so without the node.js request module I'm using XMLHttpRequest instead:

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

But despite lots of googling I can't work out how to make an XMLHttpRequest request and decompress gzipped data. Would be grateful for any help.

like image 910
drmrbrewer Avatar asked Nov 21 '22 03:11

drmrbrewer


1 Answers

Solution

I believe I've figured out how to do this. Assuming you've imported the pako javascript library (Javascript Links: here) for decompressing, ie

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

then you can decompress data, such as a compressed JSON format, as such:

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

Note, I use JSON.parse, because the inflated response is a string, and saved data like {"chocolate":["dark","white",...]} is saved with backslashes, such as {\"chocolate\": ...}. Parsing the string for a JSON object can be done using the parse function.

Troubleshooting:

It's quite odd how the data is interpreted by your XMLHttpRequest. I originally thought you could set your request type up as "arraybuffer" and then use a FileReader to parse the response string. But really I was converting an array buffer to a blob to convert back to an array buffer in the FileReader which was totally redundant and a mess.

like image 175
Mr G Avatar answered Dec 06 '22 19:12

Mr G