AJAX - Ejecución simultánea de funciones AJAX

Ejecución simultánea de funciones AJAX

Publicado por codec (1 intervención) el 17/09/2006 21:29:15

Pues es que si hago dos llamadas (una seguida de la otra) a dos funciones que utilizan el objeto AJAX creado con el método "new XMLHttpRequest();" , el resultado que obtengo siempre es únicamente el de la segunda función que ejecuto.

Parece que al hacer la llamada la segunda función se anula la petición que había hecho la primera.

He visto por ahí algunas páginas que cargan paralelamente los resultados de distintas funciones AJAX simultáneas.

La única solución que he conseguido es llamar a la segunda funcion dentro de la primera cuando esta termina, pero no me sirve para algunos casos.

Otra forma sería hacer alguna funcion que fuera capaz de cargar la segunda función cuando termina la primera, pero no sé como hacerlo. Aunque de esta forma la carga se haría de forma secuencial, no paralela que es lo que me interesaría. No creo hay ningún problema de que el servidor se sobrecargue, porque los datos son muy livianos.

Bueno nada mas, espero haberme expresado con claridad. Cualquier respuesta será bien recibida. Gracias de antemano.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Manejo de llamadas asincrónicas paralelas y superposición de resultados

Publicado por Alejandro (17 intervenciones) el 27/02/2024 17:06:12

Codec, el comportamiento que estás describiendo sugiere que estás experimentando un problema común con las solicitudes AJAX en JavaScript: el problema de las llamadas asincrónicas que se superponen. Cuando se realizan varias solicitudes AJAX en rápido sucesión, la segunda puede cancelar o sobrescribir la primera si aún no ha completado.

Para manejar este escenario y realizar múltiples solicitudes AJAX de forma paralela, puedes utilizar Promesas y Promise.all(). Aquí tienes un ejemplo de cómo podrías estructurar tus funciones:

// Función para hacer la solicitud AJAX

function hacerSolicitud(url) {

    return new Promise(function (resolve, reject) {

        var xhr = new XMLHttpRequest();

        xhr.open('GET', url, true);

        xhr.onload = function () {

            if (xhr.status >= 200 && xhr.status < 300) {

                resolve(xhr.responseText);

            } else {

                reject(xhr.statusText);

};

        xhr.onerror = function () {

            reject(xhr.statusText);

};

        xhr.send();

});

// Llamadas simultáneas a dos URLs diferentes

var url1 = 'url_para_la_primera_funcion';

var url2 = 'url_para_la_segunda_funcion';

Promise.all([hacerSolicitud(url1), hacerSolicitud(url2)])

    .then(function (resultados) {

        // Manejar los resultados de ambas llamadas aquí

        var resultadoFuncion1 = resultados[0];

        var resultadoFuncion2 = resultados[1];

        console.log('Resultado de la primera función:', resultadoFuncion1);

        console.log('Resultado de la segunda función:', resultadoFuncion2);

})

    .catch(function (error) {

        // Manejar errores si es necesario

        console.error('Error en una o ambas llamadas:', error);

});

En este ejemplo, `hacerSolicitud` devuelve una Promesa que se resuelve con el resultado de la solicitud AJAX. Luego, Promise.all() se utiliza para esperar a que ambas promesas se resuelvan antes de ejecutar la función `.then()`, donde puedes manejar los resultados de ambas llamadas.

Este enfoque te permite realizar llamadas AJAX de forma paralela y manejar los resultados una vez que todas las solicitudes se han completado.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar