XMLHttpRequest y XML

Aún tengo muchas dudas con AJAX especialmente en la parte que gestiona los XML. Para intentar aclararme me he propuesto hacer un ejemplo comparativo para recuperar y cargar en el DOM documentos XML y/o HTML. Tengo estos documentos de prueba que puede también leer directamente con el navegador:

• prueba.xml, un XML sin espacios de nombres (namespaces).
• parque.xml, otro XML con espacios de nombres que ya había usado como ejemplo en el Glosario XHTML+CSS.
• html.html, un documento HTML-4.01 que es servido con el tipo de contenido text/html.
• xhtml.html, un documento XHTML-1.0 que es servido con el tipo de contenido text/html.
• xhtml.xhtml, un documento XHTML-1.0 que es servido con el tipo de contenido application/xhtml+xml (este no se abre con IE8 o anterior).

Los documentos de ejemplo HTML son los que había usado en el artículo que habla de las diferencias entre HTML y XHTML, en el apartado de Diferencias en la presentación XHTML.

Con responseXML podemos cargar en el DOM del navegador los nodos de un XML. Luego podemos acceder a ellos por ejemplo con el método getElementsByTagName(tag), childNodes, firstChild, etc. Otros métodos usuales como getElementById() me dan algunos problemas. Pero también existe la posibilidad de usar XPath que es otra forma de seleccionar nodos. Sin embargo no he podido aclararme puesto que los navegadores actuales no se comportan igual. Navegadores actualizados que uso hoy 3 septiembre 2011: Internet Explorer 8.0 (IE), Firefox 6.0 (FF), Google Chrome 13.0 (CH), Safari 5.0 (SA) y Opera 11.51 (OP). Aún no tengo instalado Windows 7 por lo que no puedo probar esto en IE9.

Un objeto para gestionar XML: objHttp

He creado el módulo JavaScript gestor-xml.js que maneja un objeto que denomino objHttp con los siguientes objetivos:

1. Crear objetos basados en XMLHttpRequest para cargar documentos XML.
2. Seleccionar nodos con los métodos del DOM y también con XPath. Unificar distintos comportamientos de los navegadores para el método getElementById() así como los selectNodes() y selectSingleNode() de XPath.
3. Unificar el comportamiento ante los espacios de nombres, especialmente con los espacios de nombres por defecto (llamados a veces espacios de nombres nulos).

Luego hacemos una prueba seleccionando nodos y comprobando su correcto funcionamiento. Con documentos XML servidos como text/xml es suficiente cargar el responseXML del objeto XMLHttpRequest. Pero para documentos text/html y application/xhtml+xml la cosa se complica. Para IE uso una carga alternativa en el objeto ActiveXObject("msxml2.DOMDocument.6.0") a partir del responseText del XMLHttpRequest. Para otros navegadores cargo ese texto en el DOMParser. Ambos permiten cargar en el DOM los nodos de un literal de texto XML. Los resultados se muestran en la siguiente tabla, que se actualizarán con el botón, pudiendo recargar los objetos con alternativas o forzando a que sólo use XMLHttpRequest. En la cabecera de este documento podemos encontrar este script:

var docs = new Array();
var urls = new Array("ejemplos/prueba.xml", "ejemplos/parque.xml", "ejemplos/html.html",
        "ejemplos/xhtml.html","ejemplos/xhtml.xhtml");
function recargarObjetos(){
    var alternativas = !document.getElementById("alterna").checked;
    for (var i=0; i< urls.length; i++){
        docs[i] = new objHttp(urls[i], alternativas);
        docs[i].ejecutaEventoListo = function (){
            if (docs[0].cargado && docs[1].cargado && 
            docs[2].cargado && docs[3].cargado &&
            docs[4].cargado) llenarPruebas();  
        }
        docs[i].crear();
    }
}

function llenarPruebas() {
    var noFunciona = '<span class="rojo">No funciona</span>';

    //objeto cargado
    for (var i=0; i<docs.length; i++){
        document.getElementById("t0-" + i).innerHTML = docs[i].objetoXml;
    }
    ...
}

Se trata de construir los cinco objetos con new objHttp(urls[i], alternativas), sobreescribir el método docs[i].ejecutaEventoListo para que empiece a llenar la tabla cuando los cinco estén cargados y finalmente crear los objetos. La función llenarPruebas() es la que rellena la tabla.

Tabla de resultados XML cargado con XMLHttpRequest, msxml2.DOMDocument.6.0 o DOMParser

Comparativo de soportes XML

A raíz de los resultados anteriores en los navegadores que he usado, llego a la siguiente conclusión de nivel de soporte con estas versiones de navegadores Internet Explorer 8.0, Firefox 6.0, Google Chrome 13.0, Safari 5.0 y Opera 11.51:

Por lo tanto si estamos trabajado con XML servidos como text/xml es suficiente con usar el responseXML del XMLHttpRequest. Pero si esos XML tienen espacios de nombres o bien queremos manejar un documento HTML o XHTML, ya no es suficiente con esto. Hay preguntas que yo sinceramente no sabría responder cuando manejamos estos HTML como árboles de nodos, o incluso para los XML cuando hay uno o más espacios de nombres:

