Ajax

> Temas > Ajax
Editar

Programación Ajax (Asynchronous JavaScript and XML) artículos y manuales para la programación de aplicaciones web con Ajax.

Ajax es una tecnología que permite hacer consultas por HTTP de manera asíncrona contra el servidor. Bajo esta definición, que puede no ser demasiado clara para algunas personas con poca experiencia en el entorno web, encontramos una de las herramientas más comunes en sitios, que han permitido evolucionar las aplicaciones web para que sean tan complejas como las conocemos hoy.

En palabras llanas, Ajax permite acceder a datos existentes en el servidor sin necesidad de recargar la página completamente. Estas consultas contra el servidor se realizan por medio de Javascript y los datos se procesan mediante éste mismo lenguaje, permitiendo actualizar el contenido de la página justamente donde sea preciso.

Aplicaciones web como Gmail, Facebook, Twitter, o sin ir más lejos DesarrolloWeb.com, hacen uso de Ajax para mejorar la experiencia de usuario, ya que muchas de las consultas que se realizan al servidor no requieren recargar toda la página y muestran la información recibida del servidor de una manera rápida y precisa. En el ejemplo de Gmail u otros programas de webmail como podría ser Outlook, permiten al usuario realizar uso de la aplicación de email de una manera rápida, pudiendo componer mensajes y enviarlos o actualizar la lista de mensajes sin que se tenga que recargar toda la web, dando la impresión que una aplicación web funciona de manera similar a como lo haría una aplicación de escritorio.

Ajax, en resumen, ha facilitado la creación de aplicaciones web modernas, en las que la acción se desarrolla muchas veces en la misma página, obteniendo datos del servidor y mostrándolos al usuario sin tener que recargarse la página completamente con cada consulta que se hace al servidor. Para ello se usa mucho Javascript y se manipula la página desde el propio código frontend, de manera muy amistosa para el usuario.

Más información:

Qué es asíncrono

Una de las palabras que definen Ajax es "asíncrono". De hecho, es una de sus siglas. Este es un concepto interesante que tiene que ver no solo con Ajax, sino con el lenguaje Javascript en general.

Asíncrono en términos generales quiere decir que no tiene una relación temporal con otro proceso, o con la causa que lo produce. La definición linguística del término no acaba de aclarar el concepto en sí, así que vamos a tratar de explicarlo en términos informáticos y del lenguaje Javascript.

Asíncrono es todo proceso que tarda un tiempo en realizarse y que, durante ese tiempo, el motor de Javascript puede estar desocupado o realizando otras tareas. Cuando el proceso termina, entonces el motor de Javascript recibe una señal de recuperación y posiblemente un dato como respuesta, pudiendo seguir con la ejecución de código, así como realizar el tratamiento que corresponda sobre el dato recibido como respuesta.

El hecho de que Ajax sea asíncrono indica que el flujo de ejecución de solicitudes al servidor sigue ese patrón comentado. Cuando se hace la solicitud, el navegador se queda esperando una respuesta del servidor por un tiempo indeterminado. Sin embargo, durante ese tiempo de espera, el motor de Javascript permanece ocioso, o simplemente realizando otras tareas. Ese es el motivo por el que el navegador no se queda bloqueado esperando la solicitud del servidor, sino que el usuario puede continuar trabajando con la página. Una vez el servidor responde y nos llega la señal de retorno, se recibe el dato que el servidor pueda habernos hecho llegar. Ese dato puede ser tratado mediante código Javascript, para mostrarlo en el lugar donde se desee de la página, para mostrar un mensaje de éxito, error, etc.

En resumen, asíncrono en Ajax indica que la solicitud es no bloqueante y por tanto, mientras espera el navegador podrá atender otras instrucciones de Javascript, así como la interacción con los elementos de la página. Cuando recibe la respuesta, en el momento que sea, el navegador podrá retomar la ejecución de un código, que generalmente realizará acciones sobre la página que tengan que ver con el resultado recibido de la solicitud al servidor.

Editar

Evolución de Ajax y los modos más prácticos de realizar Ajax

Al principio cada navegador implementaba Ajax de una manera particular, lo que hacía especialmente difícil el uso de esta tecnología, ya que había que escribir código duplicado, o triplicado, para realizar las solicitudes al estilo que requería cada cliente web.

Por ello es muy popular el uso de librerías para realizar Ajax. Una de las librerías más destacadas para Ajax, que hoy en día sigue usandose, es jQuery. jQuery dispone de varios métodos para realizar trabajo con Ajax, que nos aseguran que el código se ejecutará perfectamente en todos los navegadores.

Luego llegó la interfaz estándar de acceso a Ajax fetch, que es propia de los navegadores y trabaja con promesas. Fetch es un API estándar, por lo que no hace falta ninguna librería, ya que forma parte del Javascript que entienen los navegadores. Como trabaja con promesas es fácil realizar un código mantenible. El API de fetch funciona en cualquier navegador, a excepción de Internet Explorer y Opera Mini, por lo que hay que usar algún polyfill si queremos extender su funcionalidad a cualquier posible visitante.

