Eventos en una solicitud ajax con $.get() en jQuery

La verdad es que la función resulta bastante sencilla para hacer distintos tipos de solicitudes Ajax, a las que les podemos pasar además un conjunto de datos por medio del protocolo GET. Sin abandonar la sencillez de los ejemplos vistos anteriormente, vamos a incorporar ahora algunos usos adicionales, en los que trabajaremos con los eventos Ajax, directamente con la función $.get().

De entre todos los eventos Ajax disponibles en jQuery, existen tres eventos que podemos administrar en las conexiones realizadas por la función $.get():

1. Error: Evento que se produce cuando la solicitud produce un error, típicamente por intentar acceder a una URL inexistente o porque el servidor no responda en el tiempo esperado.
2. Success: Evento que se produce cuando la solicitud ajax ha tenido éxito
3. Complete: Evento que se lanza cuando la solucitud se ha completado, independientemente de si ha sido con éxito o con fallo. El orden en el que se producen los eventos hace que "complete" se ejecute por último. Es decir, primero se producirá un "error" o "success" (dependiendo de si la solicitud Ajax pudo o no obtener una respuesta positiva) y luego se producirá "complete" independientemente del resultado.
   Nota: Estos tres eventos son propios de la infraestructura que nos ofrece jQuery para trabajar con Ajax. Están presentes específicamente en la función jQuery.ajax(). No obstante, en versiones más actuales del framework (a partir de jQuery 1.5.1), están disponibles también en otras funciones como jQuery.get().

   En la función jQuery.get() tenemos que seguir el siguiente esquema de trabajo para operar con los eventos Ajax:

   Primero guardamos una referencia al objeto que nos devuelve la función $.get(), en una variable Javascript.

   var objajax = $.get("mipagina.html");

   El objeto que devuelve la función jQuery.get() es de la clase jqXHR (abreviación de jQuery XHR object) e implementa métodos que tienen que ver con Ajax.

   Luego podemos definir los eventos deseados por medio de métodos invocados sobre el objeto jqXHR, con el nombre del evento que queremos definir, en los que pasamos por parámetro la función a ejecutar como respuesta al evento.

   objajax.error(function(){
      //código a ejecutar por el evento
   })

   Definición de un evento error de la solicitud Ajax

   Ahora veamos un primer ejemplo de implementación de un evento "error", que nos permitiría hacer cosas cuando la solicitud Ajax no se ha podido completar con éxito.

   var objajax = $.get("kk/url-que-no-existe.html");
   objajax.error(function(){
      alert("Hubo un error");
   })

   Como la URL que invocamos desde $.get() no existe, se producirá un evento error, que definimos con el método error(), pasándole la función que queremos ejecutar. Simplemente mostraremos un mensaje de error por medio de una caja alert.

   Ese ejemplo está disponible para su ejecución en una página aparte.

   Definición del evento success y complete de las solicitudes Ajax

   En este segundo ejemplo hacemos los dos eventos que nos faltaban por ver, que son success y complete. Además, vamos a demostrar cuál es el orden de ejecución de los mismos, por medio de mensajes en cajas de alert.

   Existen tres pasos distintos que produce la solicitud y código fuente que podemos colocar en distintas partes del script que se ejecutará en un orden predefinido.

   1. Primero se ejecuta la función que se escribe en jQuery.get() para definir acciones con la respuesta de la solicitud.
   2. Seguidamente se ejecuta la función que se asigne al evento success.
   3. Por último se ejecuta la función asignada al evento complete.
   Nota: recordar además que el evento complete se ejecutaría tanto si la solicitud ajax tiene éxito como fracaso, mientras que success solo se ejecuta cuando la solicitud se realizó con éxito.

   var objajax = $.get("contenido-ajax.html", function(respuesta){
      alert("paso 1");
   });
   objajax.success(function(){
      alert("paso 2");
   });
   objajax.complete(function(){
      alert("paso 3");
   });

   Si ejecutamos ese código (recordar de hacerlo con jQuery 1.5 o superior) se podrá ver que se lanzan tres cajas de diálogo producidas por los tres "pasos" de la solicitud Ajax. Eso siempre y cuando la llamada a la página contenido-ajax.html se ejecute con éxito, porque si hubiera un fallo en tal conexión sólo veríamos la caja de alert del "paso 3", que es la del evento complete.

   Puedes ver una página con el ejemplo en marcha.

   En el siguiente artículo continuaremos viendo algunos detalles importantes de los eventos en las solicitudes Ajax y es que, además en ellos podemos recibir varios parámetros con los que operar para realizar acciones determinadas.