AJAX no es AJAX

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:

Apellido:

 

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:

Apellido:

 

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 DOMDocument 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.

16 comentarios sobre “AJAX no es AJAX

  1. Gabriel:

    Gracias por tu comentario. Usé la palabra «elemento» en referencia a los componentes o tecnologías que intervienen en el ejemplo. Para que quede un poco más claro, reformulé la oración. Tampoco quise abundar ni profundizar en definiciones, para eso puse los enlaces.

    Gracias nuevamente.

  2. El problema de tu ejemplo y de tu articulo, es que no habla de Ajax, habla de un ejemplo… un ejemplo que en el mundo real… no existe.
    Nadie usaria un xmlhttprequest, eimplemente una vez hace un par de años ñop abstrajeron o adoptaron una libreria que lo abstraiga y a esta al abstrajeron.

    AJAX es la filosofia de hacer la mayor cantidad de cosas perdiendo la menor cantidad de tiempo de desarrollo y de ancho de banda.

    un ejemplo de ajax sin XML o sin Json es para la gilada.

    un ejemplo de ajax sin prototype (o similares) es un chiste.

    Devolver html en el request de la manera en que lo devolves no solo esta mal conceptualmente sino que es una horrible chanchada y va en contra de TODA la filosofia de AJAX

  3. Muy claro el artículo. Personalmente no estoy de acuerdo con el comentario de «Lipe».

    Para empezar, devolver HTML o texto plano como respuesta desde el servidor no es para nada un error conceptual; puedes verificar que quien dió nombre a esta técnica dejó bien claro que la información puede enviarse bajo cualquier estructura (si, incluso HTML), mas allá que cada uno entienda lo que AJAX implica a su manera.

    Por otro lado, si quisieramos enviar un dato al servidor para verificar su existencia en BD y retornar un booleano que indique el resultado (para dar un ejemplo cualquiera) ¿armarías una estructura XML para la comunicación servidor-cliente? No creo que resulte eficiente; y esto es un ejemplo del «mundo real».

    Y para finalizar (no quisiera extenderme demasiado), no me parece que AJAX sin Prototype o similares «sea un chiste», aunque en determinados desarrollos pueda simplificarnos la vida, quizá nos convenga 1º analizar un poco el sistema a construir y ver si tal vez en unas pocas líneas podemos tener la funcionalidad requerida y evitarnos lo 47k de esta librería y su interminable conjunto de funcionalidades que no llegaremos a utilizar (ojo, no digo que su utilización siempre sea mala).

    En fin, es cuestión de opiniones.
    Saludos, Daniel.

  4. Ajax me sigue pareciendo un kludge, un invento, algo atado con alambre.

    Por más que funcione (de hecho, uso GMail, la mayor aplicación AJax nunca creada, o por lo menos la más popular ;-), no me entusiasma a la hora de programar.

    Y una cosa que me mata,es la sobrepoblación de llaves {}

    ¡Qué simple y bello que era el REXX, en retrospectiva….!

    :-)

    Saludos
    FC

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *