Ajax request with Blob and ArrayBuffer

by davorpeic

HTML

<p>Send the test JSON <code>{ "text": "test" }</code>, as a Blob or an ArrayBuffer, to <a href="http://developer.github.com/v3/">https://api.github.com/markdown</a>.</p>

<a href="#" id="blobButton">Send as Blob</a>
<br>
<a href="#" id="arraybufferButton">Send as ArrayBuffer</a>

JavaScript

var sendAsBlob = function() {
    
    var ajaxRequest = new XMLHttpRequest();
    ajaxRequest.open('POST', 'https://api.github.com/markdown', true);
    ajaxRequest.setRequestHeader('Content-Type', 'application/json');
    
    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4) {
            alert('Response: \n' + ajaxRequest.responseText);
        }
    };

    var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
    
    if(BlobBuilder) {
        // android
        var oBuilder = new BlobBuilder();
        var aFileParts = ['{ "text": "test" }'];
        oBuilder.append(aFileParts[0]);
        var blob = oBuilder.getBlob("text\/plain"); // the blob
        
    } else {
        // everyone else
        var blob = new Blob(['{ "text": "test" }'], { 'type': 'text/plain' });    
    }

    ajaxRequest.send(blob);
};

var str2ab_blobreader = function(str, callback) {
    var blob;
    BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
    if (typeof(BlobBuilder) !== 'undefined') {
      var bb = new BlobBuilder();
      bb.append(str);
      blob = bb.getBlob();
    } else {
      blob = new Blob([str]);
    }
    var f = new FileReader();
    f.onload = function(e) {
        callback(e.target.result)
    }
    f.readAsArrayBuffer(blob);
}

function sendAsAB() {
 
    var ajaxRequest = new XMLHttpRequest();
    ajaxRequest.open('POST', 'https://api.github.com/markdown', true);
    ajaxRequest.setRequestHeader('Content-Type', 'application/json');
    
    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4) {
            alert('Response: \n' + ajaxRequest.responseText);
        }
    };
        
   var buffer = str2ab_blobreader('{ "text": "test" }', function(buf) {
       ajaxRequest.send(buf);
    });

};

document.getElementById('blobButton').addEventListener('click',...