Sin embargo, aunque fetch nos asegura un código bastante limpio y una interfaz estándar para las conexiones con Ajax, que nos ahorra la necesidad de usar librerías adicionales, sigue siendo bastante popular apoyarse en alguna biblioteca de funciones, ya que nos aportan funcionalidades adicionales para trabajo con Ajax y la consulta a servicios web, evitando tener que escribir mucho código. Una librería muy usada es Axios, que nos asegura compatibilidad con todo tipo de navegadores y facilita mucho las consultas a APIs REST. Por supuesto, los principales frameworks también disponen de funcionalidad de alto nivel para acceso a Ajax incorporada.

Editar

Ajax y la web 2.0

La llamada Web 2.0, que no tiene que ver con un estándar o una versión de la web en sí o su protocolo de comunicaciones (HTTP), es simplemente una nueva manera de concebir los sitios web. En este nuevo enfoque de la web los usuarios de los sitios web son los que generalmente crean el contenido de las páginas. Ejemplos típicos lo tenemos en Wikipedia o en cualquiera de las redes sociales.

Pero además también incluye una nueva experiencia de usuario, más dinámica, más parecida al funcionamiento de las aplicaciones tradicionales. Ahí es donde Ajax jugó un papel fundamental. Gracias a que Ajax permite hacer consultas contra el servidor, para obtener contenido e interaccionar con el servidor sin necesidad de recargar la página, se pudo crear una nueva experiencia de uso, más atractiva y rápida. Los usuarios de pronto podían enviar comentarios, darle al botón "me gusta", valorar una web y cosas similares, sin necesidad que se recargase todo el contenido de la página.

Esta experiencia no era posible antes de Ajax y permitió que aplicaciones como Gmail o las propias redes sociales ofrecieran a los usuarios un modo rápido de usar los servicios, con lo que la web se volvió también un lugar adecuado para el nacimiento de todo tipo de aplicaciones modernas.

Editar

Ajax vs Web Sockets

Ajax tiene una limitación importante. El flujo de solicitud de los datos al servidor debe de iniciarse en el cliente. Por tanto, el usuario (o el Javascript de la página) debe ser el que produzca esa comunicación con el servidor.

Esta limitante es importante sobre todo en aplicaciones en tiempo real, como los chats, donde Ajax a solas no es la mejor de las opciones. Para ello es importante conocer Web Sockets, que es otra tecnología de los navegadores que tiene la diferencia que las comunicaciones pueden comenzar en el servidor. Es decir, el servidor en el momento que lo necesite puede enviar datos al cliente, sin que éste lo haya solicitad.

Editar

Interfaz XMLHttpRequest para Ajax

La primera de las interfaces de programación para realizar conexiones con Ajax es XMLHttpRequest. Se trata de la primera clase (de Programación Orientada a Objetos) disponible para hacer Ajax, creada desde el inicio de esta tecnología del navegador. Esta interfaz hoy es bastante estándar, disponible desde Internet Explorer 6 y las primeras versiones de los otros navegadores. Aunque al principio tenía diferencias significativas dependiendo del navegador.

El modo de hacer Ajax consiste en crear un objeto de la clase XMLHttpRequest y luego indicar qué URL se desea abrir con el método open(), para posteriormente realizar la solicitud con el método send().

Esta solicitud es asíncrona, por lo que tendremos que expresar una función callback para realizar cualquier comportamiento cuando se reciba la respuesta. Para ello se define la función, asignando a un evento "onload" (disponible desde IE 10, antes había que usar "onreadystatechange").

El código de un ejemplo básico de Ajax con XMLHttpRequest sería el siguiente:

var xhr = new XMLHttpRequest();
xhr.open("GET", 'dato.json');
xhr.send();

xhr.onload = function(e) {
  console.log(xhr.responseText)
}

En este ejemplo estamos accediendo a un archivo json llamado "dato.json". Como no indicamos más que el nombre del archivo, quiere decir que este debería estar situado en la misma carpeta que la página que se está ejecutando en el navegador.

Otro detalle importante es que las conexiones Ajax se realizan por HTTP y para que estos ejemplos funcionen la página que los ejecute también debe haberse accedido por HTTP, es decir, debe estar situada en un servidor web.

Editar

¿Quieres añadir algo sobre Ajax?

Crea artículos, recursos o comparte información sobre Ajax

Crear un bloque

Ajax

Manuales

Manual Ajax práctico - Taller Ajax
Un manual que explica Ajax por la práctica, con una serie de ejemplos de códigos que usan javascript, HTML y...
Trabajo con Ajax en PHP utilizando Xajax
Una serie de artículos prácticos para aprender a programar con Ajax en páginas PHP, utilizando una clase llamada Xajax para...

Más manuales

Tenemos 2 manuales más sobre Ajax

Manual del API de Google Maps
Explicaciones y ejemplos para crear Google Maps en tu página web. Manual de mapas de Google, para manejar el API...
Bindows, un framework AJAX
Presentación y explicaciones para majenar Bindows, una herramienta para programadores que permite crear aplicaciones web con una interfaz de usuario...

Temas relacionados

Preguntas y respuestas

Se han recibido 11 faqs en Ajax

Hacer una pregunta