MiniTutorial de AJAX. F. P. Marín. Física. Ciencias. UCV

Introducción

AJAX es una abreviatura de Asynchronous Javascript And XML y, básicamente, consiste en una combinación de diferentes técnicas que permiten actualizar una página WEB, o parte de ella, sin la necesidad de recargar esta.

Las técnicas son, entre otras, básicamente Javascript, CSS ( Cascade Style Sheet: Hoja de Estilos en Cascada ) y el DOM ( Document Object Model: Modelo de Objetos del Documento ). Una característica muy importante de ellas es que son GRATIS. Ud. no tiene que pagar por ellas, no tiene que "bajar" nada desde INTERNET, no tiene que instalar nada: Todo está contenido en su navegador. En otras palabras, la diversión es GRATIS:

Javascript permite, programáticamente, manipular la estructura de la página WEB.
CSS define la estructura de la página y tal estructura puede ser manipulada dinámicamente por Javascript.
El DOM permite el acceso a los diferentes marcadores de una página WEB. Tal acceso es realizado dinámicamente, por supuesto, con la ayuda de Javascript.

La popularidad de AJAX se basa en su capacidad de actualizar una página WEB sin recarga de ésta y sin perturbar las manipulaciones del usuario. Agreguemos que es completamente GRATIS.

El lector interesado en el tema no debe amilanarse por la presencia de las diferentes ténicas mencionadas aquí. Este minitutorial tiene el propósito de ser autocontenido y, a lo largo de él, construirá la base mínima necesaria para emprender nuevas aventuras con AJAX.

El lector interesado en profundizar las diversas técnicas puede consultar la multitud de tutoriales que existen en la WEB. Por ejm, http://www.w3schools.com es un buen punto de partida.

El lector habrá observado la preponderancia de Javascript en la introducción anterior. En realidad, el objeto básico en la implementación de AJAX es XMLHttpRequest el cual es suministrado por Javascript. Este objeto provee la conexión a un servidor.

Si ignoramos precauciones y similares, el código básico de AJAX sería tan simple como ( cuatro ( 4 ) instrucciones que incluyen un manejador de eventos ):

Conexion=new XMLHttpRequest();
Conexion.open("POST",servidor,true);

Conexion.onreadystatechange
=
function()
{
 if ( Conexion.readyState!=4 ) return;

 if ( Conexion.status==200 ) {
    // Aqui tomo las acciones necesarias
 } else // Posible mensaje de error
}

Conexion.send(null);

Recomendamos enfáticamente el uso de las especificaciones " standard " como se muestra en


http://www.w3.org/TR/XMLHttpRequest/

Los pasos básicos para establecer y ejecutar una conexión entre una página WEB y un programa que reposa en cierto servidor ( con el propósito de recibir alguna información que permita actualizar la página sin hacer una recarga de ella ) son ( estrictamente en ese orden ):

Establecer la conexión.
Preparar la conexión.
Establecer un manejador de eventos. Esto significa que se debe establecer un mecanismo que sea capaz de enterarse cuando la información requerida al servidor es recibida en forma satisfactoria y, en cuyo caso, tome las acciones necesarias para actualizar la página.
Enviar el requerimiento al servidor.

En los pasos siguientes, la construcción se hace a lo largo de un ejemplo que mas abajo mostraremos en forma unificada.

Estableciendo la Conexión

El código:

Conexion=new XMLHttpRequest(); // Establece conexion

asigna a la variable Conexion el objeto retornado de tipo XMLHttpRequest. La presencia de la variable Conexion es necesaria para las manipulaciones posteriores de la conexión. Diversos navegadores requieren inicializaciones especiales de tal manera que una inicialización correcta luce como

Conexion=false;

     if ( window.XMLHttpRequest ) Conexion=new XMLHttpRequest();
else if ( window.ActiveXObject )
        Conexion=new ActiveXObject("Microsoft.XMLHTTP");

Preparando la Conexión

El siguiente paso consiste en preparar la conexión a un servidor especificado. Ello se realiza, por ejm, con el siguiente código

Conexion.open("POST",servidor,true); // Prepara la conexion

El primer argumento ( en este caso: "POST" ) indica el método a seguir para establecer la conexión. Existen otros métodos pero ello no viene al caso por el momento.
El segundo argumento ( servidor ) indica el identificador del servidor al que queremos hacer algun requerimiento. Por ejm,
```
// Prepara la conexion
Servidor="http://www.elServidor.com/temperatura.out";
Conexion.open("POST",Servidor,true);
```
En este caso, temperatura.out es un programa, en el servidor www.elServidor.com, que envía alguna información hacia la página WEB que estableció la conexión.
El tercer y último argumento ( en este caso: true ) indica que la conexión entre la página WEB y el servidor se establece en forma no sincronizada ( asincrónica ). Ello significa que la página WEB no espera por la respuesta del servidor y el usuario puede continuar trabajando en ella sin advertir lo que ocurre tras bastidores ( entre la página WEB y el servidor).

Estableciendo un Manejador de Eventos

Una vez que se ha establecido y preparado la conexión se establece un manejador de eventos. El código siguiente cumple este papel:

