No es Ajax todo lo que reluce.

Hoy por hoy es imposible estar mínimamente relacionado con el mundo web y no haber oído hablar de Ajax. Sin embargo, la tendencia lleva a pensar que cualquier tipo de carga asíncrona es Ajax. Nada podía ser más falso; ya había cargasasíncronas antes de que la gente usase Ajax y hoy por hoy sigue habiendo métodos interesantes para hacer estas cargas que son más útiles para algunas cosas que el método Ajax.

Delimitando Ajax.

Ajax es sólo una forma de llevar a cabo una petición de carga de un objeto XML. Utiliza el objeto xmlHttpRequest y caga directamente objetos XML o textos planos. Cualquier otra forma de cargar contenidos o el uso de este objeto para cargar cosas distintas a XML o texto plano NO ES AJAX. Podemos hacer prácticamente lo mismo de otras formas: poner iconitos de "cargando" y apliar informaciones en la página... pero toda esa parafernalia no pertenece al método Ajax sino a la unión de tecnologías que vulgarmente se conoce también como Ajax.


Flash también trabaja de forma asíncrona.

Antes de que Ajax se pusiese de moda Flash ya hacía estas viguerías. Bueno, Ajax también existe desde hace tiempo pero la gente no lo conocía (y yo tampoco, que soy muy gente). Al ser un plugin externo al navegador nos quedamos aquí: si ves que es Flash y carga contenidos no pienses que ha usado Ajax, sigue siendo Flash.

Cargando objetos JSON.

Ajax va muy bien cuando nuestro lenguaje por parte del servidor maneja objetos XML (como puede ser XSL, por ejemplo). Pero para los dos lenguajes de programación de servidor más usados: PHP y ASP, la creación de objetos XML es incomoda... y, por qué no decirlo, inútil. JSON es un modelo de creación de objetos y matrices que es mucho más fácil de crear y que JavaScript entiende sin ninguna ayuda ya que es uno de sus métodos propios para crear objetos.

Podéis encontrar más información sobre como crear objetos JSON que JavaScript entienda en este link.

Utilizando el objeto XmlHttpRequest para cargar texto plano podemos lanzar una interpretación de lo cargado como si fuesen ordenes javascript para crear un objeto (funcióneval() ) y de esta forma cargar un objeto javascript.

Ventajas:

• No necesita crear objetos XML.
• Su redacción es rápida.
• Puedes cargar objetos pero estos pueden contener además matrices e incluso funciones.
• Para objetos repetitivos el tamaño del texto a cargar es menor.

Inconvenientes:

• Hay que aprender a escribir JSON.
• Las funciones DOM no son útiles porque no son objetos Document. Debemos conocer bien el objeto cargado sin poder acceder a cualquier punto de sus ramas por id o tag.
• Para objetos grandes es menos legible por una persona.

Creando objetos que utilizan documentos externos para ser visualizados. (Imágenes, Flash, Videos, Musica...)

No puedo evitar sonreír cuando veo clasificado como Ajax un slideShow o cualquier tipo de preview de imágenes de los que pasa a cargarte la imagen mas grande y de mayor resolución en la misma pagina cuando clickas la pequeña. No tiene ningún sentido ya que Ajax carga objetos de texto y no interfiere en la forma gráfica de la página. Es el navegador el que tiene que ir interpretando el DOM final para mostrar lo que queremos ver.

Este método es muy simple si conocemos un poco DOM. Simplemente tenemos que buscar una imagen y cambiar su valor SRC. El navegador tendrá que volver a interpretar el código HTML y buscar la nueva imagen a cargar dentro de la etiqueta "img".

Si ya dominamos un poco más el manejo del DOM podemos crear capas nuevas enteras con la etiqueta "img" dentro y ya está... sin ningún misterio. El resto de objetos de este tipo suelen usar la etiqueta "embed" lo cual no cambia nada de lo anteriormente dicho...

Ventajas:

• Simple, sencillo, directo.
• Puede integrarse el cambio en el documento.
• No requiere conocer nada más que DOM y eventos HTML.

Inconvenientes:

