Páginas

▼
▼

viernes, 16 de agosto de 2019

AJAX sobre un archivo XML

Disponemos de un archivo XML y deseamos obtener parte de la información que contienen y mostrarla en una página cuando el usuario pulse un botón.

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




Podemos ver el funcionamiento del código en el siguiente enlace.

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.
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.

HTML

Es el mismo que el de la versión 1.

JavaScript

Ahora no cargamos el contenido completo del archivo XML sino únicamente lo que nos interesa. Para ello empleamos índices y buceamos por la estructura de etiquetas.

 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>

en

No hay comentarios:

Publicar un comentario