Uno de los objetivos principales que los desarrolladores tenemos cuando decidimos usar jQuery es implementar comportamientos AJAX para crear aplicaciones web más parecidas a las aplicaciones de escritorio, lo que se llama habitualmente como RIA o la experiencia de usuario enriquecida.

En jQuery existen diversas funciones para producir AJAX, con diversas aproximaciones que nos ofrecen soluciones diferentes y que serán acordes a distintos tipos de necesidades. En este artículo quiero ofrecer una guía básica que nos sirva de introducción a AJAX en el Manual de jQuery y que nos ayude a saber cuáles son los métodos disponibles y en qué casos nos pueden servir.

AJAX jQuery de alto nivel y bajo nivel

En jQuery existen métodos AJAX con diversos niveles de complejidad. En la propia documentación de AJAX, los creadores los clasifican en métodos de "alto nivel" y "bajo nivel", haciendo un símil con lo que son los lenguajes de programación de alto y bajo nivel.

Al decir "funciones de bajo nivel" no significa que sean poco poderosas o poco útiles, sino que debemos entenderlo justamente al contrario. Son más cercanas a lo que sería el AJAX del navegador, más personalizables y más potentes. Las de alto nivel tienen una interfaz y uso muchísimo más simple, pero son menos potentes porque están preparadas para un uso en concreto.

La verdad es que casi todas las funciones de jQuery son de alto nivel, menos jQuery.AJAX() que es de bajo nivel, junto con otros métodos que normalmente no vamos a usar. Es bueno conocer bien jQuery.AJAX() porque es un método con el que podemos realizar cualquier tipo de comportamiento AJAX. También la encontraremos documentada o usada como $.AJAX() y yo la llamo "AJAX todopoderoso" porque con ella podremos realizar cualquier tipo de uso que podamos necesitar.

Ahora bien, lo cierto es que si sabemos escoger las funciones de alto nivel y configurarlas bien, raramente vamos a necesitar usar la función de bajo nivel $.AJAX(). Aunque también podríamos darle la vuelta a la tortilla y decir lo contrario, si sabemos usar $.AJAX() nunca necesitaríamos usar las funciones de alto nivel. Aunque esto es verdad, a veces conviene usar los comportamientos de alto nivel porque generan menos código y nuestros scripts serán menos pesados y también más entendibles.

Las funciones de alto nivel tienen especializaciones para realizar diversos tipos de conexiones AJAX y a su vez también tienen distintos niveles de complejidad. Por ejemplo, la función .load() simplemente carga un texto en un elemento del HTML, es solo para ese uso, no podemos enviar datos al servidor por POST y no admite que el servidor te dé la respuesta en JSON, pero es extremadamente potente, porque con una única llamada al método resuelvo todo lo que se necesita de una única vez. Sin embargo, hay otras funciones que todavía siendo sencillas tienen más posibilidades, como jQuery.post() que nos permite configurar una llamada AJAX que envíe datos al servidor por el método "post".

Métodos AJAX jQuery, uno a uno

.load()

Este método nos sirve para cargar datos en un elemento de la página. Simplemente le indicamos la URL del archivo que queremos traernos por AJAX. El propio método actualiza el HTML del elemento sobre el que estamos invocando .load(). No acepta más parámetros y no realiza más acciones de las mencionadas.

$("#elemento").load("pagina.html");

Si queremos enviar datos por GET a una página, podríamos usar .load() indicando esos datos "a mano" en la URL del archivo que estamos accediendo, pero existen métodos más indicados para hacer ésto.

$("#elemento").load("pagina.php?dato=222");

El método load() se encarga de todo, hacer la solicitud al servidor y enviar el HTML de la respuesta al contenedor sobre el que hemos invocado .load(). Si te interesa saber más puedes consultar el artículo titulado AJAX muy sencillo con jQuery.

$.get() y $.post()

Dos métodos hermanos que hacen prácticamente lo mismo: una conexión AJAX enviando datos al servidor. La única diferencia es que $.get() envía los datos por GET (en la URL) y $.post() los envía por POST (en las cabeceras del HTTP).

A estos métodos les enviamos un juego de parámetros un poco más complejo, aunque solamente es obligatorio el primero de ellos.

$.get("url.php", {
    dato: "valor",
    dato2: "valor2"
}, function(respuesta){
    $( "#resultado" ).html( data );
}, "html");

Esto llamaría a la URL "url.php" pasando por método GET los datos y valores indicados en el segundo parámetro. Cuando se reciba la respuesta se ejecutará la función indicada en el tercer parámetro y el dato que se espera recibir del servidor como respuesta tiene el formato indicado en el cuarto parámetro, existiendo varios formatos de respuesta, como JSON, script, HTML o XML.

Puedes encontrar más información sobre $.get() en este artículo. Como decía, $.post() es exactamente igual, pero los datos los enviará jQuery con el método POST, por lo demás, todo lo que aprendemos sobre $.get() lo podemos aplicar a $.post().

