« anterior próximo »
Páginas: [1]

Autor Tema: Recuperar datos desde archivo XML con Ajax responseXML: método CU01210F  (Leído 2189 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Recuperar datos desde archivo XML con Ajax responseXML: método CU01210F
« en: 23 de Junio 2016, 23:26 »
Buenas noches.

Expongo una posible solución del ejercicio CU01210F del curso Ajax desde cero.

Citar
EJERCICIO                                                                                                       

Considera el siguiente documento xml al que denominamos ejemplo.xml:

Código original XML:

Código: [Seleccionar]
<?xml version="1.0"?>
<catalog>
   <book id="bk101">
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
   </book>
   <book id="bk102">
      <author>Ralls, Kim</author>
      <title>Midnight Rain</title>
      <price>5.95</price>
      <publish_date>2000-12-16</publish_date>
   </book>
   <book id="bk103">
      <author>Corets, Eva</author>
      <title>Maeve Ascendant</title>
      <price>5.95</price>
      <publish_date>2000-11-17</publish_date>
   </book>
</catalog>
Citar
a) Transforma el archivo xml para que id en lugar de ser un atributo de etiqueta sea una etiqueta

Código XML:

Código: [Seleccionar]
<?xml version="1.0" ?>
<catalog>
   <book>
      <id>bk101</id>
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
   </book>
   <book>
      <id>bk102</id>
      <author>Ralls, Kim</author>
      <title>Midnight Rain</title>
      <price>5.95</price>
      <publish_date>2000-12-16</publish_date>
   </book>
   <book>
      <id>bk103</id>
      <author>Corets, Eva</author>
      <title>Maeve Ascendant</title>
      <price>5.95</price>
      <publish_date>2000-11-17</publish_date>
   </book>
</catalog>
Citar
b) Crea un archivo html que permita elegir el título (title) y dinámicamente recupere desde el archivo xml el contenido de todas las demás etiquetas incluido el id y los muestre por pantalla.


Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Cursos aprende a programar</title>
<meta charset="utf-8">
  <style type="text/css">
  *{
  font-family:sans-serif;
  }
  a:link{
  text-decoration:none;
  }
  select{
  font-size:18px;
  }
  div div{
  color: blue;
  background-color:#F1FEC6;
  font-size: 20px;
  float: left;
  border: solid;
  margin: 20px;
  padding:15px;
  }
  </style>
 
<script>

function mostrarSugerencia(str){

var libroElegido='';
if(str=='bk101'){
libroElegido='bk101';
}else if(str=='bk102'){
libroElegido='bk102';
}else if(str=='bk103'){
libroElegido='bk103';
}else{
libroElegido='none';
}

var xmlhttp;
if(str.length==0 ||libroElegido=='none'){
document.getElementById("txtInformacion").innerHTML="no hay datos";
return;
}

xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
    var xmlDoc = xmlhttp.responseXML;
    librosRecibidos = obtenerArrayNodosPorTag(xmlDoc, 'book');
   
    for(var i=0; i<librosRecibidos.length;i++){
        var tituloLibro = obtenerArrayNodosPorTag(librosRecibidos[i], 'title')[0].innerHTML;
        var autorLibro = obtenerArrayNodosPorTag(librosRecibidos[i], 'author')[0].innerHTML;
        var precioLibro = obtenerArrayNodosPorTag(librosRecibidos[i], 'price')[0].innerHTML;
        var publicacionLibro = obtenerArrayNodosPorTag(librosRecibidos[i], 'publish_date')[0].innerHTML;
        var idLibro = obtenerArrayNodosPorTag(librosRecibidos[i], 'id')[0].innerHTML;
        if(idLibro==libroElegido){
        document.getElementById("txtInformacion").innerHTML = 'El libro recibido por get en segundo plano es '+tituloLibro+ ' y tiene id '+idLibro+'. Su autor es '+autorLibro+', cuesta '+precioLibro+' y está publicado '+publicacionLibro;
        }
    }
}
}

xmlhttp.open("GET","CU01210F(01).xml");
xmlhttp.send();
}

 

function obtenerArrayNodosPorTag(nodoRaiz, nombreTag){
var arrayNodos = nodoRaiz.getElementsByTagName(nombreTag);
return arrayNodos;
}

</script>

</head>
<body style="margin:20px;">
<h2>Elige un país:</h2>
<form action="">
<select onchange="mostrarSugerencia(this.value)">
  <option value="none">Elige</option>
  <option value="bk101">XML Developer's Guide</option>
  <option value="bk102">Midnight Rain</option>
  <option value="bk103">Maeve Ascendant</option>
</select>
</form>
<br/>
<p>Informacion sobre operacion en segundo plano con Ajax: <span style="color:brown;" id="txtInformacion"></span></p>
</body>
</html>
Gracias.
« Última modificación: 27 de Junio 2016, 21:50 por César Krall »
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:Recuperar datos desde archivo XML con Ajax responseXML: método CU01210F
« Respuesta #1 en: 27 de Junio 2016, 21:54 »
Hola!

Todo bien, te has despistado en Elige un país: ya que estás trabajando con libros no con países  :)

Saludos!
En línea
Responsable de departamento de producción aprenderaprogramar.com
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".