Leer algunos datos de xml desde html
Tengo un archivo XML de música en donde existen autores, títulos del album y fecha en que se lanzo el album, este lo leo por HTML, es decir el código en HTML me lee todos los datos del XML y me los muestra.. Lo que yo trato de hacer es que no me lea todos los datos si no que por medio de una búsqueda por decir de año dentro del html, me muestre los títulos de los album y autores que corresponden a ese año.
Podrías ayudarme es SUPER URGENTE...
Este es el xml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1985</YEAR>
</CD>
</CATALOG>
AQUI ESTA EL HTML
<html>
<body>
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
xmlDoc=document.implementation.createDocument(""," ",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("cd_catalog.xml");
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td>");
document.write(
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
</body>
</html>
Agradezco la ayuda y si es con un ejemplo mucho mejor.
Podrías ayudarme es SUPER URGENTE...
Este es el xml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1985</YEAR>
</CD>
</CATALOG>
AQUI ESTA EL HTML
<html>
<body>
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
xmlDoc=document.implementation.createDocument(""," ",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("cd_catalog.xml");
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td>");
document.write(
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
</body>
</html>
Agradezco la ayuda y si es con un ejemplo mucho mejor.
1 respuesta
Respuesta de buzu
1
Para empezar, no es el HTML el que lee el archivo XML sino javascript. Para hacer lo que quieres bastara con comparar el valor del elemento en el XML, p.e. Año, con el valor introcido en el campo de texto y mostrar solo los elementos que coincidan. Debido a lo que estas desarrollando me imagino que hacer lo que te digo no sera problema, pero si no sabes como hacerlo nomas dime.
Buzu, muchísimas gracias por responder a mi pregunta... En realidad para mi no es muy claro como hacerlo, ya que hasta ahora tengo algunas nociones de javascript, y por lo tanto no se como hacerlo... por eso me permito en solicitar tu ayuda.
De nuevo muchas gracias.
De nuevo muchas gracias.
No me había podido poner a resolver este tema. Me eh puesto en esto y pues voy bien. Al parecer lo que quieres es un buscador o algo por el estilo. Estoy haciendo algo así y aun que al final va a quedar muy ruudimentarios, creo que es lo que quieres hacer. Ahora tengo que dormir pero mañana continuo con esto. Responde a este mensaje para que me llegue una notificación a mi coreo electrónico y no se me olvide. Casi nunca reviso mis preguntas activas, solo las nuevas. Por cierto, tu código tiene muchos errores. No lo voy a utilizar, no por que tenga errores sino por que la forma de hacer lo que quieres es con ajax, lo de los errores te lo digo solo para que seas más cuidadoso al desarrollar. ¿Probaste tu código antes de mandármelo?, y si si lo probasnte, ¿funcionaba? Por que tal como esta es muy probable que no funcione.
Hasta ahora esto es lo que he hecho.
<html>
<body>
<script type="text/javascript">
function obtenerXHR(){
var xhr = false;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
xhr = false;
}
}
}
return xhr;
}
function leerArchivo(cual, loquebusco){
var ajax = obtenerXHR();
if(ajax){
ajax.onreadystatechange = function(){
obtenerDatos(ajax, loquebusco);
}
ajax.open("GET", cual, true);
ajax.send(null);
}
}
function obtenerDatos(ajax, loquebusco){
if(loquebusco == "" || loquebusco == null || loquebusco==" "){
return;
}
document.getElementById('resultados').innerHTML ="";
if(ajax.readyState == 4){
datos = ajax.responseXML;
cds = datos.getElementsByTagName("CD");
for(i=0; i<cds.length; i++){
nodos = cds.getElementsByTagName("*");
for(j=0; j<nodos.length; j++){
if(nodos[j].firstChild.nodeValue.indexOf(loquebusco) != -1){
cdInfo = nodos[j].parentNode.getElementsByTagName("*")
for(k=0; k<cdInfo.length; k++){
document.getElementById('resultados').innerHTML += (cdInfo[k].firstChild.nodeValue + " ");
}
document.getElementById('resultados').innerHTML += "<br />";
}
}
}
}
}
</script>
<div id="resultados">
</div>
<form method="post" action="">
Buscar <input type="text" value="" name="queBuscar" id="quebuscar" /><input onclick="leerArchivo('cd_catalog.xml', document.getElementById('quebuscar').value); return false;" type="submit" value="buscar" name="buscar" />
</form>
</body>
</html>
Puedes probarlo y veras que ya funciona. Poner por ejemplo Bob en el buscador y te da solo los resultados que contengasn Bob. Esta todavía muy rudimentario pero es una buena base para que pueda empezar a desarrollar por tu cuenta y de acuerdo a tus necesidades.
<html>
<body>
<script type="text/javascript">
function obtenerXHR(){
var xhr = false;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
xhr = false;
}
}
}
return xhr;
}
function leerArchivo(cual, loquebusco){
var ajax = obtenerXHR();
if(ajax){
ajax.onreadystatechange = function(){
obtenerDatos(ajax, loquebusco);
}
ajax.open("GET", cual, true);
ajax.send(null);
}
}
function obtenerDatos(ajax, loquebusco){
if(loquebusco == "" || loquebusco == null || loquebusco==" "){
return;
}
document.getElementById('resultados').innerHTML ="";
if(ajax.readyState == 4){
datos = ajax.responseXML;
cds = datos.getElementsByTagName("CD");
for(i=0; i<cds.length; i++){
nodos = cds.getElementsByTagName("*");
for(j=0; j<nodos.length; j++){
if(nodos[j].firstChild.nodeValue.indexOf(loquebusco) != -1){
cdInfo = nodos[j].parentNode.getElementsByTagName("*")
for(k=0; k<cdInfo.length; k++){
document.getElementById('resultados').innerHTML += (cdInfo[k].firstChild.nodeValue + " ");
}
document.getElementById('resultados').innerHTML += "<br />";
}
}
}
}
}
</script>
<div id="resultados">
</div>
<form method="post" action="">
Buscar <input type="text" value="" name="queBuscar" id="quebuscar" /><input onclick="leerArchivo('cd_catalog.xml', document.getElementById('quebuscar').value); return false;" type="submit" value="buscar" name="buscar" />
</form>
</body>
</html>
Puedes probarlo y veras que ya funciona. Poner por ejemplo Bob en el buscador y te da solo los resultados que contengasn Bob. Esta todavía muy rudimentario pero es una buena base para que pueda empezar a desarrollar por tu cuenta y de acuerdo a tus necesidades.
