CODEWITHSUNDEEP
javascriptjqueryajaxxml
AlpaxJ1
AlpaxJ1

Reputation: 125

Merging Javascript AJAX requests

I have a performance problem when loading a website over the network stored on an internal server. The performance issue is down to the multiple AJAX requests made in my Javascript file constantly trying to access an XML file and then getting an Image from a XML node or a Name from an XML node.

Is there a way I can merge the AJAX requests together to reduce the amount of requests from the client device to the XML file stored on the server.

My code is as below:

function getimage(getID,XMLImageID)
{
$("#" + getID).empty();
$.ajax({
type: "GET",
url: "XML/XML.xml",
dataType: "xml",
success: function(xml){
$(xml).find(XMLImageID).each(function(){

var image = $(this).find("image[href]").attr("href"); 
$('#'+ getID).append($("<img"+" class="+"Timages"+" src=\"" +image+"\"/>"));
});         
},
error: function() {
alert("(getImage) An error occurred while processing XML file. Reasons could be: \n The XML cant be located. \n The XML is being used by another program. \n The XML is trying to parse incompatible characters. \n The XML syntax/tags are incorrect.");
}
});
}

function getdept(getid,XMLID)
{
var scriptTag = document.scripts[document.scripts.length - 1];
var parentTag = scriptTag.parentNode;
getid = parentTag.id;
$.ajax({
type: "GET",
url: "XML/XML.xml", 
dataType: "xml", 
success: function(xml){
$(xml).find(XMLID).each(function(){
var dept = $(this).find('Dept').text();              
var id = $(this).attr("id");
var sName = $(this).find('Name').text();
$("#"+getid).append('<div class="Team_People" onmouseover="area_hover1(this);area_hover2(this)" href="#p'+id+'">'+dept+'<br />'+sName+'</div>');

}); 
},
error: function() {
alert("(getHierPeopleDept)An error occurred while processing XML file. Reasons could be: \n The XML cant be located. \n The XML is being used by another program. \n The XML is trying to parse incompatible characters. \n The XML syntax/tags are incorrect.");
}
});
}

The AJAX response uses a simplified code below, I just need to merge the code above to make it more neater rather than having multiple ajax requests. Not sure if this is possible (whether adding multiple parameters would work)?

$.ajax({
type: "GET",
url: "XML/XML.xml", 
dataType: "xml", 
success: function(xml){
$(xml).find(XMLID).each(function(){
//Get something from XML node
}); 
},
});
}

If anyone could guide me in the right direction that would be much appreciated! Thanks Regards AJ

Upvotes: 0

Views: 578

Answers (1)

NHNick603
NHNick603

Reputation: 124

Create a global XML variable and query that with your function calls...

var XML = null;

function fetchXML(){
    $.ajax({
        type: "GET",
        url: "XML/XML.xml", 
        dataType: "xml", 
        success: function(data){
            XML = data;
        },
        error:function(){ alert('something went wrong');})
}

function getImage(id) {
    $(XML).find(id).each(){ ... };
}

funcition getDept(id) {
    $(XML).find(id).each(){ ... };
}

Upvotes: 1

Related Questions