Llamadas paralelas de Ajax en Javascript/jQuery

Question

Soy completamente nuevo en Javascript/jquery world y necesito ayuda. En este momento, estoy escribiendo una página html donde tengo que hacer 5 llamadas Ajax diferentes para obtener los datos para trazar gráficos. En este momento, yo estoy llamando a estos 5 llamadas ajax como este:

$(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 

Mi problema es que en el escenario anterior, todas las llamadas ajax van en serie. Es decir, después de que se completa 1 llamada, se inician 2, cuando se completan 3, 3 y así sucesivamente. Cada llamada Ajax demora alrededor de 5 a 6 segundos para obtener los datos, lo que hace que la página se cargue en 30 segundos. .

Intenté hacer que el tipo asíncrono fuera cierto, pero en ese caso no obtuve la información inmediatamente para trazar el gráfico que frustra mi propósito.

Mi pregunta es: ¿Cómo puedo hacer que estas llamadas sean paralelas, para que comience a obtener todos estos datos en paralelo y que mi página pueda cargarse en menos tiempo?

Gracias de antemano.

Answer 1

Usando jQuery.when (deferreds):

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

función de devolución de llamada solamente cuando se hayan completado todas las llamadas 3 ajax.

Answer 2

En jQuery.ajax que debería proporcionar un método de devolución de llamada de la siguiente manera:

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

o se puede usar directamente

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

reference

Answer 3

No se puede hacer que el uso de async: false - el código se ejecuta de forma síncrona, como ya sabe (es decir, una operación no se iniciará hasta que la anterior haya finalizado).
Desea establecer async: true (o simplemente omitirlo - de manera predeterminada es cierto). Luego defina una función de devolución de llamada para cada llamada AJAX. Dentro de cada devolución de llamada, agregue los datos recibidos a una matriz. Luego, verifique si se han cargado todos los datos (arrayOfJsonObjects.length == 5). Si tiene, llame a una función para hacer lo que quiera con los datos.

Answer 4

No podrá manejarlo como su ejemplo. La configuración de asincronización utiliza otro subproceso para activar la solicitud y permite que la aplicación continúe.

En este caso, debe utilizar una nueva función que trazará un área, luego use las funciones de devolución de llamada de la solicitud ajax para pasar los datos a esa función.

Por ejemplo:

$(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

Parece que usted necesita para enviar su solicitud de forma asíncrona y definir una función de devolución de llamada para obtener la respuesta.

De la manera que lo hizo, esperará hasta que la variable se haya asignado correctamente (es decir: la respuesta acaba de llegar) hasta que proceda a enviar la próxima solicitud. Solo usa algo como esto.

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

Esto debería hacer el truco.

Answer 6

Vamos a tratar de hacerlo de esta manera:

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

si del lado del servidor será algo bajo.de esta manera:

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)); 
} 

Así que, como se puede ver, crea una función getData() para obtener datos de servidor y de lo que se llama 3 veces. Los resultados se recibirán de manera asíncrona, por lo que, por ejemplo, primero se puede obtener una respuesta para la tercera llamada y la última para la primera llamada.

respuesta consola será:

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

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

"one ,two, three" 

PS. por favor lea esto: http://api.jquery.com/jQuery.ajax/ allí puede ver claramente información acerca de async. Hay valor de param asíncrono predeterminado = verdadero.

De manera predeterminada, todas las solicitudes se envían de forma asíncrona (es decir, se establece en verdadero de manera predeterminada). Si necesita solicitudes sincrónicas, establezca esta opción en falso. Solicitudes entre dominios y tipo de datos: las solicitudes "jsonp" no son compatibles con la operación síncrona. Tenga en cuenta que las solicitudes sincrónicas pueden bloquear temporalmente el navegador, deshabilitando cualquier acción mientras la solicitud está activa ...

Answer 7

puede combinar todas las funciones de las diferentes funciones ajax en 1 función ajax, o desde 1 función ajax, llamar a la otra funciones (serían en este caso lado privado/controlador) y luego devuelve el resultado. Las llamadas de Ajax se detienen un poco, por lo que minimizarlas es el camino a seguir.

También puede hacer que las funciones ajax sean asíncronas (que luego se comportarían como funciones normales), luego puede renderizar el gráfico al final, después de que todas las funciones devuelvan sus datos.

Answer 8

he aquí una solución a su problema: http://jsfiddle.net/YZuD9/