Wiele żądań AJAX w jQuery

Question

Mam funkcję, która pobiera dane z dwóch lokalizacji i umieszcza je w modalnym oknie dialogowym wyświetlanym użytkownikowi.

Obie żądania są asynchroniczne, ponieważ są domenami międzydomenowymi. Problem polega na tym, że nie chcę wyświetlać modalu, dopóki oba żądania nie zakończą ładowania. Jak mogę sprawdzić, aby upewnić się, że oba żądania zostały zakończone przed załadowaniem modala?

Próbowałem umieścić funkcje openModal w module obsługi sukcesu drugiego żądania i działa, gdy pierwsze żądania kończą się ładowanie przed drugim żądaniem, ale czasami tak nie jest.

Oto kopia mojego kodu:

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

Zapoznaj się nowa wersja jQuery - 1,5. Obsługuje dokładnie twój problem, możesz zajrzeć do tego posta na blogu, aby rozwiązać problem: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

Answer 2

Możesz umieścić jedno z żądań ajax w callback sukcesu innego żądania, ale to nie być tak samo skuteczny, jak posiadanie obu jednocześnie w tym samym czasie. W takim przypadku wystarczy wywołać wywołanie openModal wewnątrz zwrotnego połączenia wewnętrznego żądania ajax. Nie optymalne, byłoby to szybkie i łatwe rozwiązanie, gdyby to rozwiązanie działało dla ciebie, dopóki nie zostanie znaleziona lepsza opcja.

zamierzam przestać myśleć na ten jeden ...

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

    });