Parallele Ajax-Aufrufe in Javascript/jQuery

Question

Ich bin komplett neu in Javascript/Jquery Welt und brauche etwas Hilfe. Im Moment schreibe ich eine HTML-Seite, auf der ich 5 verschiedene Ajax-Aufrufe machen muss, um die Daten zum Zeichnen von Graphen zu bekommen. Gerade jetzt, ich rufe diese 5 Ajax-Aufrufe wie folgt aus:

$(document).ready(function() { 
    area0Obj = $.parseJSON($.ajax({ 
     url : url0, 
     async : false, 
     dataType : 'json' 
    }).responseText); 

    area1Obj = $.parseJSON($.ajax({ 
     url : url1, 
     async : false, 
     dataType : 'json' 
    }).responseText); 
. 
. 
. 
    area4Obj = $.parseJSON($.ajax({ 
     url : url4, 
     async : false, 
     dataType : 'json' 
    }).responseText); 

    // some code for generating graphs 

)} // closing the document ready function 

Mein Problem ist, dass in obigen Szenario alle Ajax-Aufrufe seriell werden. Das heißt, nachdem 1 Anruf beendet ist, 2 Starts, wenn 2 3 Starts abgeschlossen hat usw. Jeder Ajax-Anruf dauert etwa 5 - 6 Sekunden, um die Daten zu erhalten, wodurch die gesamte Seite in etwa 30 Sekunden geladen wird .

Ich habe versucht, den Async-Typ als wahr zu machen, aber in diesem Fall bekomme ich die Daten nicht sofort, um den Graphen zu zeichnen, der meinen Zweck zunichte macht.

Meine Frage ist: Wie kann ich diese Anrufe parallel machen, so dass ich alle diese Daten parallel bekomme und meine Seite in weniger Zeit geladen werden könnte?

Vielen Dank im Voraus.

Answer 1

Mit jQuery.when (deferreds):

$.when($.ajax("/req1"), $.ajax("/req2"), $.ajax("/req3")).then(function(resp1, resp2, resp3){ 
    // plot graph using data from resp1, resp2 & resp3 
}); 

Callback-Funktion nur aufgerufen, wenn alle drei Ajax-Aufrufe abgeschlossen sind.

Answer 2

In jQuery.ajax sollten Sie wie unten eine Callback-Methode zur Verfügung stellen:

j.ajax({ 
     url : url0, 
     async : true, 
     dataType : 'json', 
     success:function(data){ 
      console.log(data); 
     } 
    } 

oder direkt

jQuery.getJSON(url0, function(data){ 
    console.log(data); 
}); 

reference

Answer 3

Sie können, dass async: false mit nicht tun können - Der Code wird synchron ausgeführt, wie Sie bereits wissen (dh ein Vorgang wird erst gestartet, wenn der vorherige abgeschlossen ist).
Sie wollen async: true setzen (oder einfach weglassen - standardmäßig ist es wahr). Definieren Sie dann für jeden AJAX-Aufruf eine Callback-Funktion. Fügen Sie in jedem Rückruf die empfangenen Daten zu einem Array hinzu. Überprüfen Sie dann, ob alle Daten geladen sind (arrayOfJsonObjects.length == 5). Wenn dies der Fall ist, rufen Sie eine Funktion auf, um mit den Daten zu tun, was Sie wollen.

Answer 4

Sie werden nicht wie Ihr Beispiel damit umgehen können. Die Einstellung "async" verwendet einen anderen Thread, um die Anforderung zu aktivieren und die Anwendung fortzusetzen.

In diesem Fall sollten Sie eine neue Funktion verwenden, die einen Bereich ausplottet, und dann die Callback-Funktionen der Ajax-Anfrage verwenden, um die Daten an diese Funktion zu übergeben.

Zum Beispiel:

$(document).ready(function() { 
    function plotArea(data, status, jqXHR) { 
     // access the graph object and apply the data. 
     var area_data = $.parseJSON(data); 
    } 

    $.ajax({ 
     url : url0, 
     async : false, 
     dataType : 'json', 
     success: poltArea 
    }); 

    $.ajax({ 
     url : url1, 
     async : false, 
     dataType : 'json', 
     success: poltArea 
    }); 

    $.ajax({ 
     url : url4, 
     async : false, 
     dataType : 'json', 
     success: poltArea 
    }); 

    // some code for generating graphs 

}); // closing the document ready function 

Answer 5

Es sieht aus wie Sie benötigen, um Ihre Anfrage asynchron versenden und eine Rückruffunktion definieren die Antwort zu erhalten.

So wie Sie es getan haben, wird gewartet, bis die Variable erfolgreich zugewiesen wurde (dh die Antwort ist gerade angekommen), bis die nächste Anfrage abgearbeitet wird. Benutze einfach so etwas.

$.ajax({ 
    url: url, 
    dataType: 'json', 
    data: data, 
    success: function(data) { 
    area0Obj = data; 
    } 
}); 

Dies sollte den Trick tun.

Answer 6

Lassen Sie uns versuchen, es auf diese Weise zu tun:

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     var area0Obj = {responseText:''}; 
     var area1Obj = {responseText:''}; 
     var area2Obj = {responseText:''}; 

     var url0 = 'http://someurl/url0/'; 
     var url1 = 'http://someurl/url1/'; 
     var url2 = 'http://someurl/url2/'; 

     var getData = function(someURL, place) { 
      $.ajax({ 
       type  : 'POST', 
       dataType : 'json', 
       url  : someURL, 
       success : function(data) { 
        place.responseText = data; 
        console.log(place); 
       } 
      }); 
     } 

     getData(url0, area0Obj); 
     getData(url1, area1Obj); 
     getData(url2, area2Obj); 

    }); 
