ajax: lo fácil que es y lo poco que se (parte 1)

Hace ya más de un año que tuve que crear mi primera web en Ajax. Una intranet que se comunicaba con SAP y sacaba listados de ventas, clientes, etc.
La verdad es que cuando oí hablar de Ajax pensé: joder otro lenguaje por aprender que seguro no aportará nada nuevo. Que equivocado que estaba en todo. De vez en cuando un administrador tiene que programar algo... desde un simple script hasta una intranet. Creo que un administrador no es realmente un administrador si no sabe programar.

La mejor manera de definir Ajax es decir lo que no es: no es un lenguaje, no es una aplicación para diseñar y programar webs, no es un componente ni algo que necesites descargar e instalar. Ajax no es nada de eso. Ajax ya está en tú navegador.

Ajax reune un conjunto de tecnologías existentes desde hace tiempo (XHTML, CSS, DOM, XML) y una lógica de aplicación escrita en JavaScript y que se ejecuta en un cliente.

El objetivo de Ajax es minimizar la cantidad de información que se envía del cliente al servidor y por tanto el número de refrescos que se producen en una pagina.

Todos hemos visto GMail. Puedes ir moviendote por todos los menús y opciones y la página web no se refresca nunca. Ajax esta continuamente funcionando por debajo y haciendo "mini" peticiones. Con Ajax obtienes mini porciones de datos y no páginas web completas.

El pilar de Ajax es simplemente un objeto. El objeto XMLHttpRequest.

Lo más fácil es siempre poner un ejemplo. Vamos a crear una página con un formulario para sumar dos números. Pondremos también un botón para sumar estos dos números. Con JavaScript es fácil sumar dos numero en HTML, pero lo que quiero es que estos dos números me los sume una aplicación externa, es decir otra página web (ya sea otra pagina en JavaScript, PHP, ASP, Perl...).

Veamos como sería el código:

<script>
function calcula(){
    var http;
    http = new XMLHttpRequest();
    http.open("GET", "suma.php?a="+document.forms[0].a.value+"&b="+document.forms[0].b.value, true);
    http.onreadystatechange = function() {
        if (http.readyState == 4) {
            var response = http.responseText;
            document.forms[0].resultado.value = response;
        }
    }
    http.send(null);
}
</script>

<form>
<input value="0" name="a"> + <input value="0" name="b"> = <input value="???" name="resultado">
<input onclick="calcula()" type="button" value="Calcula">
</form>

Creo que está claro. Miramos primero los inputs. Tenemos dos inputs (el "a" y el "b") donde nosotros escribiremos dos números. Luego tenemos el input "resultado" donde dejaremos la solución una vez calculada. Por último tenemos un botón que ejecuta la función en JavaScript, calcula().

Dentro de la función lo primero que hacemos es crear una instancia del objeto XMLHttpRequest. Luego le decimos cual es el programa que queremos ejecutar en fondo y que nos evitará tener que refrescar el navegador para obtener el resultado. En este caso ejecutaremos el programa suma.php al que le pasamos dos parámetros (el valor de a y el de b). Luego definimos una función que se ejecutará una vez cambie el estado (onreadystatechange). El estado cambiará cuando suma.php ya tenga calculado el resultado. Por ultimo hacemos un send para realizar la petición. El send esperará hasta que el evento onreadystatechage así lo decida.

Si escribimos este ejemplo veremos como realizamos peticiones web en fondo y en ningún momento se refresca el navegador.

Imagínate ahora que tienes un formulario donde escribes un código de cliente y automáticamente y sin refrescar la pagina te aparece un listado con todas las compras que ha realizado y todos los datos personales del cliente. Todo esto sin refrescar y por tanto dando la apariencia que no se esta haciendo nada... que los datos aparecen por arte de magia... Ajax es hacer magia. Si no crees que es mágia mirate backbase, YUI, dojo, rico, etc.

En el próximo post (parte 2) explicaré como utilizar xajax. Unas librerías para PHP que nos ayudan y simplifican en la programación en Ajax.

parte1.zip (archivos fuente)