Juanma Santoyo

En ocasiones me llaman friki

Manual básico de Ajax (Parte 1)

| No hay comentarios

Aún hoy en día, varios años después de la salida de Gmail o google maps y la consiguiente popularización de Ajax, muchos desarrolladores no tienen claro de qué va esto y cómo funciona.

En este artículo pretendo aclarar todo lo que se necesita saber para empezar a hacer pequeñas cosas con Ajax, y aportar una base para poder ampliar conocimientos sobre el tema con la idea de poder afrontar aplicaciones basadas en Ajax más complejas.

Inicialmente, este artículo iba a publicarse completo, pero como es algo extenso, lo dividiré en dos partes: primero, entenderemos qué es Ajax y cómo funciona. En la segunda parte, programaremos un sencillo ejemplo basado en Ajax.

Conviene avisar de que para poder entender algo de lo que se comenta en este artículo, se deben tener conocimientos medios de Java Script y PHP, y conocimientos básicos de HTML.

¿Qué es Ajax?

La mejor forma de comprender qué es Ajax, es averiguar de dónde salen las siglas A.J.A.X.

Ajax significa “Asynchronous Java script And XML”. O en nuestra lengua: “Java script asíncrono y XML”.

De toda la definición, quizás lo más importante sea el concepto “asíncrono”, porque es la clave de todo: al fin y al cabo, lo que nos va a permitir el objeto Ajax es realizar una petición http asíncrona al servidor y procesar su resultado.

Que sea una petición http asíncrona, quiere decir que todo ocurrirá en segundo plano, sin que el usuario se dé cuenta de lo que está pasando.

Típicamente, la petición al servidor generará un resultado XML, aunque no tiene por qué (de ahí que XML se incluya en la definición de Ajax). Y no sólo eso, si no que dicho resultado vendrá en forma de objeto DOM y será fácilmente procesado mediante JavaScript.

Sin embargo, el resultado de una petición Ajax también puede obtenerse como texto plano o como HTML.

Resumiendo, Ajax:

  • Es un objeto JavaScript que aportará el propio navegador.
  • Permitirá realizar peticiones asíncronas al servidor.
  • Aportará un resultado procesado como XML, HTML o, simplemente, un texto plano.

Un poco de arquitectura Web básica

No podemos entender cómo trabaja Ajax, o cómo programar con Ajax; si no tenemos una idea clara de cómo es la arquitectura web básica.

Ajax trabaja como intermediario entre el cliente y el servidor, de ahí que es importante saber de forma básica cómo actúan ambos al realizar una petición http.

Antes que nada, el cliente (que supondremos que es un navegador) realiza una petición al servidor. Básicamente, solicitará un archivo.

El servidor escucha la petición y la resuelve. Esto, puede implicar muchas cosas. Puede ser simplemente localizar un archivo .html y enviarlo al cliente, o puede ser localizar un archivo .php, interpretarlo, acceder a base de datos, etc; para luego generar un nuevo código .html y enviarlo al cliente. Ésta es la parte más importante de nuestra aplicación web, ya que la parte de la aplicación que trabaja en el servidor será la única que no estará limitada por las funcionalidades del cliente. Por ejemplo, no podríamos acceder a base de datos con una tecnología de navegador como JavaScript.

Por lo tanto, hay cosas que nuestra aplicación sólo puede hacer en el lado del servidor. Y para obtener un resultado del servidor, necesitamos generar una nueva petición desde el navegador. Hablando en términos más sencillos: necesitamos recargar la página.

En este punto es donde entra en juego Ajax. Con Ajax, podremos generar esa petición en segundo plano. A base de JavaScript, podemos lanzar la petición, esperar el resultado del servidor, y mostrarlo en pantalla sin que nada de esto interrumpa la ejecución de la aplicación principal.

Algunos ejemplos

Para entender bien qué implica la posibilidad de realizar una petición al servidor en segundo plano, veamos algunos ejemplos.

Caso Gmail

Cuando Google lanzó Gmail, los servicios de Web mail estaban muertos. Nadie confiaba en ellos y siempre era preferible usar un cliente de correo de escritorio. Lo que hace de Gmail un cliente de Web mail tan especial, es que precisamente funciona exactamente igual que un cliente de correo de escritorio; esto se debe a que Gmail fue la primera aplicación web basada en Ajax.

Todo se basa en un detalle: Gmail es capaz de revisar periódicamente los correos entrantes, y mostrar los nuevos resultados en pantalla sin que ello implique un refresco de página. De forma que el usuario puede ver cómo llegan nuevos correos mientras está redactando uno, o mientras está leyendo. Dicho en otras palabras: Gmail es capaz de notificar la existencia de nuevos correos mediante peticiones al servidor que se realizan en segundo plano.

Caso Google Maps

No hay duda de que Google Maps es una de las aplicaciones más espectaculares de los últimos años. Y sin embargo, su funcionamiento es realmente simple. Sin Ajax, un Google Maps no sería posible, o al menos no sin Flash o otras tecnologías externas al navegador.

En realidad, Google Maps simplemente se dedica a analizar en qué posición del mapamundi estamos y que zoom estamos usando. Una vez concretados estos parámetros, se lanza una petición al servidor mediante Ajax, y el servidor notificará al cliente qué imágenes debe cargar, y en qué posición del mapa debe colocarlas. Sobra decir que sólo cargamos las imágenes del mapamundi que se están viendo en ese momento en la pantalla.

Por lo tanto, una vez más vuelve a ocurrir: se han obtenido resultados calculados por el servidor sin que ello haya implicado un refresco de página.

Es todo por hoy

Ahora ya sabemos lo básico de Ajax: sabemos cómo funciona y para qué sirve. En la segunda parte de este artículo, veremos un ejemplo que nos ayudará a comprender mejor cómo funciona la programación basada en Ajax.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Deja un comentario

Los campos obligatorios están marcados con *.