In jQuery my ajax call looks is the following:

The code above executes a synchronous (async: false) ajax call and returns an XML document object, inside “success” function’s body I pass all my desired parameters to my class constructor, in this way:

getConfig() is an utility function which, by using standard DOM functions (like getElementsByTagName()), reads and returns the required node value. Once the parameters are well defined, inside my class the parametric methods will work fine, and my colleagues won’t have to dig into my code in future to change a desired value, they only will need to open the xml file and quickly change an xml node value. The methods inside the class are so defined in this way:

My only doubt was “how much time it will takes to read and process an xml file and its several nodes?”… and the good answer was: only 0.05 seconds!! I’m very satisfied of my code implementation :)

• 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;
    }
  );
}