Just Sherekan – Blog de Programación

Hoy inauguro la sección de AJAX con este artículo de introducción, en el cual vamos a ver en que consiste y como funciona esta reciente técnica de desarrollo web.

Que es y como funciona AJAX

AJAX es una técnica de de desarrollo web, por la cual se pueden crear aplicaciones web más rápidas y cómodas para el usuario. Por medio de esta técnica el cliente puede interactuar con el servidor de manera asincrónica, actualizando el contenido de las páginas, sin necesidad de volver a cargarlas.

Esta técnica, no solo es más cómoda y amigable para el usuario (ya que se asemeja a las aplicaciones de escritorio) sino que además, si es correctamente utilizada, puede llegar a ser más rápida, porque cada vez que se necesita actualizar un dato en una página, no es necesario recargarla nuevamente (solo se recarga la sección necesaria de la misma).

AJAX, no es una tecnología en si, sino que es un conjunto de tecnologías aplicadas de manera que logran el resultado explicado anteriormente (es decir, logran AJAX).

AJAX significa Asynchronous JavaScript And XML, y como su nombre lo indica, se trata de la combinación de JavaScript y XML. Básicamente, JavaScript hace una request al servidor, el mismo le devuelve una response en XML, y esta es procesada por JavaScript para actualizar los datos de la página, sin tener que recargarla por completo (logrando así una interacción asincrónica entre el servidor y el cliente).

NOTA: esto no es del todo cierto. Ya que se puede lograr AJAX, sin JavaScript y sin XML, reemplazando a JavaScript por otra tecnología client-side y a XML por JSON por ejemplo.

Para poder utilizar AJAX, es necesario conocer bien el protocolo HTTP y saber algo de JavaScript y XML. Pero si se quiere explotar AJAX al máximo, es necesario conocer otras cosas como XHTML, CSS, XSLT, DOM, JSON, etc. Pudiendo lograr cosas realmente impresionantes, como Google Maps o Gmail.

Para entender como funciona AJAX, primero vamos a hacer un sintético repaso de como funcionan las aplicaciones web “tradicionales”.

1. El cliente le hace una HTTP request al servidor web (generalmente por medio de un browser).
2. El servidor web, procesa la request y devuelve una HTTP response (que generalmente contiene contenido HTML para que el browser luego muestre al usuario).
3. Por medio de esa página generalmente el ciclo vuelve a empezar, ya que el cliente puede hacer otras HTTP requests al servidor (a través de links presentes en la página, imágenes, etc.).

En fin, así es como funciona una aplicación web sin AJAX, ahora vamos ver como funcionan con AJAX.

Con AJAX, cuando el cliente hace una HTTP request al servidor, la hace por medio de JavaScript (lenguaje client-side). El servidor procesa la request y en vez de devolverle al cliente una página HTML, le devuelve un resultado en XML (no necesariamente, pero generalmente en XML), que es procesado por JavaScript, y este actualiza solo las secciones de la página necesarias (sin tener que cargar una nueva página). Repasemos entonces:

1. El cliente por medio del browser produce algún evento. Este evento (como hacer click en un link por ejemplo) este es procesado por JavaScript (o alguna otra tecnología client-side) y le envía al servidor web una HTTP request.
2. El servidor web, procesa la petición como siempre y le devuelve una response con el resultado en XML.
3. Este resultado es procesado por JavaScript. Que recarga las secciones de la página necesarias para mostrar el resultado al usuario.
4. Por medio de esta misma página, el ciclo comienza de nuevo. Sin haberse tenido que recargar la página.

Los pro y los contras de AJAX

Ventajas

• Las páginas no se recargan constantemente.
• El tiempo de espera puede ser menor.
• Se pueden lograr aplicaciones web que sin AJAX definitivamente no se podrían hacer, como el conocido Google Maps por ejemplo.

Desventajas

• Falta de integración con el botón “retroceder” de los browsers. Esto puede llegar a confundir al usuario.
• Es necesario que el navegador soporte y tenga habilitado JavaScript. Pero no es una “desventaja”, ya que casi todos los navegadores modernos soportan JavaScript.
• Al tener que ejecutar más código del lado del cliente, puede enlentecerse el rendimiento de la máquina del cliente. Por eso debe usarse AJAX con moderación.
• Los usuarios no pueden obtener una URL a la cual poder referirse, en caso de querer recomendar la página, o volver a esa página en algún momento. Por eso debe saberse cuando usar AJAX y cuando no.
• Más trabajo para los desarrolladores. Programar aplicaciones con AJAX puede llegar a ser tedioso a veces. Pero hay muchas herramientas y frameworks para facilitarnos el trabajo, ejemplos de ello son GWT.

Como podemos ver, tiene sus pro y sus contras como todo. Y se trata de saber cuando utilizarlo y cuando no.

Un ejemplo simple de AJAX

Bueno, basta de teoría, vamos a ver un ejemplo sencillo de como utilizar AJAX.

