A MXHR loader - Part 1 - The downside of XHR

This is going to be somekind of a tutorial how to create a Multipart XMLHttpRequest Javascript loader script. I don't think I will go trough all of it in only one post, so it's probably going to be a series.

I guess a pretty good start for this is talking about MXHR in general. So,

what is MXHR ?

Ajax had a major impact on modern web development. It revolutionized the fashion of websites in the way that we no longer needed to reload a whole website to load new data into it. So that was a big chunk of the such called "Web 2.0".

Anyway, what is this all about. To create a such called "AJAX request" we need a "XMLHttpRequest" object in Javascript. That object provides us all necessary methods and propertys. A classical example would look like:

var _msxml_progid  = [
                    'Microsoft.XMLHTTP',     // no readystate === 3 support
                    'MSXML2.XMLHTTP.3.0',    // no readystate === 3 support
                    'MSXML3.XMLHTTP',                
                    'MSXML2.XMLHTTP.6.0'
                     ],

xhr = (function() {
         var req;
         try {      
              req = new XMLHttpRequest();                
         } catch(e){                
             var len = _msxml_progid.length;
             while(len--){
                 try{                        
                     req = new ActiveXObject(_msxml_progid[len]);
                     break;
                 } catch(e2){ }
             }
         } finally { return req; }
}());

Ok, to be honest that is a little bit more than a classical example, but it's probably the way a standard XHR setup should look like. If you don't understand what is going on here, a brief description:

_msxml_progid is an array with possible ActiveX XHR strings (used by Internet Explorer's of this world). I then call a self-invoking anonymous function to initialize the XHR object. I'm trying to create a "standard" XMLHttpRequest object, if that fails we are most likely in an Internet Explorer environment.

In that case, I'm trying to create an ActiveXObject with the strings of my array in reversed order.

The finally condition returns the newly created XHR object or undefined if we had no success.

So far so good. Where is the Multipart part you might wonder. Well it's not here yet. 

A big downside of an Ajax request is the overhead. The overhead consists of header information, cookies and other data beside the data you actually want to send or receive. That is a bad thing. Imagine we want to transfer five small HTML pages with Ajax requests, that would be a huge waste of bandwidth & performance due to the overhead each HTTP request creates.

But not only Ajax requests show this behavior. Let's assume you're displaying five images on your site. To do that, you place <img> tags in your markup. Guess what, each <img> tag will create a request to your server before loading the file you specify in the src attribute. In other words that method will also create overhead information. Of course that information is not completely unnecesarry, you're browser is telling the server what encodings, charsets, mime-types, etc. it accepts. The response from the server on the other hand, is telling your browser what data the server is actually going to send. So we need that information, but we don't need / want it for every single file!

Multipart XHR to the rescue


If there was a way, we could transfer multiple files in one request, that would be really great. That is the point were MXHR comes on the stage. It is actually doing exactly that, transfering multiple files over single XHR requests.
In a few days part 2 will follow with the topic - "How does it work?"