Zwei Ajax-Anfragen für dasselbe Ereignis zur gleichen Zeit. Was sollte das typische Verhalten sein? Wie es anders ist, wenn die Anfrage synchron ist

Question

Im folgenden JavaScript-Code sende ich zwei Ajax-Anfrage zur gleichen Zeit.
Nach der Analyse mit Firebug kam ich zu der ungewöhnlichen Schlussfolgerung, dass:
"welche jemals (Ajax) Antwort zuerst kommt, druckt zuletzt".

Problem 2: Wenn ich das Ajax-URL-Ziel einer zufälligen Zeichenfolge (sagen wir "abcd") [die nicht existieren] zuweisen, wird die Gesamtanzahl der Ajax-Aufrufe auf 3 erhöht?

$(document).ready(function(e) { 

    $("form[ajax=true]").submit(function(e) { 

    e.preventDefault(); 

    var form_data = $(this).serialize(); 
    var form_url = $(this).attr("action"); 
    var form_method = $(this).attr("method").toUpperCase(); 

    $("#loadingimg").show(); 

    $.ajax({ 
     url: form_url, 
     type: form_method,  
     data: form_data,  
     cache: false, 
     success: function(returnhtml){       
     alert ("a"); 
     // $("#result").html(returnhtml); 
     // $("#loadingimg").hide();      
     }   
    }); 

    $.ajax({ 
     url: form_url, 
     type: form_method,  
     data: form_data,  
     cache: false, 
     success: function(returnhtml){       
     // $("#duplicate").html(returnhtml); 
     // $("#loadingimg").hide(); 
     alert("b"); 
     }   
    }); 
    }); 
}); 

Bitte beachten Sie die folgenden Fiddle.

Answer 1

Ich bin mir nicht sicher, ob ich das vollständig verstehe, aber ich werde versuchen, Ihnen einige Informationen zu geben. Wie David sagte Es mag scheinen, dass die erste Anfrage die letzte ist, die antwortet, aber das wird unter vielen Umständen variieren. Es gibt verschiedene Möglichkeiten, wie Sie das Ergebnis oder die Reihenfolge der Anforderungen steuern können.

1) Bei Erfolg der ersten Anfrage können Sie die zweite Anfrage einleiten. Ich empfehle das nicht für Geschwindigkeit Zwecke, da Ihre Anfragen nicht parallel laufen.

$.ajax({ // First Request 
    url: form_url, 
    type: form_method,  
    data: form_data,  
    cache: false, 
    success: function(returnhtml){  
     $.ajax({ //Seconds Request 
      url: form_url, 
      type: form_method,  
      data: form_data,  
      cache: false, 
      success: function(returnhtml){       
       // $("#duplicate").html(returnhtml); 
       // $("#loadingimg").hide(); 
       alert("b"); 
      }   
     }); 
     alert ("a"); 
     // $("#result").html(returnhtml); 
     // $("#loadingimg").hide();      
     }   
    }); 

2) Wenn Sie beiden Anfragen Antworten zur gleichen Zeit haben müssen, würde die bevorzugte Methode wahrscheinlich jQuery verschoben werden. Dadurch werden beide Anfragen parallel ausgeführt, und sobald beide Antworten empfangen wurden, können Sie fortfahren, wie Sie möchten.

etwas Ähnliches:

var result1; 
var result2; 
$.when(
    $.ajax({ // First Request 
     url: form_url, 
     type: form_method,  
     data: form_data,  
     cache: false, 
     success: function(returnhtml){  
       result1 = returnhtml;     
     }   
    }); 

    $.ajax({ //Seconds Request 
     url: form_url, 
     type: form_method,  
     data: form_data,  
     cache: false, 
     success: function(returnhtml){       
      result2 = returnhtml;  
     }   
    }); 

).then(function() { 
    $('#result1').html(result1); 
    $('#result2').html(result2); 
}); 

Check out:

https://api.jquery.com/jQuery.when/

http://api.jquery.com/deferred.then/

https://api.jquery.com/deferred.done/

Ich hoffe, das hilft!

Answer 2

var result1; 
var result2; 
$.when(
    $.ajax({ // First Request 
     url: form_url, 
     type: form_method,  
     data: form_data,  
     cache: false, 
     success: function(returnhtml){  
       result1 = returnhtml;     
     }   
    }); 

    $.ajax({ //Seconds Request 
     url: form_url, 
     type: form_method,  
     data: form_data,  
     cache: false, 
     success: function(returnhtml){       
      result2 = returnhtml;  
     }   
    }); 

).then(function() { 
    $('#result1').html(result1); 
    $('#result2').html(result2); 
}); 

Answer 3

Gaurav, haben Sie einen Fehler, am Ende des ersten $ Schnipsel als ), und 2. als ) enden.

können Sie nicht mit ;

var result1; 
 
var result2; 
 
$.when(
 
    $.ajax({ // First Request 
 
     url: form_url, 
 
     type: form_method,  
 
     data: form_data,  
 
     cache: false, 
 
     success: function(returnhtml){  
 
       result1 = returnhtml;     
 
     }   
 
    }), 
 

 
    $.ajax({ //Seconds Request 
 
     url: form_url, 
 
     type: form_method,  
 
     data: form_data,  
 
     cache: false, 
 
     success: function(returnhtml){       
 
      result2 = returnhtml;  
 
     }   
 
    }) 
 

 
).then(function() { 
 
    $('#result1').html(result1); 
 
    $('#result2').html(result2); 
 
});

Answer 4

Oder server_response in Ihrem Code verwenden beenden. Das Skript beginnt mit der Bedingung:

if (recherche1.length>1) { 
    $.ajax({ // First Request 
     type :"GET", 
     url : "result.php", 
     data: data,  
     cache: false, 
     success: function(server_response){  
      $('.price1').html(server_response).show();     
     }   
    }), 

    $.ajax({ //Seconds Request 
     type :"GET", 
     url : "result2.php", 
     data: data,  
     cache: false, 
     success: function(server_response){       
      $('.price2').html(server_response).show();  
     }   
    }); 
}