miércoles, 3 de septiembre de 2014

Tutorial Javascript parte 30 - AJAX JSON




En esta parte del tutorial seguimos viendo la tecnología ajax y en esta ocasión veremos como realizar una petición a un archivo json y como acceder a sus datos.

JSON, acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.

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

json.php

<!DOCTYPE HTML>
<html>
<head>
<script>

window.onload = function()
{
 if (window.XMLHttpRequest)
 {
  var ajax = new XMLHttpRequest();
 }
 else
 {
 var ajax = new ActiveXObject("Microsoft.XMLHTTP");
 }
 
 ajax.onreadystatechange = function()
   {
     //Si la petición es correcta
  if (ajax.readyState == 4 && ajax.status == 200)
   {
    json = JSON.parse(ajax.responseText);
    
    for(x=0; x<json.alumnos.length;x++)
    {
    document.getElementById("contenedor").innerHTML += "Alumno: " + json.alumnos[x]["nombre"] + " Nota: " + json.alumnos[x]["nota"] + "<br>";
    }
   }
   }
   ajax.open("GET", "demo.json", true);
   ajax.send();
}
</script>
</head>
<body>
<div id="contenedor"></div>
</body>
</html>


demo.json

{"alumnos":
 [
  {"nombre":"Manuel", "nota":8},
  {"nombre":"Pepe", "nota":7.5},
  {"nombre":"Raul", "nota":9}
 ]
}