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>