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
demo.json
<!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}
]
}
No hay comentarios:
Publicar un comentario