Get a file with an ajax call

With JSZipUtils

Note: JSZipUtils is a library available here.

// 1) get a promise of the content
var promise = new JSZip.external.Promise(function (resolve, reject) {
    JSZipUtils.getBinaryContent('/jszip/test/ref/text.zip', function(err, data) {
        if (err) {
            reject(err);
        } else {
            resolve(data);
        }
    });
});

promise.then(JSZip.loadAsync)                     // 2) chain with the zip promise
.then(function(zip) {
    return zip.file("Hello.txt").async("string"); // 3) chain with the text content promise
})
.then(function success(text) {                    // 4) display the result
    $("#jszip_utils").append($("<p>", {
        "class": "alert alert-success",
        text: "loaded, content = " + text
    }));
}, function error(e) {
    $("#jszip_utils").append($("<p>", {
        "class": "alert alert-danger",
        text: e
    }));
});

<div id="jszip_utils"></div>

With the Fetch API

Note: the Fetch API is a new javascript API which may not be available everywhere.

fetch('/jszip/test/ref/text.zip')       // 1) fetch the url
.then(function (response) {                       // 2) filter on 200 OK
    if (response.status === 200 || response.status === 0) {
        return Promise.resolve(response.blob());
    } else {
        return Promise.reject(new Error(response.statusText));
    }
})
.then(JSZip.loadAsync)                            // 3) chain with the zip promise
.then(function (zip) {
    return zip.file("Hello.txt").async("string"); // 4) chain with the text content promise
})
.then(function success(text) {                    // 5) display the result
    $("#fetch").append($("<p>", {
        "class": "alert alert-success",
        text: "loaded, content = " + text
    }));
}, function error(e) {
    $("#fetch").append($("<p>", {
        "class": "alert alert-danger",
        text: e
    }));
});

<div id="fetch"></div>