El principio de Ajax en JavaScript

El nombre Ajax fue acuñado por primera vez en 2005 por Jesse James Garrett en su ensayo «Un nuevo enfoque para las aplicaciones web». La idea es usar JavaScript para intercambiar datos con el servidor en segundo plano sin recargar completamente la página web.

Comunicación sincrónica

Veamos primero cómo funciona la comunicación clásica entre cliente y servidor a través del Protocolo de transferencia de hipertexto (HTTP). El cliente (generalmente el navegador) envía una solicitud (Solicitud HTTP) al servidor, que luego lo evalúa y devuelve una respuesta correspondiente (Respuesta HTTP) al cliente.

En términos de carga de la página web, esto significa que cada vez que el usuario hace clic en un enlace o completa un formulario, por ejemplo, se envía una solicitud HTTP correspondiente al servidor, que luego genera el contenido de la nueva página web y lo devuelve. al cliente.

El aspecto menos que ideal de este proceso es que el cliente o navegador tiene que esperar mientras el servidor evalúa la solicitud y prepara la respuesta. Como usuario, notará esto porque ya no podrá interactuar con el sitio web durante este tiempo; es decir, no se pueden realizar más solicitudes durante el tiempo de espera. Por ello, este tipo de comunicación, la interacción ordenada entre el inicio de una solicitud y la espera de la respuesta, también se denomina comunicación sincrónica.

Para usar un ejemplo más ilustrativo, veamos la implementación de una función de búsqueda clásica dentro de una página web. Se utiliza un formulario de búsqueda para introducir los criterios de búsqueda y, a continuación, se envía el formulario. El servidor evalúa la solicitud de búsqueda, generalmente realiza una o más consultas a la base de datos y crea la página web que contiene los resultados de la búsqueda (ver más abajo). Mientras el servidor hace esto, el usuario no puede hacer nada más que esperar los resultados. Solo cuando se han determinado todos los resultados de la búsqueda y se ha cargado la respuesta desde el servidor, el usuario puede continuar con la interacción, por ejemplo, navegar a través de los resultados de la búsqueda en la descripción general o ver cada resultado en detalle.

Comunicación asíncrona

Cuando se usa Ajax, la comunicación se lleva a cabo de forma asíncrona, no síncrona, razón por la cual esto se conoce como comunicación asíncrona. Al igual que con la comunicación síncrona, primero se carga una página web completa desde el servidor, o el cliente realiza una solicitud al servidor, que la procesa y entrega una respuesta adecuada. Sin embargo, a diferencia de la comunicación síncrona, la comunicación asíncrona también le permite enviar nuevas solicitudes al servidor mientras aún espera la respuesta a las solicitudes que ya se han enviado (consulte la figura a continuación). Esto hace posible, por ejemplo, actualizar de forma independiente partes individuales de una página web con datos del servidor.

9

Si aplicamos esto al ejemplo de búsqueda, luego de enviar el formulario de búsqueda, el formulario se ocultaría, se mostraría una barra de progreso y, una vez completada la búsqueda, se mostrarían los resultados de la búsqueda (consulte la siguiente figura). Los demás componentes (fijos) de la página web, como las áreas de encabezado, navegación y pie de página, no se recargan.

Esto tiene algunas ventajas: en primer lugar, los datos de los componentes fijos no se retransmiten desde el servidor, lo que tiene un efecto positivo general en el tiempo de transmisión. En segundo lugar, los usuarios tienen la posibilidad de seguir interactuando con otros componentes del sitio web. Por ejemplo, los resultados de la búsqueda podrían recuperarse del servidor pieza por pieza en lugar de todos a la vez. Un usuario ya podía ver parte de los resultados de búsqueda, solicitar vistas detalladas de los resultados, etc., mientras se recuperaban gradualmente más resultados de búsqueda del servidor.

Nota: En general, la comunicación asíncrona puede mejorar significativamente la facilidad de uso y la usabilidad de una página web (o aplicación web).

Técnicamente, por supuesto, las solicitudes HTTP también se envían durante la comunicación asíncrona. La única diferencia es que estos no son activados directamente por el navegador, sino que se controlan a través de JavaScript llamadas (aunque las llamadas sincrónicas también son posibles usando JavaScript, pero más sobre eso más adelante).

