Haciendo peticiones AJAX a una REST API usando vanilla JavaScript y XHR

Aprendiendo AJAX con la Rick y Morty REST API

by Iveta Karailievova Date: 26-12-2020 AJAX JS XHR peticiones HTTP vanilla JS


Imagina que acabas de construir tu primera página web estática y te gustaría añadir alguna funcionalidad para hacerla más atractiva y generalmente más utilizable. Tal vez te gustaría entretener al visitante de tu página web con informaciones sobre los gatos generadas al azar, chistes o, (preferiblemente no generadas al azar) pronósticos del tiempo o información de la bolsa de valores. ¿Cómo lograrlo? Con llamadas AJAX! Estas son útiles en situaciones en las que necesitas obtener datos de otro servidor. Gracias a AJAX, puedes dotar tu página web de contenido interesante proporcionado por un servidor de terceros, usando sólo conocimientos de desarrollo de front-end. En este artículo construiremos una funcionalidad que genere y muestre en nuestra página personajes aleatorios de Rick y Morty (estoy segura de que la mayoría de los nerds conocéis bastante bien la serie, pero para los que no, os la recomiendo mucho).  El único lenguaje que necesitamos usar es JavaScript básico (también llamado "vanilla"), y el resto de la magia (la parte de atrás) será proporcionada por la Rick and Morty REST API

REST API ENDPOINTS

Puedes pensar en ellos simplemente como URLs, donde cuando envías una petición HTTP correctamente formulada, obtienes una respuesta, casi siempre en formato JSON o XML. Para comunicarse con una API REST necesitas usar HTTP y especificar el método: GET, POST, PUT, PATCH o DELETE. En nuestro caso, sólo usaremos el método GET, porque queremos obtener y leer los datos (una imagen) del servidor.

¿Pero qué tiene que ver AJAX con todo esto?

El nombre puede recordar a un club de fútbol o a un agente de limpieza, pero el AJAX del que vamos a hablar hoy es otra cosa. AJAX, como ya dijimos, es una técnica que permite añadir interactividad a las páginas web y hacerlas más dinámicas, comunicándose con un servidor web. El contenido de tu página web puede ser actualizado con un clic del ratón o cualquier otro evento DOM. Y lo más importante - gracias a este método los cambios se llevan a cabo sin necesidad de refrescar o recargar la página! Esto conduce a una mejor y más fluida experiencia del usuario.

Detrás del nombre de esta técnica se esconden los secretos de su magia:

  • Asíncrono: esta es una característica realmente importante porque gracias a que el código se ejecuta de manera asíncrona, nuestra web puede ser mostrada sin ningún tipo de retrasos. Imagina que quieres añadir una característica interesante a tu web como el pronóstico del tiempo actualizado, y lo haces consultando un servidor ajeno con la API de información meteorológica. Ahora bien, si el servidor en el que se ejecuta el servicio de pronóstico tiene una interrupción, tu página, si no fuera por la asincronía, también se rompería, porque otras partes de tu código no podrían ejecutarse porque el programa se quedaría atascado esperando a que el servidor meteorológico defectuoso enviara su respuesta (lo cual podría no suceder nunca). Gracias a que las llamadas AJAX son asincrónicas, el código responsable de solicitar y recibir la respuesta de un servidor web diferente se lleva a cabo en un segundo plano, sin causar ningún retraso en la visualización de otras partes de la página. Así pues, mientras que la parte del código en la que se espera una respuesta puede estar esperando, las otras partes continúan y sólo después de que llegan los resultados de la API, el contenido se actualiza en consecuencia.
  • JavaScript: el lenguaje de scripts usado en la parte front-end para hacer que estas llamadas funcionen. También es responsable de manipular los elementos DOM para mostrar los datos que recibimos en la respuesta del servidor.
  • XML: esta parte es algo engañosa. Históricamente, sólo se enviaban datos en formato XML como respuesta. Hoy en día, la respuesta que obtenemos del servidor puede estar en diferentes formatos, no sólo XML, sino también JSON, HTML o texto plano.

Toda esta teoría se nos está acumulando, pero el uso en la vida real es realmente súper sencillo. Volvamos al ejemplo prometido de Rick y Morty.

Empezando - preparando el código HTML y CSS del ejemplo AJAX

En nuestro archivo index.html, ponemos dentro el elemento <body>:

<main>
<label for="number">Choose a number</label><br>
<input id="number" type="number" min="1" max="671" />
<figure>
<img id="avatar" src="" alt="" />
<figcaption id="imageDescription"></figcaption>
</figure>
</main>

y para ponerlo un poco más bonito, algunas reglas CSS:

