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.

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.

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

Descargar PDF