Vamos a crear una aplicación sencilla que va a hacer las veces de un “Hello World” para introducirnos en el uso de AJAX.

Por un lado, tenemos la página sayHello.php con este código PHP, que toma un dato enviado por GET, y genera una cadena de texto del tipo “Hola [dato]“.

[sourcecode language="php"]< ?php
echo "Hola " . $_GET['name'];
?>[/sourcecode]

Generalmente el resultado es devuelto en XML, pero en este caso, como se trata de un ejemplo bien sencillo, lo devolvemos como una simple cadena de texto.

Por otra parte, tenemos una página HTML sayHello.html, con un div, un text input y un botón, así:

[sourcecode language="html"]

Ingrese su nombre

[/sourcecode]

La idea, es que cuando el usuario apriete el botón, se envíe una HTTP request enviando la cadena de texto ingresada en el text input al código PHP anterior. El código PHP genere una cadena de texto para saludar al usuario por el nombre y se la devuelva como resultado al cliente, y este actualice el div mostrando dicho resultado.

Si quisieramos hacer las cosas fáciles y sin AJAX, mejor dicho, sin AJAX. Entonces para que el browser del usuario haga la HTTP request cuando el usuario apriete el botón, simplemente pondríamos los tags HTML del formulario (del text input y el botón) dentro de un tag HTML form, con un atributo action indicándole la URL a donde hacer la request.

Pero como queremos usar AJAX, esto no nos sirve! Necesitamos usar JavaScript como explicamos anteriormente, que es el que se va a encargar de hacer la HTTP request al servidor, para finalmente procesar la HTTP response que este devuelva y actualizar el div con el resultado (sin recargar la página). Así que hacemos lo siguiente:

Primero que nada creamos el objeto XMLHttpRequest, que es una clase JavaScript que nos provee de una interfaz para interactuar con el servidor, es decir hacer las requests, procesar las responses, etc…

[sourcecode language="js"]if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}[/sourcecode]

La condición que ven ahí, es porque testeamos primero si existe la clase XMLHttpRequest (ya que en el caso de Internet Explorer, la clase se llama ActiveXObject).

Una vez creado el objeto XMLHttpRequest, vamos a enviarle al servidor la HTTP request, enviándole como parámetro por GET el contenido de text input ingresado por el usuario. Para eso utilizamos los método open() y send() que ofrece XMLHttpRequest.

[sourcecode language="js"]xmlhttp.open(“GET”, “search.php?id=”+document.getElementById(“id”).value, true);
xmlhttp.send(null);[/sourcecode]

Vamos a setear el atributo onreadystatechange del objeto XMLHttpRequest con una función callback, que va a ser llamada cada vez que el estado de la HTTP request cambie. Esta función va a verificar el estado de la request, y si este es igual a 4 (es decir que ya se completó) entonces va a modificar el contenido del div con el resultado devuelto en la HTTP response.

[sourcecode language="js"]xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
document.getElementById(“hello”).innerHTML = xmlhttp.responseText;
}
}
[/sourcecode]

Podríamos meter todo ese código JavaScript en una función y llamarla cuando se presione el botón, quedando sayHello.html así:

[sourcecode language="html"]

También pueden utilizar el método setRequestHeader() para setear los headers de la HTTP request, por ejemplo:

[sourcecode language=""]
setRequestHeader(“Content-Type”, “text/xml”);
[/sourcecode]

No voy a entrar en detalle, así que revisar algo de documentación sobre XMLHttpRequest no les va a hacer mal.

Ingrese su nombre

[/sourcecode]

Bueno, ahora viene la parte donde sobre-explico las cosas (pueden saltear esto). OK, veamos paso por paso lo que sucede:

1. Creamos un objeto XMLHTTPRequest.
2. Le seteamos el atributo onreadystatechange una función callback, que como ya dije antes, es la que se va a llamar cada vez que la request cambie su estado. En este caso, le pasamos una función que verifica que el estado de la request sea 4 (haya terminado de procesarse) y si esto es cierto, modifica el div con el texto devuelto por la HTTP response.
3. Llamamos al método open() para indicarle al objeto XMLHttpRequest como hacer la request. Con el primer parámetro le indicamos el método de la request (en este caso GET), con el segundo la URL (en este caso la URL del script sayHello.php, pasándole como parámetro name el valor del input text name), y como tercer parámetro le indicamos que la request debe efectuarse de manera asincrónica (recuerden señores, que estamos usando AJAX).
4. Finalmente llamamos al método send() para enviar la request. Si todo sale bien, debería hacerse la HTTP request al servidor web, y cuando este haya respondido, el objeto XMLHttpRequest va a llamar a la función callback guardada en el atributo onreadystatechange, que se va a encargar de modificar el contenido del div.

Bueno, eso fue todo por este artículo. En fin, algunos links interesantes que se pueden visitar para más información:

• AJAX según la Wikipedia
• Manual de AJAX en español
• Tutorial de AJAX en inglés

29 comentarios