// Establece a la funcion temperatura como el manejador de
// eventos: Un evento ocurre  "cuando el servidor envia una
// respuesta".

Conexion.onreadystatechange=temperatura;

En este ejemplo, temperatura es una función que puede ser definida, por ejm, por el siguiente código:

function temperatura()
{
 // En espera del valor 4 ( "respuesta enviada" )
 if ( Conexion.readyState!=4 ) return;

 if ( Conexion.status==200 )  // Si conexion HTTP es buena !!!
    document.getElementById("t").innerHTML
    =
    Conexion.responseText;
 else document.getElementById("t").innerHTML="No disponible";
}

El servidor envia valores sucesivos de readyState los cuales son 0, 1, 2, 3 y 4. El valor 4 corresponde al envio satisfactorio de la respuesta. Note que la función temperatura ignora los valores menores que 4 y procede a ejecutar el código de actualización de la página WEB cuando el valor 4 ha arribado. Antes de ello se asegura que la conexión HTTP es correcta. Ello corresponde al valor 200 para la variable status.

La repuesta del servidor es contenida en Conexion.responseText como texto ASCII ( digamos texto simple ). Existen otros formatos que corresponden a la respuesta recibida pero ello no nos atañe por el momento.

En la función temperatura, es claro que nuestro ejemplo actualiza la temperatura en una página WEB y ello ocurre en cierto elemento con la id definida por "t".

Enviando la Solicitud al Servidor

Ello se logra con el código:

// Finalmente, solicitamos una respuesta del servidor
Conexion.send(null);

El argumento de send se utiliza para enviar datos al servidor. En este caso, el valor null indica que la página no está enviando datos al servidor. En este ejemplo simple, solo esperamos la respuesta del servidor: ¡ La Temperatura Ambiente !.

Ensamblando el Ejemplo Anterior ( temperatura0.html )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AJAX: Temperatura Ambiente</title>
<script type="text/javascript">
<!--
Conexion=false; // Variable que manipula la conexion.

     if ( window.XMLHttpRequest ) Conexion=new XMLHttpRequest();
else if ( window.ActiveXObject )
        Conexion=new ActiveXObject("Microsoft.XMLHTTP");


function temperatura()
{
 // En espera del valor 4 ( "respuesta completa" )
 if ( Conexion.readyState!=4 ) return;

 if ( Conexion.status==200 )  // Si conexion HTTP es buena !!!
    document.getElementById("t").innerHTML
    =
    Conexion.responseText;
 else document.getElementById("t").innerHTML="No disponible";
 
 Conexion=false;
}


window.onload
=
function()
{
 if ( Conexion ) {
    // Preparacion.
    Servidor="http://www.elServidor.com/temperatura.out";
    Conexion.open("POST",Servidor,true);

    // Manejando eventos.
    Conexion.onreadystatechange=temperatura;

    // Solicitud al servidor.
    Conexion.send(null);                     
 } else document.getElementById("t").innerHTML="No disponible";
}
//-->
</script>
</head>
<body>
Temperatura Ambiente:&nbsp;<span id="t"></span> 
</body> 
</html>

Si el procesa resulta exitoso, el resultado en la página WEB lucirá como:

Temperatura Ambiente: 300 C

donde 300 C, por ejm, es retornado en Conexion.responseText. En caso contrario, luce como

Temperatura Ambiente: No disponible

En este ejemplo, el proceso de conexión se inicia tan pronto como la página WEB se carga y ocurre, por lo tanto una sola vez. Pero, supongamos que la temperatura necesita actualizarse un poco mas tarde a petición del usuario. En tal caso, es necesario proveer a este de un mecanismo que le permita realizar a voluntad tal acción. Por ejm, un botón ( button ) es una opción adecuada. Esto resume el propósito del siguiente ejemplo.

Modificando el Ejemplo Anterior ( temperatura1.html )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AJAX: Temperatura Ambiente</title>
<script type="text/javascript">
<!--
Conexion=false; // Variable que manipula la conexion.


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


function Solicitud()
{
 if ( Conexion ) return;  // Previene uso repetido del boton.

 Conectar();

 if ( Conexion ) {
   // Preparacion.
   var servidor="http://www.elServidor.com/temperatura.out";
   Conexion.open("POST",servidor,true);

   // Manejando eventos.
   Conexion.onreadystatechange=temperatura;

   // Solicitud al servidor.
   Conexion.send(null);                     
 }
}


function temperatura()
{
 // En espera del valor 4 ( "respuesta completa" )
 if ( Conexion.readyState!=4 ) return;

 if ( Conexion.status==200 )  // Si conexion HTTP es buena !!!
    document.getElementById("t").innerHTML
    =
    Conexion.responseText;
 
 Conexion=false;
} 


window.onload
=
function() 
{
 Solicitud(); // Inicializa la temperatura al cargar la pagina.

 /* Manejador de eventos "click"
    para el boton de actualizacion
 */
 document.getElementById("boton").onclick=Solicitud;
}
//-->
</script>
</head>
<body>
Temperatura Ambiente:
<span id="t">No disponible</span> 
<input type="button" id="boton" value="actualizar" />
</body> 
</html>

