How to receive multiple binary values in one AJAX response?
<p>The goal is to send a list of items to retrieve from the server, which queries the file system or a database and ideally returns an array of binary files.</p>

<p>My current methodology is to base64 encode binaries into a JSON array.</p>

<pre><code>// Extend Array class methods to NodeList data type
Object.getOwnPropertyNames( Array.prototype ).forEach( function(method){
  if (method !== 'length')
    NodeList.prototype[method]=Array.prototype[method];
});

// Find People
var nodeList = document.querySelectorAll('div.people');
var people   = nodeList.map(function(el){ return el.dataset.personid; });

// Search Server
var request    = new XMLHttpRequest();
var skip_cache = '?' + new Date().getTime();
request.open('POST', 'cgi.script' + skip_cache );
request.responseType = 'json';
request.onload = function(){
  // response handler
  /* receives json from server, including an array of base64 files for each person 
     loop over array and append base64 values to images (data uri) and prepare other HTML elements 
  */
};
request.send( JSON.stringify({ids:people}) );
</code></pre>

<p>The bottleneck is the size of the request - I'm already breaking the number of people into multiple requests.  Although, base64 is only ~37% larger in its uncompressed state; when you have 1k files to download, it doesn't matter.</p>

<p>The goal is to reduce the size per request (without sacrificing time), which has come down to either a better compression method (lzma vs gzip), or improving the data format (binary over ascii).</p>

<p>Is it possible to transfer multiple binary files at once, or even embed them directly in JSON without side-effects? As a preventative measure I've never attempted this, thinking of possible side effects that would challenge technology of yesteryear.</p>