Como leer una API JSON con XMLHttpRequest

Obtener información de una API para mostrarla en tus aplicaciones es una de las tareas que como programador no puedes dejar de aprender.

En este artículo vas a ver como leer un API JSON usando JavaScript puro y XMLHttpRequest.

XMLHttpRequest es un objeto nativo del navegador que permite hacer solicitudes HTTP desde JavaScript.

A modo pruebas, usaré la API JSON Placeholder, una API gratuita para hacer pruebas y prototipos.

Como siempre, te ilustraré todo en base a un ejemplo en funcionamiento.

En este ejemplo he decidido depositar en el cuerpo de mi página un contenedor vacío que usaré para incorporar los contenidos que retorne la llamada a la API.

Contenedor HTML

Dentro del <body> o cuerpo de la página voy a agregar el contenedor de resultados vacío.

<div class="response"></div>

Llamada XMLHttpRequest

Luego, en archivo JavaScript independiente, agrego la llamada XMLHttpRequest de la siguiente manera:

const request = new XMLHttpRequest();
const url = 'https://jsonplaceholder.typicode.com/posts';
request.open("GET", url);
request.send();
 
request.onreadystatechange = (e) => {
    if (request.readyState == 4 && request.status == 200) {
        const posts = JSON.parse(request.responseText);
        let html = '<div class="posts">';
        posts.forEach(function(post, index) {
            console.log(`${index} : ${post.title}`);
            html += `<div class="post card">
                        <div class="card-header">${post.title}</div>
                        <div class="card-body">${post.body}</div>
                    </div>`;
        });
        html += '</div>';
        document.querySelector('.response').innerHTML = html;
    }
}

En este caso, en la constante request estoy creando una instancia del objeto nativo del navegador XMLHttpRequest.

Creo otra constante llamada url para guardar en ella la url que usaré como fuente de datos en formato JSON.

Mediante el método GET, abro y envío una solicitud a la url indicada.

A continuación, uso el evento «onreadystatechange» para ejecutar el código de respuesta al cliente cuando la solicitud esté lista.

Cuando la solicitud ha finalizado y la respuesta es positiva, con responseText recupero la información para convertir el formato JSON en array.

A la vez que creo una variable html para guardar el código HTML del resultado, recorro el array para capturar cada elemento de la API y sacar los atributos de su información individualmente para crear la estructura HTML que necesito con el objetivo de mostrarlo en el formato deseado.

En el siguiente enlace puedes ver que atributos o valores tiene cada elemento en la API:

https://jsonplaceholder.typicode.com/posts

Finalmente, el contenido de la variable html que he rellenado dinámicamente la deposito en mi contenedor de respuesta que tengo vacío en el cuerpo de la página.

Ver demo Descargar

Conclusiones

Bastante más fácil de lo que pensabas, ¿verdad?

En este punto, me gustaría hacerte saber que XMLHttpRequest es un objeto antiguo que está quedando obsoleto pero todavía se usa porque tiene algunas características que los métodos modernos para hacer este tipo de llamadas todavía no tienen.

Algunas de las características más especiales que solo tiene este objeto son el hecho de tener que soportar scripts existentes que usan todavía XMLHttpRequest, el soporte a navegadores antiguos y el rastreo del progreso de la subida de archivos que es muy útil para el programador hoy en día ya que simplifica mucho el código de progreso.

En una próxima entrada me gustaría hacerte saber todo sobre XMLHttpRequest. Estate al tanto y no te lo pierdas.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(2 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre