Más notas sobre Ajax

Un resultado muy común en Internet al buscar información sobre Ajax

Como una nota adicional, podemos darnos cuenta que el nombre Asynchronous proviene precisamente de que en la práctica, Ajax es utilizado solo en modo asíncrono, por la ventaja que ya mencionamos.

Pero vayamos al primer ejemplo:

Nota: Ajax fue introducido en el navegador Internet Explorer como un ActiveX y se mantuvo así en sus versiones 5 y 6, siendo hasta la versión 7 que se incorporó de forma nativa por medio de la clase HttpXMLRequest (como lo hacen los navegadores Firefox, Safari y Opera), pero por motivos de compatibilidad con versiones obsoletas de Internet Explorer, en los ejemplos se consideraran ambos casos.

Para nuestro primer ejemplo, supongamos que en un servidor Web tenemos un archivo de texto al que deseamos acceder, llamado lista.txt, que contiene una lista de nombres como la que aparece a continuación:

Juan Rulfo
Octavio Paz
Pablo Neruda
Miguel de Cervantes Saavedra
Jorge Luis Borges

Para hacer la prueba de manera local es necesario contar con un servidor Web funcionando en nuestro sistema, una buena opción es el servidor Apache, que pueden instalar utilizando un paquete como el AppServ, el cual en lo personal me gusta mucho porque además ya trae consigo el CGI de PHP, el servidor MySQL y el phpMyAdmin.

Entonces implementaremos un programa en Javascript que nos permita acceder a este archivo por medio de Ajax, y desplegarlo en nuestro navegador. Para ello crearemos un archivo HTML que contenga el siguiente código:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Obtener lista de autores con Ajax</title>
<script type="text/javascript">
function descargaArchivo() {
  // Obtener la instancia del la clase XMLHttpRequest
  if(window.XMLHttpRequest) {
    peticionHttp = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {
    peticionHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // Preparar la funcion de respuesta
  peticionHttp.onreadystatechange = muestraContenido;
  // Realizar peticion HTTP
  peticionHttp.open('GET','http://localhost/lista.txt',true);
  peticionHttp.send(null);

  function muestraContenido() {
    if(peticionHttp.readyState == 4) {
      if(peticionHttp.status == 200) {
        alert(peticionHttp.responseText);
      }
    }
  }
}
window.onload = descargaArchivo;
</script>
</head>
<body></body>
</html>

Ahora analicemos el código Javascript, primero tenemos la función descargaArchivo donde ocurrirá todo el proceso, dentro de ésta encontramos dos condiciones:

if(window.XMLHttpRequest) {
peticionHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
peticionHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

En estas instrucciones comprobamos si el navegador que estamos usando posee la clase HttpXMLRequest de forma nativa o si lo hace por medio de un ActiveX -en el caso de los navegadores obsoletos-, ésta comprobación la realizamos por motivos de compatibilidad como habíamos indicado en un principio. En ambos casos se crea un objeto llamado peticionHttp que es una instancia de la clase XMLHttpRequest, este objeto se encargará de llevar a cabo la petición asíncrona del recurso -en este caso el archivo de texto lista.txt- a nuestro servidor Web.

peticionHttp.onreadystatechange = muestraContenido;

Éste bloque del código le indica al objeto peticionHttp que una vez que el servidor Web envíe la respuesta la función muestraContenido sea ejecutada.

peticionHttp.open('GET', 'http://localhost/lista.txt', true);
peticionHttp.send(null);

En estas dos lineas de código es donde por fin vemos funcionar a Ajax, la primera instrucción crea una petición HTTP al servidor Web por medio del método open, donde por medio de los parámetros se indica que la petición es de tipo GET, la URL solicitada es http://localhost/lista.txt y el tercer parámetro que vale true determina que la petición será asíncrona. En la segunda línea se indica que no se enviaran datos al servidor Web junto con la petición, al establecer el valor null en el método send. Al ser ésta una petición asíncrona el navegador no se quedará congelado en espera de que el servidor Web responda, por lo que después de estas líneas podría seguir código adicional que continuaría ejecutándose, y más importante aún es que con Ajax el usuario podrá seguir utilizando los componentes de la página Web, mientras se realiza la respuesta del servidor.

function muestraContenido() {
  if(peticionHttp.readyState == 4) {
    if(peticionHttp.status == 200) {
    alert(peticionHttp.responseText);
    }
  }
}

Como dijimos ésta función se ejecutara en el momento en el que el objeto peticionHttp reciba unas respuesta del servidor Web, primero se confirma que se haya recibido la respuesta con la propiedad readyState, después se confirma que sea una respuesta válida y correcta -comprobando si el código de estado HTTP devuelto es igual a 200-, y finalmente se muestra el contenido de la respuesta recibida -en este caso el contenido del archivo lista.txt- en la pantalla con la función alert que despliega la propiedad responseText.

window.onload = descargaArchivo;

Esta última instrucción será ejecutada en cuanto el navegador procese nuestra página HTML, la cual le indica al navegador que al iniciar la carga del contenido ejecute la función descargaArchivo.

Al llevar a cabo la prueba de nuestra primera aplicación con Ajax, debemos obtener un resultado en la pantalla del navegador como el que aparece a continuación:

La cabaña del eremita Web

viernes, 23 de enero de 2009