import XML file via AJAX.

Question

The code below does most of what I need. The function is run every time a new image is loaded onto the page. However this has created 100 server requests to the same xml file.. which is not good lets be honest.
So how do I rearange this function so only 1 xml request is used (even though im pulling 1 element out where i = id, the whole xml file is still cached) so i know i can use it.

function loadImages(i){ 
i++;
$.ajax
    ({
        type: "GET",
        url: "sites.xml",
        dataType: "xml",
        async: "true",
        success: function(xml) 
        {
// these are the id's of images i do not want to load  
            var a = [2,3,4,5,6,7,8,9,19,18,60,61,50,49,79,78,81,82,80,70,90,91,92,93,94];

            if ( a.indexOf( 2 ) !== -1 ) { // do this if not an 1 of the id's above
            var img = $(xml).find('image[id=' + i + ']'),
            id = img.attr('id'),
            url = img.find('url').text();

            $('#loading'+i).html('<img src="'+url+'" onLoad="loadImages('+i+')" />').hide();
            $('#loading'+i).fadeIn();
            }
        }
    });
}

Answer 1

You might want to use the AjaxQ plugin.

• Browsers impose a limit on the number of open connections to the server. All requests that do not fit in the limit are going to wait for being run anyway. Internet Explorer does not open more than 2 connections per server at a time by default. Mozilla Firefox, Opera and Safari have a limit of 8 connections per server.

• Sometimes it is essential to avoid flooding the server with plenty of simultaneous AJAX requests.

• Web application needs AJAX requests to run one by one by design, the order is important.