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.

Dejar un comentario?

16 Comentarios.

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

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

  3. ¿Qué bibliotecas para trabajar con AJAX recomendais? ¿Alguna en concreto destaca sobre las otras según vuestra experiencia?

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

  5. Javier, muy claro el post … pero yo al código en javascript le agrego esto para que funcione ok en todos los navegadores.

    Va … en realidad cuando escribí mi post, hace ya bastante, había que hacerlo de esa manera, tal vez ahora funque en todos igual.

  6. Patricio: En el javascript del ejemplo también está contemplada la incompatiblidad de Internet Explorer.

    Lamentablemente,la misma sigue existiendo, aún en Internet Explorer 7.

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

  8. Buenisimo el artículo.

    Me sirvió para algunas cosas que andaba haciendo, además de darme una idea bastante clara de algunos conceptos.

  9. Excelente blog, quisiera saber si esta disponible en formato cgi para usarlo en mi web

  10. Hola gente, como esta¿ de hehco q el ejemplito es bueno, no lo dudo..pero porque en php??? …lo hubieses hecho en c# .. ahora me encargare de eso

  11. hola como estan??… me gustaria saber como yo retornaria el valor a un text field
    porfis se lo agradeceria

  12. hola amigos!
    os dejo un FORO DE JAVA en español, donde pueden bajar manuales, tutoriales, donde hay ofertas laborales y lo mejor: responden a todas tus dudas en tiempo y forma

    http://www.forodejava.com

    suerte

  13. Includes complete systems as well as separate components. ,

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

  15. Tanta discusion por el ajax (me suena a equipo de futbol holandes)
    aguante el gwbasic

Deje un comentario

NOTA - Puede usar estosHTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>