• ¿Porqué IE no acepta un DOCTYPE en los documentos xhtml.html y xhtml.xhtml?
• ¿Porqué IE no trabaja con el espacio de nombres por defecto xmlns="http://www.w3.org/1999/xhtml" de esos documentos?
• ¿Porqué IE en cambio si funciona si modificamos ese espacio de nombres a xmlns:="http://www.w3.org/1999/xhtml"?
• ¿Porqué el resto de navegadores tienen problemas con los espacios de nombres por defecto, especialmente usando XPath?. Para estos navegadores (FF,SA,CH,OP) XPath se consigue con el método evaluate(). Pero sólo he podido hacerlo funcionar con espacios de nombres por defecto modificándolo. Por ejemplo, con xmlns="http://www.w3.org/1999/xhtml" lo he convertido en xmlns:_="http://www.w3.org/1999/xhtml", de tal forma que el espacio de nombres por defecto es un guion bajo. Pero entonces las expresiones XPath deben contenerlo, por ejemplo: "_:parque/_:coche/persona:conductor".

Propiedades y métodos del objHttp

El constructor es new objHttp(archivo, alternativas=true, navegador="", mostrarErrores=true, metodo="GET", asincrono=true).

Variables globales

• constNodeType, function tipoNodo(numero): constantes y función que nos devuelve el nombre de un tipo de nodo.
• objetoResolver = null, function resolver(prefix): este objeto así como la función nos permitirán resolver los nombres de espacios para FF-CH-SA-OP.

Propiedades

• this.archivo: string para guardar el argumento del mismo nombre para usar en el método open() del XMLHttpRequest.
• this.alternativas: Booleano, valor por defecto true que permite usar otras alternativas como msxml2.DOMDocument.6.0 o DOMParser si fuera necesario. En otro caso sólo se usa el responseXML del XMLHttpRequest.
• this.mostrarErrores: booleano por defecto true. En producción quizás no interesa que se muestren esos errores.
• this.metodo: string por defecto "GET" para usar el método open() del XMLHttpRequest.
• this.asincrono: booleano por defecto true también para el open().
• this.nsOriginal, this.nsFinal: object inicialmente nulos que en caso de que existan espacios de nombres se les incluirán los mismos como propiedades de ese objeto.
• this.nsActivos, entero que indica el número de espacios de nombres activos pues con algún navegador si sólo existe un único espacio de nombres será eliminado.
• this.obj, una referencia al objeto XMLHttpRequest.
• this.text, string que contendrá el responseText de la respuesta.
• this.doc, un objeto que contendrá el responseXML o cualquiera de los resultantes de las alternativas msxml2.DOMDocument.6.0 o DOMParser.
• this.contentType, un string con el tipo servido: text/xml, text/html o application/xhtml+xml.
  En Diciembre 2013 he agregado la directiva AddDefaultCharset utf-8 al servidor Apache para que incorpore la codificación con el contentType. Ahora aparecerá text/html; charset=utf-8 para los tipos text/html. He modificado el script para adaptarlo a esto.
• this.navegador = queNavegador(), un string que nos dirá que navegador se está usando.
  En Diciembre 2013 he eliminado definitivamente la diferenciación por navegador de todos los JavaScript de este sitio. En el test observará que puede seleccionar manualmente el tipo de navegador pues no se realiza ninguna detección automática. Aunque el enlace anterior le lleva a un código del archivo donde se encuentra (general.js), sin embargo esa función ya no existe en el archivo original.
• this.objetoXml un string informativo de la alternativa usada.
• this.documentElement, una referencia al nodo raíz del XML.
• this.cargado: un booleano que nos dirá si la petición y la respuesta finalizaron y el XML fue cargado en el DOM.

Métodos

• this.crear(): después de aplicar el constructor con new ObjHttp(archivo) este método creará el objeto XMLHttpRequest, se encargará de hacer la petición y gestionará el evento onreadystatechange para cargar el XML.
• this.ejecutaEventoListo = function(){}: una declaración de función que puede ser sobreescrita externamente y que se ejecuta cuando se completa la petición y se recibe la respuesta.
• this.stringNs(cual): El argumento cual será "original" o "final". Los nombres de espacios están almacenados como propiedades de los objetos this.nsOriginal y this.nsFinal. Es a partir de este último donde se resuelven para la selección de elementos. Pero la única forma que conseguí para que funcione con FF-SA-CH-OP es forzando la creación de un objeto mediante eval("objetoResolver = {" + this.stringNs("final") + "};"). El objetoResolver es una variable global del módulo y por lo tanto hay que actualizarla cada vez que necesitemos resolver un nombre de espacio. Por lo tanto este método nos sirve para construir la cadena "ns1":"abc", "ns2":"def" y luego aplicar el eval().
• this.selectNodes(xpath[, enNodo]): selecciona nodos con XPath, pasándose la expresión y el nodo donde se aplicará. Si no se pasa éste se aplica al raíz.
• this.selectSingleNode(xpath[, enNodo]): selecciona el primer nodo de un conjunto de nodos que satisfaga la expresión.
• this.getElementsByTagName(tag): selecciona elementos por el nombre del nodo. Permite también pasar nodos con espacio de nombres como abc:def.
• this.getElementById(id): selecciona elementos por el atributo ID.