Existen varios mecanismos para embeber documentos XML en páginas HTML, pero sólo Microsoft y su navegador IE (5 o superior) desarrollaron una característica denominada "islas de datos XML", que permitia insertar o enlazar documentos XML sin ayuda programática, simplemente utilizando la etiqueta xml y los atributos HTML "datasrc" y "datafld". Pero para implementar este mecanismo en modo compatible multinavegador es necesario recurrir a la nueva funcionalidad de html5 llamada "bloques de datos", con la cual, a partir de una etiqueta script se puede insertar contenido XML. (válido en IE9, Firefox, Opera,chrome, safari). Si se prefiere enlazar recursos XML externos, la opción disponible sin ayuda programática es utilizar la etiqueta object.
Una vez embebido el documento XML (enlínea o como recurso externo), se puede obtener de forma fácil una cadena de texto que represente dicho documento de marcas, pero lo realmente útil es su manipulación y procesamiento, y trabajar con cadenas de texto no es, en este caso, la mejor opción. Es por ello que en este punto es donde intervienen los lenguajes de programación, concretamente, en el ámbito o terreno de la manipulación DOM; es decir, generar de algún modo el arbol DOM de dicho documento para obtener los objetos programáticos para su manipulación y tratamiento.
En este tutorial se utiliza JavaScript y se recurre a un objeto estándar para generar el DOM del documento y así poder acceder a su contenido, denominado DOMParser().
Pasos para embeber un documento XML en línea en una página HTML (uso de la etiqueta script)
- Para insertar en línea el documento XML, definimos una etiqueta script con identificador(atributo "id") y tipo de
contenido( atributo "type") cuyo valor es "application/xml" o "text/xml", esto es:
<script id="miXML" type="application/xml">
Para que esto funcione, debe omitirse el atributo "src" y debe especificarse un tipo de contenido no ejecutable. - escribimos el documento XML dentro de la etiqueta (bloque de datos). (Nota: el documento XML no puede contener la etiqueta de cierre script)
- cerramos la etiqueta script
- creamos el script para generar el DOM del documento XML insertado. para ello necesitamos: la cadena de texto que
representa el documento de marcas, un nuevo objeto DOMParser y el método parseFromString() para procesar el árbol DOM a
partir de dicha cadena de texto; por lo tanto, utilizamos las siguientes instrucciones:
var textXML = document.getElementById("miXML").textContent;
var parser = new DOMParser();
var doc = parser.parseFromString(textXML, "application/xml"); - Una vez generado el documento DOM ( en este caso almacenado en la variable doc) ya puedes acceder a su contenido mediante
las interfaces implementadas por el estándar DOM, por ejemplo:
var articulos = doc.getElementsByTagName("articulos");
alert(articulos.length);
Practica1: documento XML en línea
Pasos para enlazar un documento XML a una página HTML (uso de la etiqueta object)
- Creas un documento XML y lo guardas con extensión xml
- Lo enlazas utilizando la etiqueta object: debes proporcionar los siguientes datos:
- un identificador: id="identificador"
- ruta del recurso: data="ruta.xml"
- tipo de contenido: type="text/xml"
- Importante no mostrar el contenido embebido: style="display:none"
- Una vez embebido el documento hay que acceder a su contenido pero en este caso se crea el árbol DOM de forma automática,
por lo que se accede mediante JavaScript utilizando el siguiente código:
var doc = document.getElementById("identificador").contentDocument
- Y ya está disponible para su manipulación DOM.
Buenos días, interesante tu blog pero me quedan algunas dudas.
ResponderEliminar1) cuando hablas "de trabajar con cadenas de texto no es, en este caso, la mejor opción." me dejas muy perdido porque he visto amigos trabajar con ese método y pues lo que veo es que el trabajo s excelente, muy profesional, pero cada quien tiene su punto de vista.
2) tu recomienda trabajar con el DOM y con la etiqueta y manejarlo con javascrip, yo no soy un experto y te pregunto la solución no seria entonces el XHTML?
Gracias por tu blog, son de los poquitos en este tema, chao y muchas felicidades.
Hola Juilio,
Eliminarsobre tu primera duda debo darte la razón en que fué una afirmación confusa e incomprensible (reeditaré el texto para modificarla). Lo que pretendía decir era que es más fácil tratar con un texto bien estructurado (etiquetas), que tratar con una ingente masa de texto literal.
por otro lado debo aclararte que XHTML es "una forma de HTML extensible", es decir: básicamente utilizan los dos el mismo tipo de etiquetas, con pequeñas variaciones; sin embargo, el lenguaje XHTML es estricto en sintaxis, (utiliza las mismas reglas de sintaxis que las usadas en el lenguaje XML).
Es por esta razón que el problema de insertar información con etiquetas propias (que seria posible utilizando documentos XML), no se soluciona simplemente con documentos XHTML. dicho de otro modo, el titulo de este tutorial podria haberse enunciado:
"Como embeber documentos XML en páginas HTML/XHTML".
Este tutorial es un intento de resolver el siguiente problema:
¿Como introduzco en una página web mis compras, mis albums de musica, mi nombre, et... si HTML/XHTML no me ofrece las etiquetas correspondientes, miscompras, misalbums, minombre,..?. Para poder dar un tipo de información previamente estructurada, o para dar información a petición del usuario, etc..., es necesario apoyarse en un lenguaje de programación, y javascript, aunque no es el único lenguaje disponible para dicha tarea, ya se encuentra integrado en cualquier navegador.
Espero haber podido aclarar tus dudas.
Por último decirte que, tal como escribí en la primera entrada de este blog, mi afan era el de crear un blog con tutoriales bien elaborados, y de forma cooperativa. por lo tanto, si algun dia decides escribir tus propios tutoriales, desearia que o bien participaras de este blog, o bien, que me pasaras el enlace a tu blog propio.
Gracias por leer este tutorial y hacer de él un tutorial mejorado con tus puntos de vista
Un saludo, pan