Lo interesante de los objetos JSON es que estén en un archivo aparte, como vamos a ver en el ejemplo de este articulo, para que los diferentes scripts y páginas puedan leerlo sin necesidad de tener que cargarlo una y otra vez.
Para ello, lo primero que vamos a hacer es escribir un archivo llamado array.txt en nuestro servidor con el siguiente JSON:
Vemos como no deja de ser un JSON sencillo, sin declarar ni nada, solamente el JSON.
A continuación veremos el archivo html tal y como quedaría, claro que el script también se puede sacar fuera a otro archivo como de costumbre, pero nosotros lo dejaremos embebido:
Antes de que te eches las manos a la cabeza, veremos de que se trata todo esto...
Pero ¿ que significa esto? pues lo primero que hace es activar la lectura del JSON siempre y cuando readyState (Si esta listo) sea igual a 4, que es el valor que tiene por defecto cuando esta cargado, y si status esta a 200 (cuando todo esta ok).
Tras esto declara un array haciéndole un parse al objeto JSON, como vimos en artículos anteriores
Y llama a la función que mostrará el array por pantalla con el formato que queramos.
xmlhttp.open("GET", url, true); y xmlhttp.send(); son los encargados de leer y de enviar los datos al script, sin estos dos métodos no se podría hacer nada, para entender como funcionan, te vuelvo a insistir en que observar como funciona toda la interface haciendo click aquí.
Si quieres hacer que este ejemplo funcione, copia el JSON con el nombre array.txt en una carpeta en tu servidor local y luego el html con el nombre index.html, abre el html y obtendrás el mismo resultado.
Para ello, lo primero que vamos a hacer es escribir un archivo llamado array.txt en nuestro servidor con el siguiente JSON:
[
{
"display": "Tutorial PHP",
"url": "http://netrunning.blogspot.com.es/2014/08/php-00-fundamentos-basicos-01-que-es-php.html"
},
{
"display": "Tutorial JSON",
"url": "http://netrunning.blogspot.com.es/2014/09/json-00-introduccion.html"
},
{
"display": "Tutorial AngularJS",
"url": "http://netrunning.blogspot.com.es/2014/08/angularjs-00-introduccion.html"
}
]
Vemos como no deja de ser un JSON sencillo, sin declarar ni nada, solamente el JSON.
A continuación veremos el archivo html tal y como quedaría, claro que el script también se puede sacar fuera a otro archivo como de costumbre, pero nosotros lo dejaremos embebido:
<!DOCTYPE html>
<html>
<body>
<div id="id01"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "array.txt";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
out += '<ul>';
for(i = 0; i < arr.length; i++) {
out += '<li><a href="' + arr[i].url + '">' +
arr[i].display + '</a></li>';
}
out += '</ul>';
document.getElementById("id01").innerHTML = out;
}
</script>
</body>
</html>
Antes de que te eches las manos a la cabeza, veremos de que se trata todo esto...
- Antes de nada vemos como se declara una variable llamada xmlhttp que es igual a un new XMLHttpRequest(), esto esta creando la interface de lectura del objeto, aunque si quieres más información puedes leerla aquí.
- Tras esto declaramos otra variable llamada url con la url relativa de nuestro JSON.
- Después preparamos toda la interface XMLHttpRequest() para leer el array, y mostrarlo a través de myFunction()
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
Pero ¿ que significa esto? pues lo primero que hace es activar la lectura del JSON siempre y cuando readyState (Si esta listo) sea igual a 4, que es el valor que tiene por defecto cuando esta cargado, y si status esta a 200 (cuando todo esta ok).
Tras esto declara un array haciéndole un parse al objeto JSON, como vimos en artículos anteriores
Y llama a la función que mostrará el array por pantalla con el formato que queramos.
xmlhttp.open("GET", url, true); y xmlhttp.send(); son los encargados de leer y de enviar los datos al script, sin estos dos métodos no se podría hacer nada, para entender como funcionan, te vuelvo a insistir en que observar como funciona toda la interface haciendo click aquí.
- myFunction() recoge el valor de myArr que ya es la cadena del JSON y la trata por medio de un bucle for para recorrerla y mostrarla por pantalla como ya hemos visto otras veces.
No hay comentarios:
Publicar un comentario