JQuery - Storing ajax response into global variable

Question

Hey All,

Im still somewhat of a newbie on jQuery and the ajax scene, but I have an $.ajax request performing a GET to retrieve some XML files (~6KB or less), however for the duration the user spends on that page that XML content should not / will not change (this design I cannot change, I also don't have access to change the XML file as I am reading it from somewhere else). Therefore I have a global variable that I store the response data into, and any subsequent look ups on the data are done on this variable so multiple requests don't need to be made.

Given the fact that the XML file can increase, Im not sure this is the best practice, and also coming from a java background my thoughts on global public variables are generally a no-no.

So the question I have is whether there might be a better way to do this, and a question on whether this causes any memory issues if the file expands out to some ridiculous file size?

I figure the data could be passed into a some getter/setter type functions inside the xml object, which would solve my global public variable problems, but still raises the question on whether I should store the response inside the object itself.

For example, what I currently do is:

//top of code
var xml;

...

//get the file
$.ajax({
  type: "GET",
  url: "test.xml",
  dataType: "xml",
  success : function(data) {
                xml = data;
            }
});

...

//at a later stage do something with the 'xml' object
var foo = $(xml).find('something').attr('somethingElse');

Answer 1

There's no way around it except to store it. Memory paging should reduce potential issues there.

I would suggest instead of using a global variable called 'xml', do something more like this:

var dataStore = (function(){
    var xml;

    $.ajax({
      type: "GET",
      url: "test.xml",
      dataType: "xml",
      success : function(data) {
                    xml = data;
                }
    });

    return {getXml : function()
    {
        if (xml) return xml;
        // else show some error that it isn't loaded yet;
    }};
})();

then access it with:

dataStore.getXml().find('something').attr('somethingElse');

Answer 2

IMO you can store this data in global variable. But it will be better to use some more unique name or use namespace:

MyCompany = {};

...
MyCompany.cachedData = data;

And also it's better to use json for these purposes, data in json format is usually much smaller than the same data in xml format.

Answer 3

I'd suggest that fetching large XML files from the server should be avoided: the variable "xml" should used like a cache, and not as the data store itself.

In most scenarios, it is possible to examine the cache and see if you need to make a request to the server to get the data that you want. This will make your app lighter and faster.

cheers, jrh.

Answer 4

.get responses are cached by default. Therefore you really need to do nothing to get the desired results.

Answer 5

@redsquare how do I access this cached data then, for example based on some events I need to look up some information in the xml, therefore I need to have a reference to the data some how?

@harshath.jr same response as above, in this scenario (although not the best option, but it has been imposed by the third party nonetheless) the xml is supposed to replicate the data store, although the file is manually updated by the third party. So, how do I go about examining the cache?

Answer 6

Here is a function that does the job quite well. I could not get the Best Answer above to work.

jQuery.extend({
getValues: function(url) {
    var result = null;
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'xml',
        async: false,
        success: function(data) {
            result = data;
        }
    });
    return result;
}

});

Then to access it, create the variable like so:

var results = $.getValues("url string");