body {
background-color: pink;
color: grey;
font-size: xx-large;
text-transform: uppercase;
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

La parte más importante - nuestro código JavaScript

Empecemos con la parte fácil: crear constantes para acceder a los elementos DOM que vamos a necesitar:

// // el inputValue nos permite acceder al valor de la entrada del usuario, es decir, el número elegido
const inputValue = document.getElementById('number')
// esta constante nos permite establecer la imagen a mostrar, cambiando dinámicamente su atributo "src"
const avatar = document.getElementById('avatar')
// aquí creamos un enlace al elemento donde pondremos la descripción de la imagen, para que podamos cambiar el nombre del personaje mostrado
const imageDescription = document.getElementById('imageDescription')
 

Entonces, ¿cómo funciona AJAX exactamente? Actualmente hay dos formas principales en las que podemos configurar una llamada AJAX que funcione, usando XHR o el más moderno FETCH API. En este artículo, usaremos la tradicional, la que usa los objetos XHR

XHR (XMLHttpRequest Object)

XHR son las siglas de XMLHttpRequest. Es un objeto especial ya incorporado en todos los navegadores web modernos. Este objeto es lo que nos permite hacer peticiones a un servidor web y obtener las respuestas que éste envía. 

En JS, este objeto está instanciado así:

var request = new XMLHttpRequest()

var request = new XMLHttpRequest()

nota: usamos el nombre de la variable "request" en este ejemplo pero los desarrolladores a menudo también la llaman "xhttp"

El siguiente paso es usar el método "open" del objeto XHR para crear una conexión con el servidor remoto. Esto se hace configurando el método HTTP y la URL del servidor. Para mantener este ejemplo bonito y fácil, sólo vamos a cubrir el método GET. Este método HTTP se utiliza cuando se desea obtener datos de un servidor, y también permite pasar algunos parámetros en forma de parámetros de URL. En nuestro ejemplo, queremos obtener la imagen de un personaje. Para ello, tenemos que hacer saber al servidor remoto, qué imagen del personaje queremos mostrar. Por lo tanto, enviamos el ID del personaje en la URL. Para poder modificar fácilmente el ID del personaje que queremos obtener, usamos una constante con una expresión regular (regEx):

const API_URL = 'https://rickandmortyapi.com/api/character/:id'
const URL = API_URL.replace(':id', id)
request.open('GET', URL)

A continuación establecemos los encabezados de la petición, para indicar al servidor web que estamos usando XHR como nuestra técnica de petición. Muchas librerías JS, como Prototype o JQuery añaden esta cabecera automáticamente. Indica que la solicitud se ha realizado mediante XMLHttpRequest en vez de ser realizada haciendo clic en un enlace o enviando un formulario. ¿Pero por qué necesitamos decirle al servidor web que estamos usando AJAX? La respuesta es por seguridad. De esta manera, le hacemos saber al servidor web que la solicitud no ha sido manipulada por un hacker.

request.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

Como sabemos que los datos que recibimos de nuestra API de Rick y Morty estarán en formato JSON, necesitamos hacerlo saber a nuestro objeto de petición:

request.responseType = 'json'

La siguiente parte es muy interesante: usamos el evento load, que se lanza cuando una transacción XMLHttpRequest se completa con éxito. Este evento está soportado por la mayoría de los navegadores modernos y puede ser usado como un reemplazo del tradicional evento onreadystatechange. Para manejarlo, necesitamos usar la propiedad onload. Además, se necesita una función de callback, que hace el verdadero trabajo.

La sintaxis básica es la siguiente:

XMLHttpRequest.onload = callback

En nuestro ejemplo, sería así:

request.onload = function () {

// el estado de respuesta nos dice el código de estado HTTP, si es 200, significa que el estado de respuesta es "OK"
if (this.status == 200) {

// guardamos la respuesta en una variable
var newCharacterJSON = this.response
console.log(newCharacterJSON)

// al analizar la estructura de los datos de respuesta, sabemos que necesitamos acceder a la llave "image" del objeto JSON para obtener el URL de la imagen
var imagePath = newCharacterJSON.image

// ahora establecemos el atributo src de nuestro elemento de imagen como la URL de la respuesta
avatar.setAttribute('src', imagePath)

// para obtener la descripción de la imagen, accedemos a la llave "nombre" del JSON
var characterName = newCharacterJSON.name
if (characterName) {

// establecemos el texto para mostrar el nombre que obtuvimos de la respuesta
imageDescription.innerHTML = characterName
} else {

// si no se ha dado ninguna información de entrada por parte del usuario, mostramos el mensaje para elegir un número
imageDescription.innerHTML = 'Please choose a number'
}
} else {
// si el estado de la respuesta es diferente de 200, se produjo un error (puede ser que el número del ID del personaje elegido esté fuera del rango)
imageDescription.innerHTML =
`An error occurred during your request! Code: ${request.status}`
}
}

Y el último trozo de código, usamos el método de envío:

request.send()

Después de envolver esos pasos en una función que acepte el número de identificación del personaje como parámetro, ahora tenemos lo siguiente:

function getCharacter (id) {
const URL = API_URL.replace(':id', id)
request.open('GET', URL)
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
request.responseType = 'json'
request.onload = function () {

// el estado de respuesta nos dice el código de estado HTTP, si es 200, significa que el estado de respuesta es "OK"
if (this.status == 200) {

// guardamos la respuesta en una variable
var newCharacterJSON = this.response
console.log(newCharacterJSON)

// al analizar la estructura de los datos de respuesta, sabemos que necesitamos acceder a la llave "image" del objeto JSON para obtener el URL de la imagen
var imagePath = newCharacterJSON.image

// ahora establecemos el atributo src de nuestro elemento de imagen como la URL de la respuesta
avatar.setAttribute('src', imagePath)

// para obtener la descripción de la imagen, accedemos a la llave "nombre" del JSON
var characterName = newCharacterJSON.name
if (characterName) {

// establecemos el texto para mostrar el nombre que obtuvimos de la respuesta
imageDescription.innerHTML = characterName
} else {

// si no se ha dado ninguna información de entrada por parte del usuario, mostramos el mensaje para elegir un número
imageDescription.innerHTML = 'Please choose a number'
}
} else {
// si el estado de la respuesta es diferente de 200, se produjo un error (puede ser que el número del ID del personaje elegido esté fuera del rango)
imageDescription.innerHTML =
`An error occurred during your request! Code: ${request.status}`
}
}
request.send()
}

Pero, ¿cómo invocamos a la función? Fácilmente, sólo tenemos que añadir un listener de eventos a nuestro elemento input. En este ejemplo elegimos usar el evento change, que se dispara cada vez que el valor del campo de entrada se cambia.

inputValue.addEventListener('change', function () {
const choosenNumber = inputValue.value
getCharacter(choosenNumber)
})

Si has llegado hasta aquí, ¡enhorabuena! Pueden echar un vistazo aquí para ver el código completo y una demostración de este ejercicio.

 
by Iveta Karailievova Date: 26-12-2020 AJAX JS XHR peticiones HTTP vanilla JS visitas : 3677  
 
Iveta Karailievova

Iveta Karailievova

Originally coming from a marketing background, decided to turn her life around and immerse herself into the wonderful exciting and most importantly – never boring world of technology and web development. Proud employee at MA-NO . Easily loses track of time when enjoying working on code. Big fan of Placebo, cats and pizza.

 
 
 

Artículos relacionados

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Node.js: herramientas de código abierto para los desarrolladores

De la amplia gama de herramientas disponibles para simplificar el desarrollo de Node.js, aquí están las mejores. Una encuesta en StackOverflow afirma que el 49% de los desarrolladores usan Node.js para…

Cómo crear un aplicación Vue.js en 5 minutos

Vue.js se está volviendo cada vez más popular, convirtiéndose en un competidor significativo de frameworks como Angular o React.js. Como front-end framework para principiantes, conquista con éxito los corazones de…

Vue.js - Cómo usar (con seguridad) un plugin de jQuery con Vue.js

No es una buena idea usar jQuery y Vue.js en la misma interfaz. No lo hagas si puedes evitarlo, pero probablemente si estás leyendo esto no porque quieras usar jQuery…

Como construir una API RESTful - Guía paso a paso

En este artículo, voy a hablar sobre cómo diseñar mejor sus APIs RESTful para evitar errores comunes Como desarrolladores de software, la mayoría de nosotros usamos o construimos APIs de REST…

Cómo convertirte en un desarrollador web actual

Hay un montón de tutoriales en línea completamente gratis. Si eres lo suficientemente autodirigido e interesado, no tienes ninguna dificultad para entrenarte a ti mismo. El punto para aprender a…

Las mejores librerías JavaScript 2018

Javascript sigue siendo el lenguaje de programación más popular y utilizado en 2018. El ecosistema a su alrededor està sigue creciendo sigue creciendo y el número de frameworks y librerías que…

24 recursos gratuitos para programadores novatos

Cuando estamos descubriendo nuevas áreas, una pequeña ayuda es siempre bien venida. En la programación, los recursos existen en grandes cantidades para ayudar a todos los tipos de desarrolladores. Para…

SpainJS: arranca la conferencia anual sobre Javascript en Madrid

El 5 de Julio arranca la segunda edición de SpainJS, la conferencia sobre Javascript organizada en Madrid. Tras la buena acogida de la primera edición donde asistieron cerca de 300 personas la segunda…

JQuery: Gestionar cookies fácilmente con Jquery.Cookies

Jquery.Cookie es un Plugin Jquery sencilloy ligiero para leer, escribir y borrar cookies. Empezamos con su installación incluyendo el escrípt después de la librería jQuery Utilización Para crear una sesión persistente…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración