múltiples peticiones AJAX en jQuery

Question

que tienen una función que toma los datos desde dos ubicaciones y coloca el contenido devuelto en un diálogo modal que se muestra al usuario.

Ambas solicitudes son asíncronas porque son varios dominios. El problema radica en que no quiero mostrar el modal hasta que ambas solicitudes hayan terminado de cargarse. ¿Cómo puedo verificar para asegurarme de que ambas solicitudes hayan finalizado antes de cargar el modal?

He intentado colocar las funciones de openModal en el controlador de éxito de la segunda solicitud y eso funciona cuando las primeras solicitudes terminan de cargarse antes de la segunda solicitud, pero a veces este no es el caso.

Aquí es una copia de mi código:

function loadData(id) { 
$.ajax({ 
    type: 'GET', 
    url: 'https://someurl.com/v1.0/controller1/' + id, 
    dataType: 'jsonp', 
    success: function(data) { 
     // Do some stuff to the data 
    } 
}); 

$.ajax({ 
    type: 'GET', 
    url: 'https://someurl.com/v1.0/controller2/' + id, 
    dataType: 'jsonp', 
    success: function(data) { 
     // Do some stuff to the data 

     openModal(); 
    } 
}); 
} 

function openModal() { 
// Open the modal 
} 

Answer 1

Mira la nueva versión de jQuery - 1.5. Tiene soporte para su problema exactamente, puede consultar esta publicación de blog para la solución de su problema: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

Answer 2

Podría colocar una de las solicitudes ajax dentro de la devolución exitosa de la otra solicitud, pero eso no lo haría ser tan eficiente como pedir que ambos lo soliciten al mismo tiempo. Entonces solo tendrías que poner la llamada de openModal dentro de la devolución de llamada exitosa de la solicitud interna de Ajax. No es óptimo, sería una solución rápida y fácil si esta solución funcionara para usted hasta que encuentre una mejor opción.

voy a seguir pensando en esto ...

Answer 3

$.when(
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { 
     tags: "moon", 
     tagmode: "any", 
     format: "json" 
    }), 
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { 
     tags: "bird", 
     tagmode: "any", 
     format: "json" 
    })).then(function (res1, res2) { 

    });