合并Javascript AJAX请求

时间:2014-07-22 19:08:01

标签: javascript jquery ajax xml

通过存储在内部服务器上的网络加载网站时出现性能问题。性能问题取决于我的Javascript文件中不断尝试访问XML文件,然后从XML节点获取映像或从XML节点获取Name的多个AJAX请求。

有没有办法将AJAX请求合并在一起,以减少从客户端设备到存储在服务器上的XML文件的请求数量。

我的代码如下:

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.");
}
});
}

AJAX响应使用下面的简化代码,我只需要合并上面的代码,使其更整洁,而不是有多个ajax请求。不确定这是否可行(是否可以添加多个参数)?

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

如果有人能指引我朝着正确的方向前进,那将非常感激! 谢谢 问候 AJ

1 个答案:

答案 0 :(得分:1)

使用函数调用创建一个全局XML变量并进行查询...

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(){ ... };
}