Get a file with an ajax call

With JSZipUtils

Note: JSZipUtils is a library available here.
"use strict";

// 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.
"use strict";

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>

", { "class": "alert alert-success", text: "loaded, content = " + text })); }, function error(e) { $("#jszip_utils").append($("

", { "class": "alert alert-danger", text: e })); }); })(); //========================= // Fetch API //========================= (function () { var elt = document.getElementById('fetch'); if(typeof window.fetch === "function") { "use strict"; 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($("

", { "class": "alert alert-success", text: "loaded, content = " + text })); }, function error(e) { $("#fetch").append($("

", { "class": "alert alert-danger", text: e })); }); } else { $("#fetch").append($("

", { "class": "alert alert-danger", text: "This browser doesn't support the Fetch API." })); } })(); })();