Несколько запросов AJAX в jQuery

Question

У меня есть функция, которая извлекает данные из двух мест и помещает возвращаемый контент в модальное диалоговое окно, которое отображается пользователю.

Оба запроса являются асинхронными, поскольку они являются междоменными. Проблема заключается в том, что я не хочу отображать модальную форму, пока оба запроса не закончили загрузку. Как я могу проверить, чтобы оба запроса были закончены до загрузки модального?

Я попытался разместить функции openModal в обработчике успеха второго запроса и работает, когда первые запросы заканчивают загрузку перед вторым запросом, но иногда это не так.

Вот копия моего кода:

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

Заканчивать новая версия JQuery - 1,5. У него есть поддержка именно вашей проблемы, вы можете проверить этот пост в блоге для решения вашей проблемы: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

Answer 2

Вы можете поместить один из запросов ajax в обратный вызов успеха другого запроса, но это не будет быть столь же эффективными, как и их одновременное обращение. Тогда вам просто нужно поместить вызов openModal внутри обратного вызова успеха внутреннего запроса ajax. Не оптимально, было бы быстрым и легким решением, если это решение будет работать для вас, пока не будет найден лучший вариант.

Я буду продолжать думать об этом ...

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

    });