Como utilidad adicional, estos métodos que estamos viendo ahora devuelven un "objeto AJAX" que podemos usar para realizar nuevas acciones que configuren nuestra solicitud. Por ejemplo, podremos definir cosas como qué hacer cuando la solicitud se ejecute si se produce un error, etc.

var objetoAJAX = $.get( "loquesea.php", function() {
  //hacer algo cuando hay respuesta del AJAX
});
objetoAJAX.done(function() {
    //hacer otra cosa cuando hay respuesta correcta de la solicitud
})
objetoAJAX.fail(function() {
    //hacer algo cuando se produce un error
})
objetoAJAX.always(function() {
    //hacer algo tanto en error como en éxito
});

Las funciones a ejecutar con este objeto AJAX se encuentran descritas con mayor detalle en el artículo Eventos en una solicitud AJAX con $.get() en jQuery

$.getScript()

Se trata de otro método "shorthand", interesante por ser un atajo para cargar un script Javascript y ponerlo en ejecución cuando se haya recibido correctamente. Podemos configurar un envío de datos y este método lo hará por GET, igual que se enviaban en $.get(). Podemos decir, en resumen, que se usa igual que $.get(), pero la resuesta del servidor estás diciéndole que se recibirá en un script Javascript que se debe ejecutar según se tenga.

$.getJSON()

Es otro "shorthand method" bastante utilizado que recibe una respuesta en JSON. Es exactamente igual que lo comentado con "getScript()", solo que en la respuesta recibiremos un objeto Javascript. El contenido del objeto nos lo debe enviar el servidor como respuesta, siempre en un JSON que jQuery de manera interna se encargará de interpretar y convertir en un objeto nativo de Javascript, al que podremos acceder para recuperar cualquiera de sus datos.

Eventos globales de AJAX

Hay otra clasificación de métodos en la documentación de jQuery que se llama "Global AJAX Event Handlers", que son eventos globales que podemos asignar a cualquier solicitud AJAX que se produzca en una página.

La utilidad que tienen es que se definen una única vez y afectan a todas las llamadas AJAX que podamos realizar en esa página, de modo que podemos ahorrarnos la parte de configuración de diversos comportamientos típicos, como los mensajes de "cargando...", en cada una de las funciones AJAX. Es decir, los defines una vez y ya valen para todas las llamadas AJAX.

Existen eventos para cuando se produce una solicitud, como para cuando se produce un error, éxito en la respuesta, etc. Estos eventos los añades al objeto jQuery del documento extendido.

$( document ).AJAXError(function() {
  alert("error en una solicitud AJAX (no me preguntes en cuál)");
});

AJAX todopoderoso $.AJAX()

Todo lo que hemos visto que se puede hacer con las funciones de más alto nivel lo podemos implementar con la función $.AJAX(). La potencia de ese método es impresionante y permite realizar diversas configuraciones específicas que no podríamos hacer por los métodos shorthand, como por ejemplo configurar un mecanismo para que una solicitud AJAX no pase nunca por la caché del navegador, utilizar crossDoman en una solicitud como JSONP, controlar diversas respuestas del servidor específicas como errores 404, definir un tiempo máximo de espera para una solicitud AJAX, indicar un nombre de usuario y contraseña si estamos conectando con un servidor que requiera autenticación HTTP, etc.

El estudio de este método es interesante y no nos costará mucho cuando ya conozcamos bastante los métodos de atajos.

Funciones como ayudas adicionales

En la categoría de "Helper Functions" de AJAX en jQuery encontraremos varias funciones para hacer serialización de formularios, arrays, objetos, etc. Es común que los datos que queramos enviar al servidor estén en estructuras como objetos o arrays, incluso puede que estén simplemente escritos en campos de formulario. Para facilitarnos el trabajo en estas situaciones habituales existen métodos que nos permiten, en una simple llamada, obtener una cadena que realice una serializacion de estos objetos arrays o formularios, que podemos enviar de una manera inmediata en una solicitud HTTP.

El ejemplo más típico es la serialización de un formulario.

$( "#miformulario ).serialize();

La respuesta a este método serialize() la puedes usar directamente como datos que envias al servidor al hacer una llamada AJAX.

$.post(url, $( "#miformulario ).serialize(), FuncionExito);

Conclusión

Lo que has podido leer en este artículo te ofrecerá una visión global de todo lo que hay para el trabajo con AJAX en jQuery. Es bueno tener una idea previa sobre lo que te vas a encontrar para a partir de aquí saber qué funciones podrán ser las que te interesen para resolver tus problemas.

Podrás encontrar más información sobre AJAX en jQuery en los siguientes artículos de este Manual de jQuery. No dejes de practicar y documentarte también desde la documentación oficial de la librería, en donde encontrarás siempre contenido actualizado y nuevos ejemplos con los que entender las utilidades que se nos ofrece.