The most important import is goog.net.XhrIo, which represents the object wrapping the XmlHttpRequest and allows us to retrieve and send information to/from the server. This class is a pretty low level api, which means that several tasks are not as simple and automatic as they would in jQuery or such libraries, but on the other hand this offers us more control and consciousness of what we are going to do.
The first step is instantiate an object of type goog.net.XhrIo and take a reference to it:

Then we will be able to listen for events:

In this case we will listen to a “complete” event, which is an event always dispatched by goog.net.XhrIo even if the call fails. We can however listen to a “success”, an “error”, an “abort” or a “readystatechange” event, but in most cases listen only to “complete” is the best and easy choice. If we decide to listen to “complete” event, we will handle the result and ask to goog.net.XhrIo if the ajax call has been successful or not:

To start the request we will use the send() method, which accepts the following parameters: the url to call (the only mandatory argument), the method to use (usually “GET” or “POST”), a query string containing the parameters to send and a map (key-value object) representing custom headers to send.
Before starting the ajax call, let’s see how to create an object that will holds data to send to the server by using the class goog.Uri.QueryData:

As I can see from Closure reference, the approach above is the faster way to create a “data container” in order to send data with ajax. We can use the static method createFromMap() of goog.Uri.QueryData and pass an anonymous map (which has no reference) to it. A map is one of the several objects coming from the Java world that has been introduced in Closure by Google under the package goog.structs, it is essentially an object containing a certain number of keys holding a determinate value. Once we have our data stored into a goog.Uri.QueryData we will use the toString() method to send it through ajax, send() method in fact expects a string representation of the data (param1=value&param2=value…) not an object:

The complete example’s code is the following:

• file_A, file_B, file_C
• file_D, file_E
• file_F

I can get the following display order:

1. file_A
2. file_B
3. file_C
4. file_D
5. file_E
6. file_F

which is what I want, but more probably I will get a similar order:

1. file_D
2. file_E
3. file_A
4. file_B
5. file_C
6. file_F

because the ajax responses are returned (due to the case) in this order: file_2.xml, file_1.xml and file_3.xml. This is not acceptable, specially due to a project requirement which force the reload of the page each time the user select any of the object displayed in order to see its details.

So, I’ve realized a sort of “priority tail” by adding an extra XML node, called <priority> to the XML document returned from the ajax call. This has been possible by using the parameter dataFilter provided by jQuery’s $.ajax() method, which accepts a function callback to apply an extra data-processing operation.

This is a piece of code:

$.ajax({
  type: "GET",
  url: XMLUrl,
  dataType: "xml",
  cache: this.cacheAjax,
  success: this._storeData,
  error: this._storeError,
  dataFilter: function(data) {

    var root, newNode, newNodeValue;

    root = data.getElementsByTagName('pics')[0];
    newNode = data.createElement("priority");
    newNodeValue = data.createTextNode(priority);
    newNode.appendChild(newNodeValue);
    root.appendChild(newNode);

    return data;

  }
});

The priority variable is passed as a parameter to a method (this._startAjaxRequest()) that wraps the jQuery code ($.ajax()). In this way I can store the data retrieved (basically i put the XML documents into an array) from the ajax calls randomly (based on the responses order) and then I can sort the store (by using the priority value) and display the objects always in the same order.

This is a piece of code of this._storeData() that shows how the data is stored for further processing operations:

this._storeData = function(xhr) {

  var XMLDoc = xhr.documentElement;

  // adds the XML document to the MediaBrowser's dataStore
  instance.dataStore.push({
	doc: XMLDoc,
	priority: XMLDoc.getElementsByTagName("priority")[0].firstChild.nodeValue
  });
...

…and this is the method which sorts the data into array:

this._sortDataStore = function() {
  instance.dataStore.sort(
    function(a, b) {
      return a.priority - b.priority;
    }
  );
}