XMLHttpRequest

Blob - Binary content in JavaScript

function binaryContent() {
    var str = "once there lived a king named midas";
    var bin = new Blob([str], {'type': 'text/plain'});
    if(window.navigator.msSaveBlob)
        window.navigator.msSaveBlob(bin, 'hehe.txt');
    else {
        var a = document.createElement('a');
        var url = window.URL || window.webkitURL;
        
        url = url.createObjectURL(bin);
        
        if(a.download === 'undefined')
            window.location = url;
        else {
            a.style.visibility = 'none';
            a.href = url;
            a.download = 'hehe.txt';
            document.body.appendChild(a);
            //a.click();
            document.body.removeChild(a);
            //settimeout and revoke url
        }
    }
}    

Receiving binary data in ajax response by setting responseType

Note the responseType of xmlhttprequest object is set to blob

var oReq = new XMLHttpRequest();
oReq.open("GET", "/temp.jpg);
oReq.responseType = "blob";

oReq.onload = function(oEvent) {
  var blob = oReq.response;
};

oReq.send();

https://stackoverflow.com/questions/38239361/where-is-blob-binary-data-stored

https://www.w3.org/TR/FileAPI/#slice-method-algo

https://www.w3.org/TR/FileAPI/#blob-section

AJAX response in Binary

https://stackoverflow.com/questions/1645847/ajax-binary-response

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

Download binary content in javascript

http://web.archive.org/web/20071103070418/http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html

https://stackoverflow.com/questions/54542776/saving-file-from-blobhttp-using-javascript-with-no-redirection

    var cont = document.getElementById('owner');
    var prevstr = null;
    var newstr = null;
    var pdfdata = -1;
 
    var jax = new XMLHttpRequest();
    jax.open('GET', '<?php echo $this->url; ?>');
    jax.responseText = 'arraybuffer';
    jax.send(null);
    jax.onreadystatechange = function() {
        if(jax.readyState == 3 && pdfdata < 1) {            
            newstr = jax.responseText;
            if(prevstr)newstr = jax.responseText.slice(prevstr.length)            
            prevstr = jax.responseText;                
            pdfdata = newstr.indexOf("[pdfdata]");
            if(pdfdata < 1)
                cont.innerHTML += newstr;
            else
                cont.innerHTML += newstr.substring(0, pdfdata);
        }
 
        if(jax.readyState == 4) {
 
            document.getElementById('loadingimg').style.visibility = 'hidden';
            pdfdata = jax.responseText.indexOf("[pdfdata]");
            pdfdata += 12;
            pdfdata = jax.responseText.slice(pdfdata);
            createLink(pdfdata);
        }
    }
 
 
 
function createLink(pdfdata) {
 
    var bin = new Blob([pdfdata], {'type': 'application/pdf'});
    if(window.navigator.msSaveBlob)
        window.navigator.msSaveBlob(bin, 'draft.pdf');
    else {
        var a = document.createElement('a');
        var url = window.URL || window.webkitURL;
 
        url = url.createObjectURL(bin);
 
        if(a.download === 'undefined')
            window.location = url;
        else {
            //return;
            a.href = url;
            a.download = 'draft.pdf';
            a.innerHTML = 'Click here to download';
            document.getElementById('downloadlink').style.display = 'block';
            document.getElementById('downloadlink').appendChild(a);
            //a.click();
            //document.body.removeChild(a);
            //settimeout and revoke url
        }
    }
}

Binary content example 2

    var cont = document.getElementById('container');
    var prevstr = null;
    var newstr = null;

    var ctype = '<?php echo $this->ctype; ?>';
    var filename = '<?php echo $this->filename; ?>' + '.' + ctype;

    var jax = new XMLHttpRequest();
    jax.open('GET', '<?php echo $this->url; ?>');
    jax.send(null);
    
    jax.onreadystatechange = function() {

        if(jax.readyState > 2) {
            newstr = jax.responseText;
            if(prevstr)newstr = jax.responseText.slice(prevstr.length)            
            prevstr = jax.responseText;                
            cont.innerHTML += newstr;
        }
        
        if(jax.readyState == 4) {
            document.getElementsByClassName('loadingimg')[0].style.visibility = 'hidden';
            var temref = document.getElementById('temref');
            if(temref)downloadSave(temref.value);
        }
    }
    
function downloadSave(filename) {
    

    jax = new XMLHttpRequest();
    jax.open('GET', '/get/file/' + filename);
    jax.responseType = 'blob';
    jax.send(null);
    jax.onload = function() {

        var bin = new Blob([jax.response], {'type': 'application/image-jpeg'});

        var linkdiv = document.getElementById('dlink');
        linkdiv.style.display = 'block';

        if(window.navigator.msSaveBlob) {
            linkdiv.innerHTML = 'Done';
            window.navigator.msSaveBlob(bin, filename);
        }
        else {
            var url = window.URL || window.webkitURL;
            url = url.createObjectURL(bin);
            var a = document.createElement('a');
            
            if(a.download === 'undefined')
                window.location = url;
            else {
                a.href = url;
                a.download = filename;
                a.innerHTML = 'Click here to save';

                linkdiv.innerHTML = '';
                linkdiv.appendChild(a);
            }
        }
    }

    jax.addEventListener('progress', function(e) {
        progress = (e.loaded / e.total)*100;
        progressUI.innerHTML = Math.round(progress) + '%';
    });
}