multiples llamadas ajax

[Calderay]

Buenas a todos! a ver si pueden echarme una manita...

Estoy cargando varias paginas externas vía ajax en unos contenedores, algo simplificado seria:

var parametros1 = {"situacion" : "Almacen"};
$.ajax({
data: parametros1, url: 'sumatotales.php', type: 'post',
success: function (re) {
$("#resultado1").html(re);
}
});

var parametros2 = {"situacion" : "Oficina"};
$.ajax({
data: parametros2, url: 'sumatotales.php', type: 'post',
success: function (re) {
$("#resultado2").html(re);
}
});

Es decir que llamo a la misma página (sumatotales.php) con diferentes parametros (Almacen, oficina....) para que me muestre los resultados en las diferentes capas (resultado1, resultado2, etc.)

Pero las llamadas que estoy haciendo son mas de 5 y queria saber si puedo hacer que se ejecuten una detras de otra, es decir que cuando se acabe una, entre la siguiente... He visto ejemplos de callbacks, de $.when(... pero no se si es lo que estoy buscando ni implementarlo....

[Alexis88]

A lo que te refieres en la parte final es a objetos diferidos y promesas. Con ellas puedes realizar acciones luego de haberse completado otras.

Para tu caso, como además veo que repites código en el cual solo varían un par de líneas, te conviene utilizar una función recursiva, la cual se llamará a sí misma (por eso es recursiva) cuando se haya terminado la petición asíncrona actual.

Código Javascript:

function ajax(calls){
    $.when($.ajax(calls[0].properties)).then(function(res){
        calls[0].callback(res);
        calls.splice(0, 1);
        if (calls.length) ajax(calls);
    });
}
 
ajax([
    {
        properties: {
            url: "destino1.php",
            type: "post",
            data: {
                variable: 1
            }
        },
        callback: function(r){
            //Instrucciones
        }
    },
    {
        properties: {
            url: "destino2.php",
            type: "get",
            data: {
                variable: 2
            }
        },
        callback: function(r){
            //Instrucciones
        }
    },
    {
        properties: {
            url: "destino3.php",
            type: "post",
            data: {
                variable: 3
            }
        },
        callback: function(r){
            //Instrucciones
        }
    }
]);
 

La función recibe un array de objetos. Cada objeto posee un atributo y un método. El atributo posee un objeto literal en el cual se definen el destino hacia el cual se enviará la información, el método de envío y los datos a enviar. El método no es otra cosa que una llamada de retorno para hacer algo con la respuesta recibida.

En la función, utilizamos el método $.when() mediante el cual ejecutaremos una función cuando se haya completado la petición asíncrona pasada como argumento. Como puedes ver, tomo al primer elemento de calls, el cual es el array que recibió la función como argumento, y le paso al método $.ajax(), el conjunto de propiedades establecidas en properties. Una vez completada la petición asíncrona, ejecuto la llamada de retorno correspondiente al primer elemento del array calls, pasándole la respuesta de la petición asíncrona como argumento. Enseguida, elimino al primer elemento del array calls y verifico si este aún posee elementos; de ser así, invoco a la misma función ajax() pasándole como argumento al array calls pero ya actualizado, es decir, sin el primer elemento, quedando el segundo en la primera posición, el tercero en la segunda y así sucesivamente.

Si quisieras que transcurra un determinado tiempo entre cada ejecución, puedes utilizar un temporizador:

Código Javascript:

if (calls.length){
    setTimeout(function(){
        ajax(calls);    
    }, 1000);           
}
 

En el ejemplo, las llamadas se ejecutarán de manera sucesiva luego de transcurrido un segundo entre el término de la ejecución de una de ellas y el inicio de la siguiente.

Aunque veo que utilizas el mismo destino y método de envío para todas las peticiones asíncronas, la forma que te propongo te puede servir para casos en los que dichos datos varíen, como en el ejemplo.

Un saludo