</script> 

wenn Serverseite smth sein wird.dies wie: So gibt

public function url0() { 
    $answer = array(
     array('smth' => 1, 'ope' => 'one'), 
     array('smth' => 8, 'ope' => 'two'), 
     array('smth' => 5, 'ope' => 'three') 
    ); 
    die(json_encode($answer)); 
} 

public function url1() { 
    $answer = array('one','two','three'); 
    die(json_encode($answer)); 
} 

public function url2() { 
    $answer = 'one ,two, three'; 
    die(json_encode($answer)); 
} 

, wie Sie sehen können, erstellt eine Funktion getData() für Daten vom Server erhalten und als es genannt 3 mal. Die Ergebnisse werden auf asynchrone Weise empfangen, so dass zum Beispiel zuerst die Antwort für den dritten Anruf und die letzte für den ersten Anruf erhalten werden kann.

Console Antwort wird sein:

[{"smth":1,"ope":"one"},{"smth":8,"ope":"two"},{"smth":5,"ope":"three"}] 

["one","two","three"] 

"one ,two, three" 

PS. Bitte lesen Sie dies: http://api.jquery.com/jQuery.ajax/ Dort können Sie deutlich Informationen über Async sehen. Dort ist der Standardwert async param value = true.

Standardmäßig werden alle Anforderungen asynchron gesendet (d. H. Standardmäßig ist dies auf true gesetzt). Wenn Sie synchrone Anforderungen benötigen, setzen Sie diese Option auf false. Domänenübergreifende Anfragen und dataType: "jsonp" -Anfragen unterstützen keinen synchronen Vorgang. Beachten Sie, dass synchrone Anfragen den Browser temporär sperren können, indem alle Aktionen während der Anfrage deaktiviert werden ...

Answer 7

Sie können alle Funktionen der verschiedenen Ajax-Funktionen in 1 Ajax-Funktion kombinieren oder von 1 Ajax-Funktion die andere aufrufen Funktionen (sie würden in diesem Fall privat/Controller-Seite sein) und dann das Ergebnis zurückgeben. Ajax-Aufrufe stören ein wenig, daher ist es die beste Lösung, sie zu minimieren.

Sie können auch die Ajax-Funktionen asynchron ausführen (was sich dann wie normale Funktionen verhält), dann können Sie den Graphen am Ende rendern, nachdem alle Funktionen ihre Daten zurückgegeben haben.

Answer 8

Hier ist eine Lösung für Ihr Problem: http://jsfiddle.net/YZuD9/