Autor Tema: getElementById ¿no funciona con XML y Ajax? readyState hasAttribute. CU01211F# (Leído 3639 veces)

pedro,, · « **en:** 23 de Marzo 2016, 22:52 »

Hola.

A continuación dejo una posible solución para el ejercicio CU01211F del curso Ajax.

Citar

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

<?xml version="1.0"?>
<catalog>
   <book id="bk101">
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <price type="high">44.95</price>
      <publish_date>2000-10-01</publish_date>
   </book>
   <book id="bk102">
      <author>Ralls, Kim</author>
      <title>Midnight Rain</title>
      <price type="low">5.95</price>
      <publish_date>2000-12-16</publish_date>
   </book>
   <book id="bk103">
      <author>Corets, Eva</author>
      <title>Maeve Ascendant</title>
      <price type="low">5.95</price>
      <publish_date>2000-11-17</publish_date>
   </book>
</catalog>

Citar

a) Usa el archivo ejemplo.xml y coloca un botón que intente recuperar usando ajax y getElementById el contenido del elemento con id="bk101" ¿Qué código has empleado? ¿Qué resultado obtienes?
b) Usa el archivo ejemplo.xml y coloca un botón que intente recuperar usando ajax y la función que hemos visto anteriormente getElementByIdMXL(the_node,the_id) el contenido del elemento con id="bk101" ¿Qué código has empleado? ¿Qué resultado obtienes?
c) Usa el archivo ejemplo.xml y coloca un botón que intente recuperar usando ajax y la función que hemos visto anteriormente getElementsByAttribute(the_attribute, the_value, the_node) todos los precios que lleven como atributo type "low" ¿Qué código has empleado? ¿Qué resultado obtienes?

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;}
			#datosLibro {
			font-size: 20px;
			color: blue;
			}
		</style>		
		<script>
			function apartadoA() {
				var xmlhttp;
				xmlhttp = new XMLHttpRequest();
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var xmlDoc = xmlhttp.responseXML;
						var msg = '';
						msg += 'Si getElementById funciona, se mostrará el nombre del autor que pertenezca al libro con id=bk101.<br/>'
						msg += 'El nombre del autor es: ' + xmlDoc.getElementById('bk101').firstChild.nextSibling.innerHTML;
						document.getElementById('resultado').innerHTML = msg;
					}
				}
				xmlhttp.open("GET","ejemplo.xml");
				xmlhttp.send();
			}
			function apartadoB() {
				var xmlhttp;
				xmlhttp = new XMLHttpRequest();
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var xmlDoc = xmlhttp.responseXML;
						var msg = '';
						msg += 'El libro con id=bk101 tiene como autor: <br/>'
						msg += getElementByIdMXL(xmlDoc, 'bk101').firstChild.nextSibling.innerHTML;
						document.getElementById('resultado').innerHTML = msg;	
					}
				}
				xmlhttp.open("GET","ejemplo.xml");
				xmlhttp.send();
			}
			function apartadoC() {
				var xmlhttp;
				xmlhttp = new XMLHttpRequest();
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var xmlDoc = xmlhttp.responseXML;
						var arrayNodos = getElementsByAttribute('type', 'low', xmlDoc);
						document.getElementById('resultado').innerHTML = 'Hay ' +  arrayNodos.length + ' elementos que contienen el atributo type "low".';
					}
					
				}
				xmlhttp.open("GET","ejemplo.xml");
				xmlhttp.send();
			}
			function getElementByIdMXL(the_node,the_id) {
				//Nos traemos todos los nodos con cualquier tag del documento xml
				node_tags = the_node.getElementsByTagName('*');
				for (i=0;i<node_tags.length;i++) {
					// Comprobamos si existe un atributo id
					if (node_tags[i].hasAttribute('id')) {
						// Si existe el atributo id comprobamos si coincide con el buscado
						if (node_tags[i].getAttribute('id') == the_id) {
							// Devolvemos el nodo que tiene el id buscado, solo el primero ya que debe ser único
							return node_tags[i];
						}
					}
				}
			}
			function getElementsByAttribute(the_attribute, the_value, the_node) {
				if ( the_node == null ) {the_node = document;}
				var node_tags = the_node.getElementsByTagName('*');
				var results = new Array();
				for (i=0, j=0; i<node_tags.length;i++){
					if (node_tags[i].hasAttribute(the_attribute)) {
						if (node_tags[i].getAttribute(the_attribute) == the_value) {
						results[j] = node_tags[i]; j++; }
					}
				}
				return results;
			}
		</script>
	</head>
	
	<body style="margin:20px;">
		<h2>Elige un libro:</h2>
		<button onclick="apartadoA()"> usando ajax y getElementById</button>
		<button onclick="apartadoB()"> usando ajax y getElementByIdMXL</button>
		<button onclick="apartadoC()"> usando ajax y getElementsByAttribute</button>
		<br/>
		<br/>
		<div id="resultado"> </div>
	</body>