La diferencia se ilustra una vez más en la siguiente figura. Sin Ajax (lado izquierdo en el diagrama), las solicitudes HTTP son ejecutadas directamente por el navegador, pero cuando se usa Ajax (lado derecho en el diagrama), esto lo hace el código JavaScript correspondiente. El código JavaScript también maneja el procesamiento de la respuesta del servidor, por ejemplo, para actualizar la interfaz de usuario en consecuencia.

Casos de uso típicos para Ajax

Además del ejemplo descrito en la sección anterior del proceso de búsqueda que se ejecuta en segundo plano, hay una serie de otros ejemplos del uso de Ajax, que presentaremos brevemente a continuación.

Completado automático de campos de entrada

Un ejemplo clásico es la finalización de campos de entrada. La idea es mostrar sugerencias de entrada al usuario en forma de una lista de selección mientras el usuario ingresa texto en el campo de entrada correspondiente (ver más abajo), preseleccionando así posibles valores de selección. Técnicamente, registra un detector de eventos para el cambiar evento del campo de entrada respectivo, use Ajax para enviar una solicitud que contenga la entrada actual al servidor y muestre los valores coincidentes devueltos por el servidor en la lista desplegable.

9

Paginación de registros grandes

Otro ejemplo es la paginación de registros (es decir, dividirlos en páginas individuales). De hecho, si hay muchos registros diferentes (por ejemplo, una tabla de usuarios), tiene sentido no mostrar todos los registros en una tabla larga, sino solo una parte de los datos a la vez, con la opción de alternar entre uno y otro. partes individuales. Por regla general, se proporciona una opción de navegación por encima o por debajo de la tabla correspondiente, como se muestra a continuación.

El ejemplo se puede implementar cargando primero solo una parte de los registros del servidor a través de Ajax (la «primera página», por así decirlo, similar a los resultados de búsqueda descritos anteriormente). Si el usuario ahora hace clic en el enlace a otra página, los registros de esta página seleccionada se cargan desde el servidor en consecuencia.

Teletipos de noticias

Los teletipos de noticias, que puede ver en las páginas de noticias o deportes, utilizan Ajax para realizar solicitudes periódicas al servidor y mostrar nuevos mensajes, si están disponibles. Para hacer esto, utiliza el establecerIntervalo() método en el lado del cliente para enviar solicitudes al servidor a intervalos específicos a través de Ajax. Si las solicitudes devuelven nuevos mensajes, estos se incorporan al teletipo de noticias en consecuencia.

Componentes de interfaz de usuario editables

El concepto de Ajax ha impulsado en gran medida la proliferación de aplicaciones web—es decir, páginas web que se ven y se sienten como aplicaciones de escritorio clásicas mientras se ejecutan en el navegador. Las tablas que le permiten editar registros individuales son uno de los muchos componentes de GUI que se usan en tales aplicaciones (vea la siguiente figura). Por lo general, puede iniciar el modo de edición haciendo doble clic en una celda de la tabla y luego ajustar el valor en la celda. En segundo plano, el registro correspondiente se sincroniza con la base de datos en el servidor a través de Ajax.

Más allá de estos casos de uso, hay muchos otros en los que Ajax resulta útil. En general, Ajax es útil siempre que desee cargar o enviar datos dinámicamente al servidor sin recargar la página web.

Formatos de datos utilizados

Ahora surge la pregunta, ¿qué datos se transfieren entre el cliente y el servidor y en qué formato? En principio, puede utilizar cualquier formato, pero los tres siguientes son los más utilizados:

• HTML: Este formato es útil si desea cargar componentes GUI listos para usar (también llamados widgets; ej., componentes de calendario o similares) directamente desde el servidor e integrarlos en la página web.
• Lenguaje de marcado extensible (XML): Este formato es adecuado si carga datos estructurados desde el servidor (por ejemplo, registros individuales para una tabla) y desea generar contenido en la página web en función de estos datos.
• Notación de objetos de JavaScript (JSON): Al igual que XML, este formato es adecuado siempre que desee cargar datos desde el servidor para generar contenido en la página web en función de esos datos, pero es mucho más simple que XML y comparativamente más fácil de procesar en aplicaciones JavaScript.

Nota del editor: Esta publicación ha sido adaptada de una sección del libro. JavaScript: la guía completa por Felipe Ackermann.