Leer XML desde javascript

ZiTAL · #1 (**permalink**) 19/06/2008, 04:14

Aupa, tengo un XML tipo:

prueba.xml

Código HTML:

<?xml version="1.0" encoding="UTF-8"?>
<table>
	<tr>
		<td class="invalid">a</td>
		<td class="invalid">a</td>
		<td class="invalid">a</td>
		<td class="invalid">1</td>
		<td class="invalid">2</td>
		<td class="invalid">3</td>
		<td class="invalid">4</td>
	</tr>
	<tr>
		<td class="invalid">5</td>
		<td class="invalid">6</td>
		<td class="invalid">7</td>
		<td class="invalid">8</td>
		<td class="invalid">9</td>
		<td class="invalid">10</td>
		<td class="invalid">11</td>
	</tr>
	<tr>
		<td class="invalid">12</td>
		<td class="invalid">13</td>
		<td class="invalid">14</td>
		<td class="invalid">15</td>
		<td class="invalid">16</td>
		<td class="invalid">17</td>
		<td class="invalid">18</td>
	</tr>
	<tr>
		<td class="invalid">19</td>
		<td class="invalid">20</td>
		<td class="invalid">21</td>
		<td class="invalid">22</td>
		<td class="invalid">23</td>
		<td class="invalid">24</td>
		<td class="valid">25</td>
	</tr>
	<tr>
		<td class="invalid">26</td>
		<td class="invalid">27</td>
		<td class="invalid">28</td>
		<td class="invalid">29</td>
		<td class="invalid">30</td>
		<td class="invalid">31</td>
		<td class="invalid">a</td>
	</tr>
</table>

y tengo este HTML/javascript:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendario AJAX</title>
<script type="text/javascript">

Código PHP:

  function importXML()
{
    if (document.implementation && document.implementation.createDocument)
    {
        xmlDoc = document.implementation.createDocument("", "", null);
        xmlDoc.onload = createTable;
    }
    else if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.onreadystatechange = function () {
            if (xmlDoc.readyState == 4) createTable()
        };
     }
    else
    {
        alert('Your browser can\'t handle this script');
        return;
    }
    xmlDoc.load("xml/emperors.xml");
}
function createTable()
{
    var table = xmlDoc.getElementsByTagName('table');
    table = table[0];
    var t=document.createElement('table');
    var tr = table.getElementsByTagName('tr');
    for(i=0;i<tr.length;i++)
    {
        var r=document.createElement('tr');
        var td=tr[i].getElementsByTagName('td');
        for(j=0;j<td.length;j++)
        {
            var d=document.createElement('td');
            d.className=td[j].getAttribute('class');
            var tmp=document.createTextNode(td[j].firstChild.nodeValue);                                
            d.appendChild(tmp);
            r.appendChild(d);
        }            
        t.appendChild(r);
    }
    document.getElementById('writeroot').appendChild(t);
}
importXML();

Código HTML:

</script>
</head>
<body>
<div id="writeroot">
</div>
</body>
</html>

Lo que quiero recivir el XML y convertirlo a DOM mediante javascript. La cuestion es que no me añade la tabla resultante, y estoy poniendo trazas con alert's y al parecer todo va perfectamente.

En Firefox funciona pero en IE no (como no)

Alguna sugerencia?

Panino5001 · #2 (**permalink**) 19/06/2008, 07:42

No lo revisé demasiado, pero hay muchas referencias a nombres iguales (ejemplo table), y eso puede generar conflictos. También, por compatibilidad, habría que crear un elemento tbody para añadir los tr y td (luego se agrega el tbody a table). Finalmente, creo que deberías olvidarte de DOMPARSER y usar XMLHTTPRequest y sus compañeros para explorer, ya que son más compatibles que la técnica que estás usando.

ZiTAL · #3 (**permalink**) 20/06/2008, 00:59

Tienes toda la razon, aquí la solución:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendario AJAX</title>
<script type="text/javascript">

Código PHP:

  function ajaxFunction() 
  { var xmlHttp; 
  try { xmlHttp=new XMLHttpRequest();return xmlHttp; } 
  catch (e) { try { xmlHttp=new ActiveXObject('Msxml2.XMLHTTP');return xmlHttp; } 
  catch (e) { try { xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');return xmlHttp; } 
  catch (e) { alert('Your browser does not support AJAX!');return false; } 
  }}} 
function createTable() 
{ 
    var ajax=new ajaxFunction(); 
      ajax.open('POST','xml/emperors.xml',true); 
       ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
       ajax.onreadystatechange=function()  
      { 
        if (ajax.readyState==4) 
         { 
            if (ajax.status==200) 
             { 
                b(ajax.responseXML); 
             } 
         } 
      } 
    ajax.send(''); 
} 
 
function b(a) 
{     
    var table = a.getElementsByTagName('table'); 
    table=table.item(0); 
    var t=document.createElement('table'); 
    var b=document.createElement('tbody'); 
    var tr = table.getElementsByTagName('tr'); 
    for(i=0;i<tr.length;i++) 
    { 
        var r=document.createElement('tr'); 
        var td=tr[i].getElementsByTagName('td'); 
        for(j=0;j<td.length;j++) 
        { 
            if (td[j].nodeType != 1) continue;             
            var d=document.createElement('td'); 
            d.className=td[j].getAttribute('class'); 
            var tmp=document.createTextNode(td[j].firstChild.nodeValue);                                             
            d.appendChild(tmp); 
            r.appendChild(d); 
        } 
        b.appendChild(r);             
        t.appendChild(b); 
    } 
    document.getElementById('writeroot').appendChild(t); 
} 
createTable();

Código HTML:

</script>
</head>
<body>
<div id="writeroot">
</div>
</body>
</html>