Nhiều yêu cầu AJAX trong jQuery

Question

Tôi có một chức năng lấy dữ liệu từ hai vị trí và đặt nội dung trả về trên hộp thoại phương thức được hiển thị cho người dùng.

Cả hai yêu cầu đều không đồng bộ vì chúng là tên miền chéo. Vấn đề nằm ở chỗ tôi không muốn hiển thị phương thức cho đến khi cả hai yêu cầu đã tải xong. Làm cách nào để kiểm tra để đảm bảo cả hai yêu cầu đã hoàn tất trước khi tải phương thức?

Tôi đã thử đặt các hàm openModal trong trình xử lý thành công của yêu cầu thứ hai và hoạt động khi các yêu cầu đầu tiên kết thúc tải trước yêu cầu thứ hai, nhưng đôi khi điều này không đúng.

Dưới đây là một bản sao của mã của tôi:

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

Kiểm tra các phiên bản mới của jQuery - 1,5. Nó có hỗ trợ cho chính xác vấn đề của bạn, bạn có thể xem bài đăng trên blog này để giải quyết vấn đề của mình: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

Answer 2

Bạn có thể đặt một trong các yêu cầu ajax bên trong lời gọi thành công của yêu cầu khác, nhưng điều đó sẽ không hiệu quả khi yêu cầu cả hai cùng một lúc. Sau đó, bạn chỉ cần đặt cuộc gọi openModal bên trong cuộc gọi lại thành công của yêu cầu ajax bên trong. Không tối ưu, nó sẽ là một sửa chữa nhanh chóng và dễ dàng nếu giải pháp này sẽ làm việc cho bạn cho đến khi một lựa chọn tốt hơn được tìm thấy.

Tôi sẽ tiếp tục suy nghĩ về điều này một ...

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

    });