</html>

http://aprendehtml.byethost3.com/Ajax/CU01211F/ejercicioCU01211F_1.html

Decir que getElementById me funcionó bien. No se si es que no hice bien el ejercicio, pero no me da ningún error al usarlo.

Saludos.

Alex Rodríguez · « **Respuesta #1 en:** 26 de Marzo 2016, 21:23 »

Hola Pedro ya veo que te ha funcionado el getElementById, no creo que hayas hecho mal el ejercicio sino que simplemente has dado con una vía para que funcione. En ese fragmento de código hay algo que no es de interpretación fácil, me refiero a xmlDoc.getElementById('bk101').firstChild.nextSibling.innerHTML;

¿Cómo llegaste a sacar esa relación?

Saludos

pedro,, · « **Respuesta #2 en:** 27 de Marzo 2016, 23:41 »

La verdad es que he tratado el archivo xml como si fuera el DOM de un html.
Hice bastantes pruebas con getElementById, pero no conseguí que diese ningún error, incluso haciendo lo siguiente:

Código: [Seleccionar]

xmlDoc.getElementById('bk101').firstChild.nextSibling.innerHTML='hola'
que pensé que sería una buena forma de que diese error, porque sería como intentar cambiar datos en el archivo xml, pero devuelve 'hola' aunque el archivo no cambie y no da ningún error.

Gracias por tu tiempo Alex.

Saludos.

Alex Rodríguez · « **Respuesta #3 en:** 29 de Marzo 2016, 14:31 »

Hola gracias a tí por tus observaciones que son siempre interesantes. En el caso que comentas al hacer xmlDoc.getElementById('bk101').firstChild.nextSibling.innerHTML='hola' pienso que lo que ocurre es que el archivo no cambia porque realmente no es una instrucción para manipular el archivo. Lo que cambia es la representación interna de los datos que mantiene el navegador. Es como si el navegador manejara una copia de los datos del archivo, y lo que estarías cambiando es lo que consta en la copia, no en el "original".

Saludos

pedro,, · « **Respuesta #4 en:** 29 de Marzo 2016, 22:37 »

Ahora me quedó bastante claro. Tiene su lógica lo que explicas.

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: getElementById ¿no funciona con XML y Ajax? readyState hasAttribute. CU01211F# (Leído 3639 veces)

pedro,,

getElementById ¿no funciona con XML y Ajax? readyState hasAttribute. CU01211F#

Alex Rodríguez

Re:getElementById ¿no funciona con XML y Ajax? hasAttribute. CU01211F

pedro,,

Re:getElementById ¿no funciona con XML y Ajax? hasAttribute. CU01211F

Alex Rodríguez

Re:getElementById ¿no funciona con XML y Ajax? hasAttribute. CU01211F#

pedro,,

Re:getElementById ¿no funciona con XML y Ajax? hasAttribute. CU01211F#

Preguntas y respuestas