Get it on Google Play

AJAX 2: LLEGIR XML

03-05-2006
 

Bon dia a tothom. Aquí un exemple de com llegir i interpretar un fitxer XML amb AJAX.

El fitxer index.html:

<HTML>

<HEAD>
<SCRIPT TYPE=’text/javascript’ LANGUAGE=’javascript’>
function crida(url) {
  var req=false;

  // Creo el gestor de peticions
  if (window.XMLHttpRequest) req = new XMLHttpRequest();
    else if (window.ActiveXObject) req = new ActiveXObject(“Microsoft.XMLHTTP”);

  // Mostro missatge de carregant o error
  if (!req) return;

  // Faig la petició
  req.open(“GET”, url, true);
  req.onreadystatechange = function() {
  if (req.readyState == 4)
    tractar(req.responseXML);
    }

  try { req.send(null); } catch (failed) { }
  }

function tractar(xmldoc) {
  nom=document.getElementById(“nom”);
  pro=document.getElementById(“pro”);
  art=document.getElementById(“art”);
  numreg=document.getElementById(“numreg”);

  nom.innerHTML=””;
  pro.innerHTML=””;
  art.innerHTML=””;

  var doc = xmldoc.getElementsByTagName(‘data’)[0];

  var elems=doc.getElementsByTagName(‘row’);
  numreg.innerHTML=””+elems.length;
  for (var i = 0; i < elems.length; i++) {
    var node = elems[i];

    nom.innerHTML+=node.getElementsByTagName(‘nom’)[0]
.firstChild.nodeValue+”<BR/>”;
    pro.innerHTML+=node.getElementsByTagName(‘professio’)[0]
.firstChild.nodeValue+”<BR/>”;
    art.innerHTML+=node.getElementsByTagName(‘article’)[0]
.firstChild.nodeValue+”<BR/>”;
    }
  }
</SCRIPT>
</HEAD>

<BODY>
<input type=”button” name=”button” value=”Crida” onclick=”javascript:crida(‘a1.xml’);”>
<B>Num. Registres:</B> <SPAN ID=’numreg’>0</SPAN>
<BR/><BR/>

<DIV STYLE=’width: 100px; float: left;’><B>Nom</B><DIV ID=’nom’></DIV></DIV>
<DIV STYLE=’width: 100px; float: left;’><B>Professio</B><DIV ID=’pro’></DIV></DIV>
<DIV STYLE=’width: 100px; float: left;’><B>Article</B><DIV ID=’art’></DIV></DIV>
</BODY>
</HTML>

El fitxer a1.xml:

<root>
  <data>
    <row>
      <nom>Albert</nom>
      <professio>Informàtic</professio>
      <article>AJAX</article>
    </row>
    <row>
      <nom>linia 2</nom>
      <professio>In 2</professio>
      <article>AJAX 2</article>
    </row>
  </data>
</root>

La funció crida es limita a fer la crida del fitxer XML i passar-lo a la funció tractar que es la que interpreta l’XML i emplena el document HTML.

A diferència de l’altre exemple d’AJAX aquestes dues funcions tenen un nivell de reutilització baix ja que estan molt acoblades al exemple però amb petites modificacions podrem realitzar un sense fi d’aplicacions.

Leave a Reply

© Albert Coronado Calzada