¿Qué es Ajax? Parte I: Definición

Ajax ya lleva mucho tiempo con nosotros con lo que la mayor parte de los interesados en desarrollos web ya saben de que va. Sin embargo no debería empezar este blog sin exponer una explicación de que es hoy en día ajax para los desarrolladores.

AJAX: Asincronic Javascript and Xml.

Carga asincrona de conenidos en formato XML mediante Javascript. Y es que por definicion Ajax es sólo eso, el método por el cual conseguir cargar mediante JavaScript contenidos XML de forma asincrona para luego incorporarlos al documento HTML e ir danto más y más información al usuario.

Pasemos a describir mejor cada una de las partes de la definición y a incorporar otra más DOM (Document Object Model) sin el cual la carga de contenidos por Ajax no tiene ningún sentido.

Asincronía.

Por lo general los contenidos web se cargan siempre tras una petición del usuario. Este, ya sea escribiendo una dirección en su navegador, clickando en un link o mandando un formulario, pide una pagina completa a un servidor y su navegador la interpreta mostrándosela en un entorno gráfico más o menos agradable. La asincronía se refiere a romper este modo de trabajo y es la gran virtud de ajax; usandolo podemos hacer que el usuario pida y reciba nuevos contenidos desde el servidor sin cambiar la página sino como añadidos que pueden ser luego usados de la forma que sea.

JavaScript.

JavaScript es un (más bien el) lenguaje de programación de lado del cliente. Eso quiere decir que sus scripts se cargan con la página y que es el navegador el que los procesa. Normalmente es usado para dar cualidades a los documentos que el HTML por si solo no tiene. Por ejemplo todos esos botones que se pueden encontrar en varias webs que consiguen que aparezcan y desaparezcan cosas del documento suelen ser JavaScript. Este lenguaje es además el que posee entre sus objetos el famoso XmlHttpRequest que es el encargado de hacer las llamadas asincronas. En otras palabras Javascript es el lenguaje encargado de manejar ajax.

Xml.

XML es un formato abierto de documentos por etiquetas. Su forma nos permite abrir etiquetas del tipo "contenido" que terminan formando un árbol de documento al anidarse unas etiquetas dentro de otras:

<caja>
  <contenido1>mi Contenido</contenido1>
  <contenido2>
    <subcontenido1>mi Contenido</subcontenido1>
    <subcontenido2>mi Contenido</subcontenido2>
  </contenido2>
  <contenido3>mi Contenido</contenido3>
</caja>

Sí, HTML bien formado (con todo bien abierto y cerrado) es un documento XML. Al HTML valido que sea además XML se le llama XHTML.

DOM: Document Object Model
Modelo de Objetos del Documento.

Este modelo es el que marca la forma de los contenidos XML y trata a cada una de estas etiquetas como "nodos de un árbol de DOM". En el ejemplo anterior CONTENIDO2 según el DOM sería un nodo que tendría como nodo-padre a CAJA y como nodos-hijos a SUBCONTENIDO1 y SUBCONTENIDO2.

JavaScript, aparte de ser el motor de ajax, tiene varias funciones que nos permiten encontrar y colocar cosas en objetos que respondan al esquema de DOM. Como además un documento HTML bien formado (XHTML) también responde a este tipo de estructura nos encontramos con infinidad de posibilidades al poder cargar un XML sacar de él lo que queramos e insertarlo en nuestro XHTML.

Esta es la base teórica de la incorporación de contenidos mediante Ajax: Cargarlos de forma asíncrona y alterar el documento segun lo cargad mediante las funciones de DOM.