Veamos dos formas de conseguirlo. La primera (versión 1) utiliza
responseText que mustra todo el texto contenido en el archivo XML. La segunda (vesión 2) se maneja con índices para llegar únicamente a las etiquetas que desamos mostrar en la página.Versión 1
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>saludar con AJAX y XML</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Modificamos parte de la página con AJAX</h2>
<div id="myDiv">
<h3>Por favor, ¡salúdame!</h3>
<button type="button" onclick="loadXMLDoc()">Dale</button>
</div>
</body>
</html> JavaScript
El condicional if se utiliza para evitar errores, ya que si se cumplen las dos condiciones que se establecen quiere decir que la consulta arroja un valor que existe y no da error.Aquí this equivale a xmlhttp, se puede sustituir
function loadXMLDoc() {
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState == 4 && this.status == 200){
document.getElementById("myDiv").innerHTML=this.responseText;
}
};
xmlhttp.open("GET", "ejemploXML.xml",true);
xmlhttp.send();
} ejemploXML.xml
Conseguimos volcar todo el contenido del archivo XML e incluso conseguimos que aparezca en cursiva (italic).Con este método (versión 1) volcamos el contenido completo del archivo XML por lo que podemos cambiar las etiquetas y esto no alterará el resultado. En lugar de usar la etiqueta
<saludo> podríamos haber usadola etiqueta <pepito> y funcionaría igualmente. <?xml version="1.0" encoding="UTF-8"?>
<saludo>
<i>
Hola holita
</i>
</saludo> Variante propuesta
Pruebe a cambiar el archivo XML por el siguiente y ver que al pulsar el botón el usuario logrará volcar el contenido completo del fichero XML.
<?xml version="1.0" encoding="UTF-8"?>
<saludo>
<i>Hola holita</i>
<p><strong>adios</strong></p>
</saludo>
Versión 2
En esta ocasión vamos a ser más sutiles y no volcaremos el contenido completo del archivo XML sino que iremos buscando la información que nos interese, 'bucenado' entre la estructura de etiquetas y usando índices.Es interesante ver las páginas siguientes de w3schools.
- https://www.w3schools.com/xml/dom_nodes_get.asp
- https://www.w3schools.com/jsref/prop_node_nodevalue.asp
- https://www.w3schools.com/xml/prop_document_childnodes.asp
Pese a su nombre, XMLHttpRequest puede ser usado para recibir no solo XML.
En algunos navegadores podemos sustituir .childNodes[0].nodeValue por .textContent pero es menos universal.
Podemos ver el funcionamiento del código en el siguiente enlace.
En algunos navegadores podemos sustituir .childNodes[0].nodeValue por .textContent pero es menos universal.
Podemos ver el funcionamiento del código en el siguiente enlace.
HTML
Es el mismo que el de la versión 1.
JavaScript
function loadXMLDoc() {
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState == 4 && this.status == 200){
var respuesta= this.responseXML.getElementsByTagName("saludo")[3].childNodes[0].nodeValue;
respuesta="<i>"+respuesta+"</i>"; //cursiva (italic)
document.getElementById("myDiv").innerHTML=respuesta;
}
};
xmlhttp.open("GET", "ejemploXML.xml",true);
xmlhttp.send();
}
ejemploXML.xml
El índice comienza a contar por cero. Esto supone que el saludo 'Bye bye' tenga índice 3. <?xml version="1.0" encoding="UTF-8"?>
<mensajes>
<saludo>
Buenos días
</saludo>
<saludo>
Good morning
</saludo>
<saludo>
Hola holita
</saludo>
<saludo>
Bye bye
</saludo>
</mensajes>
No hay comentarios:
Publicar un comentario