Como recuperar datos con un GET en AJAX

11/12/20190 comentarios

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:


[
    {
        "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.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="main.js"></script>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Ya teniendo creado nuestro main.js, empezamos creando nuestra función y asociarlo con el onload para que se ejecute al principio.



function cargarJSON() {

}

window.onload = cargarJSON;

Creo el objeto que es el que hará la llamada:


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.


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.


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.


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):