miércoles, 3 de septiembre de 2014

Tutorial Javascript parte 31 - AJAX XML




En esta parte del tutorial continuamos con la tecnología ajax y en este caso extrayendo datos de archivos en formato XML.

XML, siglas en inglés de eXtensible Markup Language ('lenguaje de marcas extensible'), es un lenguaje de marcas desarrollado por el World Wide Web Consortium (W3C) utilizado para almacenar datos en forma legible.

Los dos archivos de ejemplo del capítulo los puedes ver a continuación ...

xml.php

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function()
  {
   if (window.XMLHttpRequest)
     {
   var ajax = new XMLHttpRequest();
  }
  else
  {
   var ajax = ActiveXObject("Microsoft.XMLHTTP");
  }
  
    ajax.onreadystatechange = function()
    {
      if (ajax.readyState == 4 && ajax.status == 200)
     {
      alumnos = ajax.responseXML.getElementsByTagName("alumnos");
   
   var contenedor = document.getElementById("contenedor");
   
   for(x=0; x<alumnos.length; x++)
    {
     contenedor.innerHTML += "ID: " + alumnos[x].id + " Nombre: " + alumnos[x].innerHTML + "<br>";
    }
     }
    }
    
    ajax.open("GET", "demo.xml", true);
    ajax.send();
  }
</script>
</head>
<body>
<div id="contenedor"></div>
</body>
</html>


demo.xml

<?xml version="1.0" encoding="UTF-8" ?>
<clase>
<alumnos id="1">Fernando</alumnos>
<alumnos id="2">Rosa</alumnos>
<alumnos id="3">Mario</alumnos>
<alumnos id="4">Yolanda</alumnos>
</clase>