Hola a todos, hoy os voy a explicar como podemos recuperar datos con un GET en AJAX.
Partiendo de la base de que tenemos un JSON con datos que queremos recoger desde nuestro Javascript, el problema es que no podemos hacer como en otros lenguajes y cogerlo directamente, tenemos que usar AJAX.
Para quien no lo sepa, AJAX es Asynchronous JavaScript And XML, esto significa que no ejecuta al momento, sino que hace una petición y este espera a que reciba la respuesta, continuando el flujo del programa.
Mi recomendación es hacer este ejemplo en un servidor local para que no tengáis ningún problema.
Este es el JSON que vamos a recuperar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[ { "nombre": "Fernando", "apellido": "ureña", "profesion": "Programador" }, { "nombre": "Ricardo", "apellido": "Merbas", "profesion": "Experto en Angular" }, { "nombre": "Pepe", "apellido": "Alcazar", "profesion": "Comerciante" } ] |
Tendremos un HTML básico, sin nada mas que un Javascript asociado:
Lo primero que haremos es crear la estructura de HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" content="ie=edge"> |
Ya teniendo creado nuestro main.js, empezamos creando nuestra función y asociarlo con el onload para que se ejecute al principio.
|
1 2 3 4 5 |
function cargarJSON() { } window.onload = cargarJSON; |
Creo el objeto que es el que hará la llamada:
|
1 2 3 4 5 6 7 8 9 |
function cargarJSON() { // Creo el objeto que hara la llamada let llamada = new XMLHttpRequest(); } window.onload = cargarJSON; |
Indicamos la ruta del fichero, en mi caso esta en el mismo sitio que el fichero JS.
|
1 2 3 4 5 6 7 8 9 10 11 |
function cargarJSON() { // Creo el objeto que hara la llamada let llamada = new XMLHttpRequest(); // Ruta de donde esta el fichero let url = "datos.json"; } window.onload = cargarJSON; |
Ahora vamos a establecer que función realizara nuestra petición al recibir los datos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function cargarJSON() { // Creo el objeto que hara la llamada let llamada = new XMLHttpRequest(); // Ruta de donde esta el fichero let url = "datos.json"; // Indico que debo hacer cuando reciba una respuesta llamada.onreadystatechange = function () { // Si todo esta bien if (this.readyState == 4 && this.status == 200) { // Parseo la informacion y la muestro let datos = JSON.parse(this.responseText); console.log(datos); } } } window.onload = cargarJSON; |
La condición del if sirve para comprobar que la petición ha llegado correctamente.
Y dentro del if lo que hacemos es parsear el objeto que con llega en responseText.
Por ultimo, debemos lanzar la petición, con los métodos open y send del XMLHttpRequest.
En open, indica el tipo de llamada (GET), la url a la que llamo (la del fichero) y si es asíncrono o no (si, es decir, true).
Al hacer send, enviamos la petición donde le hemos indicado y al recibir los datos llamara a la función que le hemos indicado.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function cargarJSON() { // Creo el objeto que hara la llamada let llamada = new XMLHttpRequest(); // Ruta de donde esta el fichero let url = "datos.json"; // Indico que debo hacer cuando reciba una respuesta llamada.onreadystatechange = function () { // Si todo esta bien if (this.readyState == 4 && this.status == 200) { // Parseo la informacion y la muestro let datos = JSON.parse(this.responseText); console.log(datos); } } // Abro la llamada o peticion llamada.open("GET", url, true); // lanzo la peticion llamada.send(); } window.onload = cargarJSON; |
Con esto estaría todo, vamos a probarlo en el navegador (abrir la consola del navegador):
Os dejo un vídeo donde lo explico todo con mas detalle:
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta