Entendiendo AJAX
AJAX es una palabra muy de moda, sobretodo después de reafirmarse como uno de los pilares de la web2.0.
En este artículo intentaré explicar con mis propias palabras y con ejemplos exactamente de qué se trata, para qué sirve y cómo se utiliza.
¿Qué es?
El acrónimo AJAX viene de Asynchronous JavaScript And XML, y cómo dice su nombre és una tecnología que permite al navegador web obtener datos del servidor y refrescar partes de una página web asíncronamente (sin recargar la página).
¿Para qué sirve?
Básicamente el objetivo de utilizar AJAX es para realizar webs más usables y dinámicas.
Por ejemplo, mediante AJAX se pueden hacer aplicaciones web en tiempo real. Un buen ejemplo es la fisgona de menéame, una página donde puedes ver en tiempo real las acciones que realizan los usuarios de menéame.
No todo son aplicaciones tan complicadas, el ejemplo clásico que muestra las ventajas de AJAX está en http://www.sematopia.com/examples/ajax/index.php, dónde se puede hacer una multiplicación de dos números mediante AJAX (rápido) o sin AJAX (lento, puesto que tiene que recargar la página)
¿Cómo se utiliza?
El AJAX no es más que una petición HTTP estándar, o sea que requiere una dirección URL (script) a la que llamar, un método HTTP (GET o POST) y un conjunto de variables que queramos mandar al script.
La respuesta también es una respuesta HTTP estándar, con sus cabeceras HTTP y el cuerpo de la respuesta, que contendrá los datos que devuelve el servidor (en formato de texto).
Esta llamada se hace a través del objeto Javascript XMLHTTPRequest, implementado por todos los navegadores modernos y que encapsula la comunicación HTTP de forma fácil.
Ejemplo: Suma de dos números mediante AJAX
El flujo de ejecución de una llamada AJAX es:
- Código Javascript que crea el objeto XMLHttpRequest y realiza la conexión con el backend script
- Ejecución del backend script. Este script recibe los parámetros pasados en el objeto XMLHttpRequest, ejecuta código de lado de servidor y devuelve una respuesta en formato de texto. Código en PHP:
- Función callback Javascript que automáticamente ejecuta el navegador al recibir la respuesta de la llamada AJAX. Esta función tiene un único parámetro que es el texto de la respuesta AJAX.
Simplificando la faena
Hasta aquí la teoría. Está muy bien conocerla, pero a la hora de la verdad es bastante plasta tener que escribir el código Javascript cuando fácilmente pueden haber unas 20 llamadas AJAX distintas por página.
Existen varias librerías Javascript que encapsulan en objetos de más alto nivel todo el proceso AJAX y otras “cool features” de Javascript (drag&drops, ventanas modales, animaciones, etc.,)
La gente utiliza bastante Prototype pero yo estoy acostumbrado a la Yahoo! UI Library (YUI) y me va de maravilla ;) Es la que utilizamos mayormente en Moneytrackin’
La librería YUI tiene distintos utilidades, pero nos vamos a centrar en el Connection Manager que es el módulo que nos facilita hacer las llamadas AJAX.
Básicamente el código Javascript equivalente en YUI seria éste (El script de backend permanece igual):
Hasta aquí mi introducción al AJAX. Os animo a todos a experimentar con esta técnica ya que se pueden hacer cosas bastante interesantes.
Como siempre, espero vuestros comentarios!
[…] la gente que esté empezando con esto del AJAX voy a explicar una técnica para debugar código AJAX/Javascript desde […]