Carga asíncrona de contenido HTML mediante Ajax

Carga asíncrona de contenido HTML en un objeto mediante una llamada AJAX a una URL.

Insertar este código en un archivo .js que esté referenciado en la cabecera de la página:

function FactoryXMLHttpRequest()
{
  if(window.XMLHttpRequest) {
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    var msxmls = new Array(
                   'Msxml2.XMLHTTP.5.0',
                   'Msxml2.XMLHTTP.4.0',
                   'Msxml2.XMLHTTP.3.0',
                   'Msxml2.XMLHTTP',
                   'Microsoft.XMLHTTP');

    for (var i = 0; i < msxmls.length; i++) {
      try {
        return new ActiveXObject(msxmls[i]);
      }
      catch (e) {}
    }
  }
  throw new Error("Could not instantiate XMLHttpRequest");
}

function Asynchronous()
{
  this._xmlhttp = new FactoryXMLHttpRequest();
}

function Asynchronous_call(url, id)
{
  var instance = this;
  this._xmlhttp.open('GET', url, true);
  this._xmlhttp.onreadystatechange = function() {
  switch(instance._xmlhttp.readyState) {
    case 1:
      instance.loading();
      break;

    case 2:
      instance.loaded();
      break;

    case 3:
      instance.interactive();
      break;

    case 4:
      instance.complete(instance._xmlhttp.responseText, id);
      break;
    }
  }
  this._xmlhttp.send(null);
}
function Asynchronous_loading() { }
function Asynchronous_loaded() { }
function Asynchronous_interactive() { }
function Asynchronous_complete(responseText, id) { }

Asynchronous.prototype.loading = Asynchronous_loading;
Asynchronous.prototype.loaded = Asynchronous_loaded;
Asynchronous.prototype.interactive = Asynchronous_interactive;
Asynchronous.prototype.complete = Asynchronous_complete;
Asynchronous.prototype.call = Asynchronous_call;

Esto son las funciones que se ocupan de la petición asíncrona al servidor utilizando el objeto AJAX XMLHttpRequest.

Notas: las principales ventajas que aporta este código son:

• está escrito siguiendo un patrón de diseño orientado a la generación de instancias del objeto XMLHttpRequest (Factory pattern), lo que da soporte cross-browser
• utiliza solicitudes asíncronas (asynchronous requests) para evitar el bloqueo del navegador

Después, en la página en la que vayamos a querer cargar el contenido extraído (pe. de una base de datos) de forma asíncrona habremos de colocar la función que llama a la url:

var asynchronous = new Asynchronous();
asynchronous.complete = function(responseText, id) {
  document.getElementById(id).innerHTML = responseText;
}

/* Carga el contenido HTML que devuelve la URL solicitada en el elemento con ID indicado */
function load_content(url, id)
{
  var responseItem = document.getElementById(id)
  //alert( responseItem.id + ' - ' + (responseItem.innerHTML=="") + ' - ' + responseItem.style.display) //debug

  if ((responseItem.innerHTML=="") || (responseItem.style.display=='none')) {
   responseItem.style.display='block'; //muestra el elemento, por si estuviera oculto

   if (responseItem.innerHTML=="") {
     responseItem.innerHTML = '<img src="images/ico_loading.gif" align="absmiddle"/> cargando pregunta...';
     asynchronous.call(url, id)
   }
  }
  else {
   responseItem.style.display='none';
  }
}

La URL será una página sencilla que haga todo el trabajo de consultar a la base de datos y devolver los datos en un formato HTML que la función load_content pueda insertar fácilmente y de forma asíncrona en nuestra página de destino.

Si quisieramos cargar un documento XML entero (o un nodo) tendríamos que sustituir la línea con la llamada responseItem.innerHTML = '...' por algo así como:

dom.loadXML(objXMLHTTP.responseText);
document.getElementById('id').innerText = dom.selectSingleNode('nombre_nodo').text;

Finalmente en el elemento de la página que quisieramos que disparara la carga asíncrona pondríamos la llamada a la función anterior. Uno (de entre muchas formas de responder al evento) sería:

<a href="javascript: load_content('url_peticion', 'id_elemento_destino')">texto del enlace</a>

Notas:

• el archivo ico_loading.gif hace de imagen que muestra el progreso, se puede poner cualquier cosa
• el parámetro url será la URL de una página que haga todo el trabajo de consultar a la base de datos y devolver los datos en un formato HTML que la función load_content pueda insertar fácilmente y de forma asíncrona en el elemento con identificador id en nuestra página de destino.
• código probado en IE 6 y 7 y Firefox 2.0