• No cargas texto, no puedes dar ordenes que no hayan sido establecidas como posibilidad en la primera carga del documento.
• Para detectar cuando empieza y acaba la carga del objeto necesitamos modificar los eventos onload y onerror lo cual complica un poco más el código que la generación de una etiqueta directamente formada con los eventos ya incluidos.

Creando Iframes Ocultos

Hasta hace un tiempo se forzaba así la carga de contenidos ocultos. Un iframe es una pagina web contenida dentro del propio documento. Si este es oculto significa que el usuario no lo ve, pero no por eso deja de cargarlo. LosIframes nos permiten hacer más cosas que Ajax (el ejemplo más claro lo tenemos en el envío de archivos por formularios: Ajax no puede hacerlos y los iframes si). Sin embargo el acceso a los contenidos de Iframes está más restringido que el acceso a los contenidos cargados por Ajax lo que hace más difícil su manejo.

Ventajas:

• Aumenta algunas de las posibilidades de Ajax.
• Carga directamente HTML completo.
• El navegador ya maneja el proceso de carga de iframes (y cambios de pagina) de la misma forma que a la propia pagina.

Inconvenientes:

• Es mucho más complicado manejar iframes que Ajax.
• Los navegadores no los manejan de la misma forma.
• Al tratar el navegador su carga como de pagina es imposible hacer cargas nuevas sin que el usuario las vea.
• Es preciso crear un documento HTML para el iframe.

Creando y modificando etiquetas SCRIPT

Y es que con javascript no solo podemos modificar el body de nuestro documento. Podemos modificarlo casi todo. Este es un gran ejemplo: este método se encarga de cambiar las llamadas a librerías javascript borrando algunas y añadiendo otras. El navegador al ver el cambio se ve forzado a interpretar lo que pone la librería. Si esa nueva librería contiene ordenes o funciones referentes alDOM ya tenemos otra forma de hacer cambios en nuestra página.

Podéis tener más información sobre este método aquí

Ventajas:

• Lo que cargas es JavaScript directo: puede permitirte cambios mucho más drásticos en el documento.
• Te permite crear varios objetos (por JSON por ejemplo), Funciones nuevas, y dar ordenes directas.

Inconvenientes:

• No existe una forma directa para ver el estado de la carga (ningún indicador que te diga cuando ha terminado). Para detectarlo debemos manipular nuestra librería de forma que de una orden dentro de si misma que nos indique que ha terminado de cargar.
• El contenido cargado puede ser luego borrado pero no manipulado.

Creando y modificando etiquetas LINK

Si lo único que queremos cargar de forma asíncrona son valores del aspecto de nuestro documento podemos usar el mismo método anterior pero aplicado a la creación de etiquetasLink que caguen librerías CSS. SIendo incluso más rebuscados podríamos cargar esas librerías y acceder a sus propiedades (width, height, border) como si de datos se tratasen.

Ventajas:

• Lenguaje nativo si lo que quieres cambiar es el aspecto.

Inconvenientes.

• Es difícil de manipular su contenido.
• Es complicado usar sus valores como variables.
• No hay forma de controlar el estado de carga.
• En realidad, no es útil para nada que no se realmente CSS.

Cargando archivos que generan Cookies.

Cualquiera de los sistemas anteriores (menos flash) tiene un posible añadido. Como podemos generar cookies desde el servidor podemos cargar datos con ellas. Cuando yo accedo a un nuevo archivo ya sea por ajax, ajax-json, carga asíncrona de librerías javascript, etc. Si el servidor genera una cookie desde ese mismo momento esta es accesible en mi documento actual.

Ventajas:

• La cookie se mantendrá además de una página a otra.
• La cookie es silenciosa, nada indica que se haya generado ni si una carga además la ha generado o no.
• La cookie es independiente del archivo cargado (pueden cargarse entonces 2 cosas a la vez).

Inconvenientes.

• Debe ser lanzado otro método asíncrono para generar la cookie (ella sola no puede pedirse).
• Los datos son siempre texto plano (ni XML, ni JSON ni ordenes).
• La cookie será accesible por usuarios del mismo ordenador.
• Las cookies pueden ser desactivadas o borradas por el usuario.

(Gracias a Marborack de forosDelWeb por la recopilación y explicaciones)