Attakinsky

Como educador, siempre he estado muy de acuerdo con la frase “El maestro no es la fuente del conocimiento, es un guía para obtenerlo”. Por ello, en lugar entrar en profundas explicaciones de lo que es AJAX, me voy a limitar a mostrarlo con ejemplos verbales y prácticos, pero para quienes gustan de arrasar la teoría, pueden encontrar la definición en http://es.wikipedia.org/wiki/AJAX. Lo que si vamos a hacer bien (espero) es orientar al que ya entiende algo de programación en PHP en el uso de esta tecnología para mejorar el funcionamiento y presentación de su producto final.

Para empezar, debemos comprender muy bien lo que NO es AJAX. Vamos a Google y hagamos una búsqueda normal, por ejemplo, escribamos la palabra ‘ajax’ en el cuadro de texto y analicemos que sucede al activar la búsqueda. Es obvio que nuestro dato es enviado a otro documento que se encarga de buscar los resultados y presentarlos en pantalla. Y digo obvio, porque se nota cuando la página de resultados carga. Es decir, que el documento A envía un dato al documento B frente a nuestros ojos. Esto es el procedimiento “normal” en Internet, y cada vez que se necesitan nuevos datos, el navegador realiza otra recarga.

Yahoo! utiliza AJAX

El uso de AJAX, permite precisamente que se cargue información de otros documentos sin necesidad de recargar toda la página, y en algunas ocasiones, sin que el usuario lo note. Por ejemplo, si vamos a Yahoo! en español, y podremos observar en la parte derecha de la pantalla, un recuadro similar al de la imagen que presento aquí.Si movemos el puntero del Ratón por encima de los botones “Correo”, “Messenger” o “Tiempo”, podremos ver que nuevas secciones de contenido son cargadas en la misma página sin recargar todo el documento. Esto es posible claro, gracias al AJAX. Para mí, la forma más práctica y fácil de implementarlo es a través de la librería jQuery que provee más de una función para AJAX, por lo cual, podemos escoger la que mejor se ajuste a nuestras necesidades.

Terminada la teoría, pasemos a la práctica (me acabo de tomar una Red Bull). Esencialmente, para que AJAX funcione, necesita dos archivos: uno es el documento que el usuario ve en pantalla y envía una petición, mientras que el segundo es el que la recibe y emite la respuesta correspondiente. Veamos pues, como hacer un poco de magia, comenzando con un archivo llamado index.html:

<table border="1" width="600">
<tbody>
    <tr>
        <td colspan="3">Presione un botón</td>
    </tr>
    <tr>
        <td width="100">
            <input id="uno" type="button" value="Bio 1" />
        </td>
        <td id="resultado" colspan="2" rowspan="2">Esperando...</td>
    </tr>
    <tr>
        <td>
            <input id="dos" type="button" value="Bio 2" />
        </td>
    </tr>
</tbody>
</table>

Nada fuera lo común. Es un HTML normal, que incluye una tabla con un par de botones. A continuación utilizaremos unas cuantas línea de jQuery, para conseguir que al presionar el primer botón, aparezca dentro de la tabla, la biografía de Napoleón Bonaparte.

// el código se dispara al hacer clic sobre el botón que tiene id="uno"
$('#uno').click(function() {
    // función AJAX que vía GET lee el contenido de napoleon.html y lo almacena en la variable 'respuesta'
    $.get('napoleon.html', function(respuesta) {
        // coloca el conteido de lavariable 'respuesta' dentro del td que tiene id="resultado"
        $('#resultado').html(respuesta);
    });
});

Eso es todo. Cinco líneas de las cuales solo tres son significativas, pues las dos restantes son para cerrar las llaves y paréntesis que hemos abierto. Analicemos que sucede entonces en esta porción de código.

• En la primera línea, con $('#uno') hacemos referencia al elemento (etiqueta o tag) HTML que tenga en su atributo ID el valor ‘uno’. Luego declaramos que el código interno se ejecutará como respuesta al evento clic: .click(function(){ /* codigo interno */});. Una mayor referencia puede encontrarse en la Introducción a jQuery que también hemos publicado en este espacio.
• La siguiente línea es nuestro AJAX., Básicamente tiene la estructura $.get(url_receptor,callback); Lo primero que debemos comprender es que de todas las posibilidades, hemos optado por una de las más sencillas que es $.get (también hay otras como $.post, $.ajax, $.getJSON y alguna otra que pueden encontrar en la documentación de jQuery para AJAX). Los que programan saben que los datos pueden ser enviados de un documento a otro por los métodos GET y POST. Arbitrariamente hemos elegido la primera, repito por ser muy fácil de implementar y comprender. A continuación, dentro del parentesis, debemos colocar el valor del parámetro url_receptor, que para nuestro ejemplo será un archivo llamado napoleon.html. En ese documento podemos escribir un poco de la biografía del recordado emperador francés, a manera de ejemplo. Debo mencionar que en archivo receptor, no es necesario colocar las etiquetas html, head o body pues ese documento nunca será leído directamente por el navegador. Únicamente incluiremos en los elementos que se colocan normalmente dentro de body. Finalmente, el segundo parámetro es el callback que no es más que la reacción de de nuestro código, a la respuesta enviada por el documento receptor (recomiendo leer la definición de callback en wikipedia). El callback por lo tanto queda como function(respuesta){ /* código interno */ }. Podemos observar que en el paréntesis de function, agregamos la palabra ‘respuesta’, que es una variable que almacenará precisamente eso, lo que nos devuelva el documento receptor (napoleon.html)
• La tercera línea, toma la variable respuesta que almacena todo el código HTML contenido en napoleon.html (contenido que fue leído vía AJAX) y lo coloca dentro de la celda que tiene en su atributo ID el valor ‘resultado’. ¿Cómo? Pues muy sencillo: el atributo .html() sirve para reemplazar el contenido de un elemento HTML. Nuestro <td id="resultado"> tenía originalmente el texto “Esperando…“, y ahora será reemplazado por lo que el AJAX fue a leer al archivo napoleon.html.

Listo, nuestro AJAX está listo. Como decía anteriormente, las últimas dos lineas nos sirven para cerrar las llaves y paréntesis que dejamos abiertas. En futuros artículos, mostraré la forma de trabajar con AJAX para realizar tareas que por otros medios tienden a complicarse un poco. Para practicar y observar como cambia el contenido con el segundo botón, repetiremos el procedimiento con otro archivo receptor que para el ejemplo, contiene la biografía de Michael Jackson. Al final, también pueden encontrar el enlace para descargar el ejemplo.

 $('#dos').click(function(){
    $.get('jackson.html',function(respuesta){
        $('#resultado').html(respuesta);
    });
});

Descargar el ejemplo

Entradas relacionadas

• 18/09/2009 -- Combos encadenados usando AJAX (jQuery) (11)
• 14/11/2009 -- JSON para principiantes (11)
• 27/08/2009 -- Introducción a jQuery (12)
• 21/08/2009 -- Galería simple con CSS y jQuery (2)
• 01/03/2010 -- Datos duplicados al actualizar (3)