AJAX调用和异步性

Question

I'm calling on two urls to get data and put on a table. Problem is, when there's only one ajax call everything is loaded in order it's supposed to. When there're two, all hell breaks loose.I started with promises but was told it wasn't a good idea [edit1] the way i was implementing it. suggestions please?

example of code:

 $.ajax({
"url":url1,
"crossDomain":true,
"dataType":"jsonp",
'success': function(response){ 
var datee = response.results.collection1[0].date;
var collection = response.results.collection2;
$(".table-group1").append('<tr><td class=well">'+ datee.substr(56,60) +'</td></tr>');
for (var i = 1; i < collection.length; i++){   
    $(".table-group1").append('<tr>' + '<td class="well">' + collection[i].domain.href + '</td>' + '<td class="well">' + collection[i].dns + '</td>' + '<td class="well">' + collection[i].mail + '<td class="well">' + collection[i].web + '</td>' +'</tr>');}},
error: function(err){
          alert('error!' + err);
      } 
});

 $.ajax({
    "url":url2,
    "crossDomain":true,
    "dataType":"jsonp",
    'success': function(response){ 
    var datee = response.results.collection1[0].date;
    var collection = response.results.collection2;
    $(".table-group1").append('<tr><td class=well">'+ datee.substr(56,60) +'</td></tr>');
    for (var i = 1; i < collection.length; i++){   
        $(".table-group1").append('<tr>' + '<td class="well">' + collection[i].domain.href + '</td>' + '<td class="well">' + collection[i].dns + '</td>' + '<td class="well">' + collection[i].mail + '<td class="well">' + collection[i].web + '</td>' +'</tr>');            
  }},
      error: function(err){
          alert('error!' + err);
      } 
});

Desired output is a table with two columns for each property (domain, dns, email web) from both url1 and url2.

html table:

<div class= "container_1">

<table class="table" border="1">
<th class="panel-heading"> </th>
<tr class="domain"> </tr>
<tr class="table-group1">
</tr> 
</table>

Answer 1

If you want to sequence your two ajax calls so one finishes before the other is started, just do this;

$.ajax(...).then(function() {
    return $.ajax(...);
}).then(function(){
    // both are done here
});