AJAX

AJAX es una técnica de de desarrollo web, por la cual se pueden crear aplicaciones web más rápidas y cómodas para el usuario. Por medio de esta técnica el cliente puede interactuar con el servidor de manera asíncrona, actualizando el contenido de las páginas sin necesidad de volver a cargarlas.

Esta técnica, no solo es más cómoda y amigable para el usuario (ya que se asemeja a las aplicaciones de escritorio) sino que además, si es correctamente utilizada, puede llegar a ser más rápida porque cada vez que se necesita actualizar un dato en una página no es necesario recargarla nuevamente (solo se recarga la sección necesaria de la misma).

AJAX, no es una tecnología en si, sino que es un conjunto de tecnologías aplicadas de manera que logran el resultado explicado anteriormente (es decir, logran AJAX).

AJAX significa Asynchronous JavaScript And XML, y como su nombre lo indica, se trata de la combinación de JavaScript y XML. Básicamente, JavaScript hace una petición (request) al servidor, el mismo le devuelve una respuesta (response) en XML, y ésta es procesada por JavaScript para actualizar los datos de la página, sin tener que recargarla por completo (logrando así una interacción asíncrona entre el servidor y el cliente).

Cómo funciona Ajax

Para poder utilizar AJAX, es necesario conocer bien el protocolo HTTP y saber algo de JavaScript y XML. Pero si se quiere explotar AJAX al máximo, es necesario conocer otras cosas como XHTML, CSS, XSLT, DOM, JSON, etc.

Para entender cómo funciona AJAX, primero vamos a hacer un sintético repaso de cómo funcionan las aplicaciones web “tradicionales”.

1. El cliente le hace una HTTP request al servidor web (generalmente por medio de un browser).
2. El servidor web, procesa la request y devuelve una HTTP response (que generalmente contiene contenido HTML para que el browser luego muestre al usuario).
3. Por medio de esa página generalmente el ciclo vuelve a empezar, ya que el cliente puede hacer otras HTTP requests al servidor (a través de links presentes en la página, imágenes, etc.).

Así es como funciona una aplicación web sin AJAX, ahora vamos ver cómo funcionan con AJAX.

Con AJAX, cuando el cliente hace una HTTP request al servidor, la hace por medio de JavaScript (lenguaje client-side). El servidor procesa la request y en vez de devolverle al cliente una página HTML, le devuelve un resultado en XML (no necesariamente, pero generalmente en XML), que es procesado por JavaScript, y este actualiza sólo las secciones de la página necesarias (sin tener que cargar una nueva página). Repasemos entonces:

1. El cliente por medio del browser produce algún evento. Este evento (como hacer click en un link por ejemplo) es procesado por JavaScript (o alguna otra tecnología client-side) y le envía al servidor web una HTTP request.
2. El servidor web, procesa la petición como siempre y le devuelve una response con el resultado en XML.
3. Este resultado es procesado por JavaScript, que recarga las secciones de la página necesarias para mostrar el resultado al usuario.
4. Por medio de esta misma página, el ciclo comienza de nuevo. Sin haberse tenido que recargar la página.

El objeto XMLHttpRequest

El objeto XMLHttpRequest es un elemento fundamental para la comunicación asíncrona con el servidor. Este objeto nos permite enviar y recibir información en formato XML y en general en cualquier formato (como vimos en el ejercicio anterior retornando un trozo de archivo HTML)

La creación de un objeto de esta clase varía si se trata del Internet Explorer de Microsoft, ya que éste no lo incorpora en JavaScript, sino que se trata de una ActiveX:

if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

En cambio en FireFox y otros navegadores lo incorpora JavaScript y procedemos para su creación de la siguiente manera:

if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();

Como hemos visto en el problema anterior, siempre implementaremos una función que nos retorne un objeto XMLHttpRequest haciendo transparente el proceso en cuanto a navegador donde se esté ejecutando:

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

Es decir, la función crearXMLHttpRequest se encargará de retornarnos un objeto de la clase XMLHttpRequest.

Las propiedades principales del objeto XMLHttpRequest son:

