Buenas tardes. Expongo una posible solución del ejercicio CU01211F del curso Ajax desde cero.
EJERCICIO
Lee este texto que hemos extraído del artículo: ¿Qué es y para qué sirve XML? disponible en http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=102:ique-es-y-para-que-sirve-el-lenguaje-de-etiquetas-xml-extensible-markup-language&catid=46:lenguajes-y-entornos&Itemid=163
Las etiquetas XML pueden tener atributos, que son una manera de incorporar características o propiedades a las etiquetas de un documento. El atributo consta de dos partes: La propiedad del elemento y el valor de la propiedad, que siempre va entre comillas doble (“) o simple (‘). Por ejemplo: modelo y color serian atributos de la etiqueta Vehiculo:
<Vehiculo marca="Toyota" modelo="45 TC" color="plomo">En venta</Vehiculo>
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>A priori podríamos pensar en usar getElementById para recuperar información del documento xml con Ajax. Pero esta función no responde con documentos XML, como explica este texto en inglés:
Non-HTML documents. The DOM implementation must have information that says which attributes are of type ID. Attributes with the name "id" are not of type ID unless so defined in the document's DTD. The id attribute is defined to be of ID type in the common cases of XHTML, XUL, and other. Implementations that do not know whether attributes are of type ID or not are expected to return null.
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?
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo Ajax</title>
<script type="text/javascript">
function recuperarDatos(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var xmlDoc = xmlhttp.responseXML;
var nodoBook = xmlDoc.getElementById("bk101");
alert(nodoBook.innerHTML);
}
}
xmlhttp.open("GET", "CU01211F(01).xml");
xmlhttp.send();
}
</script>
</head>
<body>
<button onclick="recuperarDatos()">Recuperar Datos</button>
</body>
</html>Puedo visualizar el contenido del elemento con id="bk101".
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ódigo HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo Ajax</title>
<script type="text/javascript">
function recuperarDatos(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var xmlDoc = xmlhttp.responseXML;
var nodoBook = getElementByIdMXL(xmlDoc, 'bk101');
alert(nodoBook.innerHTML);
}
}
xmlhttp.open("GET", "CU01211F(01).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];
}
}
}
}
</script>
</head>
<body>
<button onclick="recuperarDatos()">Recuperar Datos</button>
</body>
</html>Puedo visualizar el contenido del elemento con id="bk101".
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 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo Ajax</title>
<script type="text/javascript">
function recuperarDatos(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var xmlDoc = xmlhttp.responseXML;
var nodoBook = getElementsByAttribute('type', 'low', xmlDoc);
for(var i=0; i<nodoBook.length; i++){
alert(nodoBook[i].innerHTML);
}
}
}
xmlhttp.open("GET", "CU01211F(01).xml");
xmlhttp.send();
}
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>
<button onclick="recuperarDatos()">Recuperar Datos</button>
</body>
</html>Recuperamos todos los precios que lleven como atributo type "low".
De los tres apartados del ejercicio concluyo que anteriormente no funcionaba el método "getElementById" en XML y Ajax, pero en la actualidad sí. Llego a esta conclusión, porque en el primer apartado me funcionó bien dicho método.
Gracias.
Tema: getElementById recuperar información de archivos XML con Ajax Ejercicio CU01211F (Leído 2428 veces)
RSS -
WAP2