AJAX es uno de los términos de moda en el mundo de la Web 2.0 y las aplicaciones web. Como usualmente ocurre en estos casos, aparece rodeado de un manto de misterio y mucho palabrerío. ¿Es una tecnología? ¿un lenguaje? ¿una librería? Tratar de explicar qué es AJAX me recuerda a un pasaje de la película “The Matrix“:
Niño: No trates de doblar la cuchara, eso es imposible. En cambio, sólo trata de darte cuenta de la verdad.
Neo: ¿Qué verdad?
Niño: La cuchara no existe.
AJAX es simplemente una técnica, o mejor dicho, la combinación de varias técnicas. Si bien su nombre significa “JavaScript y XML asincrónicos“, no tiene necesariamente que ver con Javascript ni con XML. De ahí el título de este artículo.
Un ejemplo simple
Supongamos que tenemos el siguiente script escrito en PHP, para realizar la búsqueda de personas por apellido:
buscar.php
<?
$personas = array (
array ( "Javier", "Smaldone"),
array ( "John", "Smith"),
array ( "Santiago", "Lobos"),
array ( "Jorge", "Lobatto")
);
$apellido = $_POST['apellido'];
if ($apellido) {
$respuesta = '';
foreach ($personas as $indice => $persona) {
if (preg_match("/^$apellido/i", $persona[1]))
$respuesta .= "$persona[0] $persona[1]<br>";
}
if (!$respuesta)
$respuesta = "<i>No hay coincidencias con '$apellido'</i>";
print $respuesta;
}
?>
Como podemos apreciar, este script produce como salida la lista de personas cuyo apellido comienza con el valor de la variable apellido recibida desde el requerimiento HTTP. Dicha salida no es un documento HTML completo, sino solamente un fragmento (formateado con <br> y <i>). (Por simplicidad los datos de personas están almacenados en un arreglo, pero podrían también estar en una base de datos.)
Por otra parte, tenemos el siguiente archivo HTML:
buscar.html
<html>
<head>
<title>Personas</title>
<script type="text/javascript" src="buscar.js"></script>
</head>
<body>
<form name="formulario" onsubmit="return false">
<input type="text" name="apellido" autocomplete="off">
<input type="button" value="Buscar" onclick="JavaScript:buscar()">
</form>
<div id="resultado"></div>
</body>
</html>
Podemos ver que este el documento HTML incluye el archivo buscar.js que contiene código JavaScript. Además, el formulario no tiene una acción asociada (el evento onsubmit siempre devolverá falso, por lo cual nunca se “enviará“). En cambio, el botón “Buscar” tiene asociado al evento onclick una llamada a la función JavaScript buscar(). Debemos notar, además, que el documento contiene un div vacío cuyo identificador es resultado.
A continuación, el contenido de buscar.js:
buscar.js
function buscar() {
var form = document.forms['formulario'];
var resultado = document.getElementById("resultado");
var contenttype = 'application/x-www-form-urlencoded';var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open('POST', 'buscar.php', true);
req.setRequestHeader('Content-Type', contenttype);
req.onreadystatechange =
function() {
if (req.readyState == 4)
resultado.innerHTML = req.responseText;
}
req.send('apellido=' + escape(form.apellido.value));
}
La función buscar() recupera los objetos formulario (el formulario) y resultado (el div inicialmente vacío). Luego crea el objeto req, de clase HMLHttpRequest (o un controlador ActiveX del tipo Microsoft.XMLHTTP en caso del siempre incompatible Internet Explorer).
Los objetos de clase XMLHttpRequest permiten realizar requerimientos al servidor sin necesidad de tener que “recargar” toda la página. Una vez creado, se configura a req para llamar a buscar.php usando el método POST, con el Content-Type correspondiente al envío de un formulario (application/x-www-form-urlencoded). El valor “true” significa que se trata de un requerimiento asincrónico, permitiendo que continúe la ejecución del script aunque el mismo no haya finalizado (este es el “truco” que logra la sensación de interactividad).
Luego, se configura el objeto req mediante el método “onreadystatechange” para que al finalizar la ejecución del requerimiento se modifique el contenido del div resultado, asignándole el texto obtenido como respuesta del servidor (responseText). Esto se logra asociándole una función sin nombre, lo que usualmente se denomina “callback“.
Finalmente, se envía el requerimiento, asignando a la variable CGI apellido el valor del campo apellido del formulario.
Probemos a continuación la ejecución de este ejemplo:
El resultado es claro: la función JavaScript asociada al evento onclick del botón Buscar realiza la llamada a buscar.php, enviándole el valor de la variable apellido, y escribiendo en el div resultado la salida producida.
Podemos ir un poco más allá, asociando la función buscar() al evento onkeyup del campo de texto apellido. Este evento ocurre cada vez que se “levanta” una tecla (o sea, cuando se ha ingresado un nuevo caracter). De esta manera obtendremos un comportamiento más “interactivo“.
El código de buscar.html quedaría cómo sigue:
buscar2.html
<html>
<head>
<title>Personas</title>
<script type="text/javascript" src="buscar.js"></script>
</head>
<body>
<form name="formulario" onsubmit="return false">
<input type="text" name="apellido" onkeyup="JavaScript:buscar()" autocomplete="off">
</form>
<div id="resultado"></div>
</body>
</html>
Y el resultado sería el siguiente:
Si lo desea, puede descargar el ejemplo completo (también en formato ZIP).
Conclusión
Esto que hemos visto es AJAX. Si bien hemos utilizado JavaScript para realizar el requerimiento “asincrónico”, podríamos haber usado cualquier tecnología “client-side” (VBScript, JScript, etc.). Tampoco hemos usado XML para recibir el resultado desde el servidor (nuestro script buscar.php produce fragmentos de código HTML).
Un elemento muy importante (y que no forma parte de la sigla AJAX) es el DOM (“Document Object Model“). Se trata de una API que nos permite modificar dinámicamente un documento HTML. Hemos usado esto en nuestro ejemplo, para modificar el contenido del div resultado.
AJAX abre todo un mundo de posibilidades a la hora de construir aplicaciones web altamente interactivas pero, a pesar de toda la palabrería que se construye a su alrededor no es mucho más de lo que hemos podido apreciar en el simple ejemplo analizado.
Una aclaración importante: como podrá apreciarse, realizar una aplicación compleja que maneje una gran cantidad de elementos (botones, divs, opciones, etc.) y una gran cantidad de eventos, sería extremadamente complejo si lo hiciéramos como en nuestro ejemplo. Es por esto que para la utilización de todo el potencial de AJAX en una aplicación, deberá utilizarse alguna biblioteca destinada a tal fin, que genere las funciones JavaScript necesarias para el control de los eventos y la realización de los requerimientos asincrónicos. Existe una gran cantidad de herramientas de este tipo, disponibles para distintos lenguajes de programación.
Lecturas recomendadas en Wikipedia:
Finalmente, un listado de 10 bibliotecas para desarrollar aplicaciones usando AJAX.
Javier, estuve leyecdo tu articulo, esta simple y entendible, pero hay un aspecto que podria discutir, con respecto al DOM, no es un ‘elemento’, sino mas bien un API que sirve para el acceso y la manipulacion de datos a travez de nodos…
Estuve leyendo en la wiki q linkeaste, y como no me cerro la definicion, fui a la W3C… te dejo el link para que veas http://www.w3.org/TR/DOM-Level-2-Core/core.html ..
Saludos