• onreadystatechange: Almacena el nombre de la función que se ejecutará cuando el objeto XMLHttpRequest cambie de estado.
• readyState: Almacena el estado del requerimiento hecho al servidor, pudiendo ser:
  • No inicializado (el método open no a sido llamado)
  • Cargando (se llamó al método open)
  • Cargado (se llamó al método send y ya tenemos la cabecera de la petición HTTP y el status)
  • Interactivo (la propiedad responseText tiene datos parciales)
  • Completado (la propiedad responseText tiene todos los datos pedidos al servidor)
• responseText: Almacena el string devuelto por el servidor tras haber hecho una petición.
• responseXML: Similar a la anterior (responseText) con la diferencia que el string devuelto por el servidor se encuentra en formato XML.

Los métodos principales del objeto XMLHttpRequest son:

• open: Abre una petición HTTP al servidor.
• send: Envía una petición al servidor.

Método Open: Paso de parámetros por método GET

Para indicar cual es el método de envío de los datos al servidor lo hacemos en el primer parámetro del método open del objeto XMLHttpRequest:

conexion1.open('GET','pagina1.php?puntaje='+voto+'&nombre='+nom, true);

En este ejemplo vemos cómo indicamos que el envío de los datos se hace por el método GET. Si lo hacemos de esta forma tenemos que tener mucho cuidado en la codificación del segundo parámetro del método open donde indicamos el nombre de la página a pedir.

Seguido al nombre de la página debe ir el signo de interrogación, el nombre del parámetro, luego un igual y el valor del parámetro. En caso de haber más de un parámetro debemos separarlos mediante el carácter ampersand.

Por último el tercer parámetro del método open normalmente se pasa el valor true indicando que el requerimiento de la página es asíncrona (esto permite al visitante continuar interactuando con la página sin que se congele hasta llegar la solicitud)

Método Open: Paso de parámetros por método POST

El método POST se utiliza cuando hay que enviar mucha información al servidor. Hay varios puntos a tener en cuenta para cuando codificamos los datos para el envío por el método POST: Cuando llamamos al método open del objeto XMLHttpRequest como primer parámetro indicamos el string 'POST'

conexion1.open('POST','pagina1.php', true);

Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.

conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

Llamamos al método send del objeto XMLHttpRequest pasando los datos:

conexion1.send("nombre=juan&clave=z80");

Podemos concatenar datos extraídos de un formulario y enviarlos a través del método send.

JSON

JSON es un subconjunto del lenguaje javascript que se basa en la construcción de una lista ordenada de valores, listas de objetos, etc. que pueden incluir a su vez tablas hash, objetos con una colección de pares nombre/valor, etc.

Conexión con Ajax mediante prototype

El procedimiento eval('') de javascript puede acarrear posibles problemas de seguridad si la fuente de la que obtenemos la cadena a evaluar no es segura, puesto que lo evalúa sin llevar a cabo un parseo, esto es, sin comprobar la estructura del objeto JSON. Si dentro de la cadena se introduce una instrucción javascript será ejecutada. La librería Prototype.js integra JSON desde dos puntos de vista:

• convierte "objetos" javascript en objetos JSON, mediante el uso del método Object.toJSON.
• parsea cadenas evaluándolas en objetos JSON, mediante el uso del método String.evalJSON

La función evalJSON sustituye al procedimiento nativo eval('') e implementa el paso de un parámetro que fuerza una comprobación previa del contenido de la cadena en busca de código ejecutable o malicioso, el parámetro se inicializa a true, con lo que la comprobación se realiza por defecto. En caso de encontrar algún código ejecutable lanza un SyntaxError.

Recursos útiles

Documentación y referencias:

• Ajax: A New Approach to Web Applications: el artículo en el que se acuñó por primera vez el término AJAX y en el que se explica su funcionamiento básico.
• Documentación de referencia sobre el objeto XMLHttpRequest

Noticias y actualidad:

• Ajaxian: el blog más popular dedicado al mundo AJAX.

Librerías y frameworks:

• Prototype: el primer framework de JavaScript/AJAX de uso masivo.
• script.aculo.us: la librería basada en Prototype más utilizada.
• jQuery: la librería de JavaScript que ha surgido como alternativa a Prototype.

Otras utilidades:

• Ajaxload: utilidad para construir los pequeños iconos animados que las aplicaciones AJAX suelen utilizar para indicar al usuario que se está realizando una petición.
• MiniAjax: decenas de ejemplos reales de aplicaciones AJAX listas para descargar (galerías de imágenes, reflejos para imágenes, formularios, tablas reordenables, etc.)