JQuery Ajax y Eventos Globales

Ajax es una tecnología con la que trabajamos en el día a día pero que siempre tiene cosas que quedan por aprender. En este caso vamos a hablar de JQuery y como maneja los eventos de Ajax a nivel global. Para ello vamos a poner en ejemplo sencillo en el que usamos JQuery para hacer dos peticiones Ajax.


<html>
<body>
<script type="text/javascript" src="jquery-2.1.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {

$.get("/hola",function(datos) {

alert(datos);
alert("peticion finalizada");

});
$.get("/hola2",function(datos) {

alert(datos);
alert("peticion finalizada");
});

});

</script>
</body>
</html>

Como podemos se trata de un programa que realiza dos peticiones Ajax y se trae unos datos usando $.get() . Después de realizar esta operación nos saca a traves de un alert los datos y un mensaje de petición finalizada.

 

jqueryAjax

En muchas ocasiones nos encontramos con que cada vez que una petición Ajax finaliza debemos ejecutar el mismo código. Es decir imprimir algún tipo de mensaje de operación realizada correctamente o cambiar una zona de color etc .En estos momentos cada petición Ajax es independiente y gestiona su propio mensaje. Sin embargo podemos modificar la estructura del programa para que todos los mensajes Ajax tengan un mismo tratamiento final.

jqueryAjaxGlobal

JQuery Ajax y Eventos Globales

Para ello vamos a hacer uso de los eventos globales que soporta JQuery a la hora de gestionar peticiones Ajax y que nos permiten agrupar el código de una forma más sólida.


<html>
<body>
<script type="text/javascript" src="jquery-2.1.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {

$(document).bind("ajaxComplete",function() {

alert("la petición termino");
});

$.get("/hola",function(datos) {

alert(datos);

});
$.get("/hola2",function(datos) {

alert(datos);

});
});

</script>

hola
</body>
</html>

&nbsp;

 

Como podemos ver hemos utilizado el evento “ajaxComplete” a nivel de JQuery para sacar el mismo mensaje cuando todas las peticiones Ajax finalizan igual que existe este evento de finalización existen otros eventos similares que nos apoyan a nivel de JQuery al realizar este tipo de petición.

Otros artículos relacionados : JQuery Context, JQuery WrappedSet

About Cecilio Álvarez Caules

Cecilio Álvarez Caules Sun Certified Enterprise Architech (J2EE/JEE).

Trackbacks/Pingbacks

  1. jQuery find vs filter - Arquitectura Java - 8 octubre, 2014

    […] Otros artículos relacionados : JQuery WrapperSet , JQuery Contexto ,Ajax y Eventos Globales […]

  2. CORS Java y aplicaciones móviles - Arquitectura Java - 30 enero, 2015

    […] artículos relacionados : Ajax eventos globales , jQuery $.get, […]

  3. ¿Que es CORS ? - Arquitectura Java - 30 enero, 2015

    […] artículos relacionados : Ajax eventos globales , jQuery $.get, […]

  4. LocalStorage HTML5 y LoDash - Arquitectura Java - 6 febrero, 2015

    […] artículos relacionados: Utilizando Underscore.js , Ajax métodos globales ,JQuery find vs […]

  5. jQuery $.ajax ,$.get, $.post - Arquitectura Java - 28 junio, 2015

    […] artículos relacionados: Servicios REST , JQuery eventos Globales ,JQuery […]

  6. JavaScript Console y otros métodos - Arquitectura Java - 9 enero, 2017

    […] artículos relacionados:  jQuery y envolturas ,jQuery Eventos Globales ,Usando […]

Deja un comentario