Più richieste AJAX in jQuery

Question

Ho una funzione che estrae i dati da due posizioni e inserisce il contenuto restituito in una finestra di dialogo modale che viene visualizzata all'utente.

Entrambe le richieste sono asincrone perché sono di dominio incrociato. Il problema sta nel fatto che non voglio visualizzare la modale fino a quando entrambe le richieste non hanno completato il caricamento. Come posso verificare che entrambe le richieste siano terminate prima di caricare la modale?

Ho provato a collocare le funzioni openModal nel gestore di successo della seconda richiesta e funziona quando le prime richieste finiscono il caricamento prima della seconda richiesta, ma a volte questo non è il caso.

Ecco una copia del mio codice:

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

Partenza la nuova versione di jQuery - 1.5. Ha il supporto per il tuo problema, puoi controllare questo post sul blog per la soluzione del tuo problema: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

Answer 2

Puoi inserire una delle richieste di ajax all'interno del callback di successo dell'altra richiesta, ma ciò non sia efficiente quanto richiedere entrambi allo stesso tempo. Quindi dovresti semplicemente mettere la chiamata openModal all'interno della callback di successo della richiesta interna di Ajax. Non ottimale, sarebbe una soluzione rapida e semplice se questa soluzione dovesse funzionare per voi fino a quando non si troverà un'opzione migliore.

ho intenzione di continuare a pensare su questo ...

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) { 

    });