lunes, 19 de noviembre de 2012

Técnicas de programación web: AJAX

Voy a empezar con este artículo una serie sobre las distintas técnicas de programación web que son necesarias hoy en día para desarrollar un sito web: PHP, HTML, CSS, JavaScript, AJAX, JSON, XML, jQuery... Hoy hablaré de AJAX: ¿Qué es? ¿Para que sirve? ¿Como se utiliza?

La Wikipedia nos dice que AJAX es un acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML) y que es un técnica de desarrollo web usada para crear sitios web interactivos o RIA (Rich Internet Applications). También que AJAX es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. ¿Pero para que sirve? Veamos algunos ejemplos.

Ejemplos de uso de AJAX.

Hay muchas las situaciones en las que es conveniente usar AJAX pero las más clara es cuando tenemos un formulario en el que las opciones de un cuadro de selección depende del valor seleccionado en otro. Por ejemplo provincias y municipios: Al seleccionar una provincia en el primer cuadro cargaremos los municipios de esa provincia en el segundo cuadro. Otro ejemplo sería marca y modelo (de coches, de ordenadores, de electrodomésticos, etc.)

Otro ejemplo claro de uso de AJAX es cuando los datos que queremos enseñar al usuario tardan más de 1 segundo en cargarse. Para no tener al usuario esperando con una pantalla en blanco, cargaremos la pantalla de la aplicación con su menú y los demás elementos y añadiremos un mensaje tipo "por favor espere" y un GIF animado tipo reloj de arena o similar. Una vez hecho esto usaremos AJAX para cargar los datos en segundo plano y los mostraremos cuando estén listos.

¿Como funciona AJAX?

AJAX es una técnica de programación que usa el lenguaje JavaScript y un objeto XMLHttpRequest para establecer una conexión en segundo plano con el servidor desde el lado del cliente. XMLHttpRequest es un objeto disponible en la mayoría de navegadores web existentes, aunque en cada uno la implementación es diferente, que permite establecer una conexión HTTP o HTTPS con un servidor web.

La secuencia de uso es la siguiente:

  1. Se crea el objeto XMLHttpRequest. En cada navegador es diferente. Lo veremos más adelante.

  2. Se preparan los parámetros de la llamada al servidor: método (GET, POST), URL destino, argumentos, etc. Los mismos parámetros que cualquier otra llamada HTTP o HTTPS.

  3. Se realiza la llamada HTTP o HTTPS al servidor usando el objeto XMLHttpRequest.

  4. El servidor recoge la solicitud HTTP o HTTPS como cualquier otra y la procesa, generando un resultado, el cual puede ser código HTML, XML, JSON, texto plano o cualquier otro formato que quiera el programador. Siguiendo con el ejemplo de las provincias y municipios, la respuesta del servidor podría ser una simple lista de municipios separadas por comas.

  5. El objeto XMLHttpRequest recoge el resultado del servidor actúa en consecuencia, modificando el aspecto de la página web de forma dinámica mediante el uso de Javascript y DOM (Document Object Model). En el ejemplo de las provincias y municipios, recogería la lista de municipios separados por comas y cargaría el cuadro de selección con esos valores.

Creación del objeto XMLHttpRequest.

Ya he comentado que el objeto XMLHttpRequest es diferente en los distintos tipos de navegadores (Internet Explorer, Mozilla Firefox, Google Chrome, ...). Con el tiempo y la ayuda de Internet he ido desarrollando una función que me ayuda a crear el objeto XMLHttpRequest en todos ellos. En Google se pueden encontrar decenas de funciones con el mismo propósito, todas ellas muy similares. Esta está creada a partir de la adaptación de varias de ellas.

function createXMLHttpRequest() {

  var http_request = null;
  if(window.XMLHttpRequest) {

    // Mozilla, Chrome, etc.
    http_request = new XMLHttpRequest();
    if(http_request.overrideMimeType) {
      http_request.overrideMimeType("text/xml");
    }
  }
  else if(window.ActiveXObject) {

    // IE
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e) {

      try {
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e) {}
    }
  }

  if(!http_request) {
    return null;
  }

  return http_request;
}

La función createXMLHttpRequest() devuelve el objeto XMLHttpRequest del navegador o bien devuelve NULL si no puede crearlo.

Preparación de argumentos y llamada HTTP.

var http_request = createAjaxObject();

function makeAjaxCall(url) {

  if(http_request == null) {
    return false;
  }

  http_request.onreadystatechange = ajaxResponse;
  http_request.open("GET", url, true);
  http_request.send(null);
  return true;
}
  • La función makeAjaxCall() prepara los parámetros del objeto XMLHttpRequest y realiza la llamada HTTP/GET.

  • El parámetro url será la URL destino. Por ejemplo podría ser algo similar a: "http://www.midominio.com/ajax/cargarmunicipios.php?provincia=08".

  • ajaxResponse() es el nombre de la función JavaScript que procesará la respuesta del servidor a la petición HTTP.

Procesamiento asíncrono del resultado.

function ajaxResponse() {

  // Validación de que haya un objeto AJAX
  if(!http_request)
    return;

  // Esperamos la respuesta correcta
  if(http_request.readyState != 4)
    return;

  // Página no disponible o URL erronea
  if(http_request.status != 200)
    return;

  // Obtención de la respuesta AJAX.
  var text = http_request.responseText;
  if(!text)
    return;

  // Aquí ya tenemos el resultado en la variable text
  // (...)
  • http_request.readyState almacena el estado de la solicitud HTTP: 0=No iniciado; 1=Cargando; 2=Cargado, 3=Datos parciales, 4=Completado. Sólo hay que tener el cuenta las respuestas con estado 4. Los otros estados pueden usarse para controlar que el proceso funciona correctamente.

  • http_request.status almacena el estado de la respuesta de la solicitud HTTP: 200=Correcto; 404=No encontrado, 500=Error de servidor, etc. La documentación completa de códigos de retorno HTTP puede consultarse en la Wikipedia.

  • http_request.responseText almacena el texto de respuesta de la solicitud HTTP. Dicha respuesta puede ser un texto plano, código HTML, código XML, código JSON, o incluso cualquier tipo MIME.

No hay comentarios:

Publicar un comentario