Si el procesa resulta exitoso, el resultado en la página WEB lucirá como:

Temperatura Ambiente: 300 C

donde 300 C, por ejm, es retornado en Conexion.responseText o corresponde a la penúltima actualización. En caso contrario, luce como

Temperatura Ambiente: No disponible

Métodos y Atributos

Hasta ahora solo nos hemos propuesto mostrar un ejemplo simple en la forma mas rápida posible con el propósito de mostrar al usuario la simplicidad del tema AJAX. Hemos obviado muchos detalles los cuales son asociados al objeto XMLHttpRequest. Tales "detalles" pueden ser clasificados como:

Métodos ( terminología OOP ) en forma similar a funciones que manipulan la conexión.
Atributos ( o propiedades o/y variables ) asociadas en forma de "variables" que proporcionan información a través de la conexión.

Métodos

Cada método está asociado a una instancia particular u objeto del tipo XMLHttpRequest. Por ejm, si tal instancia se denomina Conexion; un método como abort() es "llamado" para su ejecución como Conexion.abort(), etc...
Detalles sobre el funcionamiento minucioso de cada método puede ser revisado en
http://www.w3.org/TR/XMLHttpRequest/

abort(): Finaliza la solicitud actual ( la solicitud en proceso ).
getAllResponseHeaders(): Retorna todas las cabeceras ( headers ) como una cadena de caracteres de nombre ( name ) y valor ( value ).
getResponseHeader(cabecera): Retorna el valor de la cabecera ( header ) señalada en el argumento ( cabecera ).

open(metodo, url, noSincronizado, usuario, contraseña): Prepara una conexión, a la dirección url, la cual es requerida con el método metodo el cual puede adoptar alguno de los valores:
GET

POST

Los argumentos restantes son opcionales y tienen el significado de:

noSincronizado:

true: No sincronizado. Ello significa que la página WEB no es interferida en su funcionamiento por la respuesta del servidor. El usuario puede continuar usando la página mientras el servidor retorna una respuesta que la actualizará, usualmente, en forma parcial.

false: Sincronizado.

usuario: El nombre de usuario ( login ) en el servidor al que se le ha realizado una solicitud.

contraseña: La contraseña ( password ) del usuario en el servidor al que se le ha realizado una solicitud.
send(contenido): Realiza la solicitud al servidor. contenido puede ser:

Una cadena usual de caracteres ( texto ASCII )

o un objeto de tipo XML el cual puede ser manipulado de acuerdo al DOM.

Si no es necesario enviar contenido alguno, al único argumento de send se le asigna el valor null: Por ejm, send(null).
setRequestHeader(nombre, valor): Asigna valor valor a la cabecera especificada por nombre.

Atributo es usualmente referido en el contexto OOP como dato ( data, en inglés ) aunque, mas arriba, nos hemos referido a ello como variable. Esperamos que esta situación no cree confusión alguna.

Atributos

onreadystatechange: Representa una función ( manejador de evento ) que es invocada cuando readyState cambia.
readyState: Representa el estado del objeto responsable de la conexión. Puede tomar cualquiera de los cinco ( 5 ) valores:

0 ( No inicializado ): Es el valor inicial de readyState.

1 ( Abierto ): El método open ha tenido éxito.

2 ( Enviado ): Se ha completado la solicitud pero ningun dato ha sido recibido todavía.

3 ( Recibiendo ): Antes de recibir un mensaje body ( en caso que exista ). Todas las cabeceras ( headers ) HTTP han sido recibidas.

4 ( Respuesta Completa ): Todos los datos han sido recibidos.
responseText: Los datos recibidos cuando readyState toma los valores 3 o 4. En cualquier otro caso, es una cadena vacía de caracteres.
responseXML: Los datos recibidos como un objeto que implementa la interface de datos en el formato de estructura de datos XML cuando readyState toma el valor 4. Cuando readyState < 4, responseXML es null.
status: Representa ( como un entero sin signo ) el código del estado HTTP de la conexión con el servidor. 200 es el valor para una conexión exitosa. status debe estar disponible cuando readyState toma los valores 3 o 4.
statusText: Representa el texto del estado HTTP enviado por el servidor y es accesible despues de la aparición de status.

Referencias

W3C: World Wide Web Consortium.
Documentación de la clase XMLHttpRequest.
DOM : Modelo de Objetos del Documento ( Document Object Model ).
w3schools: Una variedad de tutoriales relacionados con INTERNET. Entre otros, ver:
- javascript
- CSS
- AJAX
- XML
Tutorial de AJAX por Brett McLaughlin ( IBM ).
XML
AJAX using XMLHttpRequest and Struts (pdf) por Frank W. Zammetti.

0 ( No inicializado ):	Es el valor inicial de readyState.
1 ( Abierto ):	El método open ha tenido éxito.
2 ( Enviado ):	Se ha completado la solicitud pero ningun dato ha sido recibido todavía.
3 ( Recibiendo ):	Antes de recibir un mensaje body ( en caso que exista ). Todas las cabeceras ( headers ) `HTTP` han sido recibidas.
4 ( Respuesta Completa ):	Todos los datos han sido recibidos.