XMLHTTPRequest

Clase 8 de 26 • Curso de Asincronismo con JavaScript

Maria Gabriela Rodriguez Cuevas

student•

📥 𝗖𝗹𝗮𝘀𝗲 #𝟳: 𝗫𝗠𝗟𝗛𝗧𝗧𝗣𝗥𝗲𝗾𝘂𝗲𝘀𝘁𝟳/𝟮𝟭 📤 . 📲 ++XMLHttpRequest++ es un objeto de JS que permite hacer peticiones hacia servicios en la nube(URLs o APIs). . 📪 ++Existen 5 estados en un llamado XMLHttpRequest:++ .

0 → Se ha inicializado.
1 → Loading (cargando).
2 → Se ha cargado.
3 → Procesamiento si existe alguna descarga.
4 → Completado. .

📫 ++Métodos y propiedades:++ . xmlhttp.open() → Prepara la petición para ser enviada tomando tres parámetros: prótocolo, url, asíncrono (true). xmlhttp.readyState → Retorna el estado de la petición. xmlhttp.onreadystatechange → Un eventHandler que es llamado cuando la propiedad readyState cambia. xmlhttp.status → Retorna el estado de la respuesta de la petición. (200,400,500) xmlhttp.send() → Envía la petición. . 📬 ++Características del protocolo http:++ . ++Verbos++: Los verbos indican acciones que están asociadas a peticiones y recursos, es decir, sirven para la manipulación de recursos cliente/servidor. Los Verbos http son:

GET → Solicita un recurso.
HEAD → Solicita un recurso pero sin retornar información, la estructura de esta petición es igual que get tanto en su headers como estatus. Es útil cuando vamos a utilizar API, para comprobar si lo que vamos a enviar esta correcto y puede ser procesado.
POST → Sirve para la creación de recursos en el servidor.
PUT → Actualiza por completo un recurso, reemplaza todas las representaciones actuales del recurso de destino con la carga útil de la petición.
PATCH → Actualiza parcialmente un recurso.
DELETE → Elimina un recurso. .

📭 ++Los códigos de estados del servidor:++ . El código de estado (status codes) sirve para describir el estado de la petición hecha al servidor.

1xx → Indican que la petición fue recibida por el servidor, pero está siendo procesada por el servidor.
2xx → Indican que la petición fue recibida, aceptada y procesada correctamente.
3xx → Indican que hay que tomar acciones adicionales para completar la solicitud.
4xx → Indican errores del lado del cliente que hizo mal una solicitud.
5xx → Indican errores del servidor. Suelen aparecer cuando existe un fallo en la ejecución en el servidor. .

📧 ++Los códigos más comunes a la hora de interactuar con una API son:++ .

200 → OK → Indica que todo está correcto.
201 → Created → Todo está correcto cuando se hizo una solicitud POST, el recurso se creó y se guardó correctamente.
204 → No Content → Indica que la solicitud se completó correctamente pero no devolvió información. Este es común cuando se hacen peticiones con el verbo DELETE.
400 → Bad Request → Indica que algo está mal en la petición (no encontró algo).
401 → Unauthorized → Significa que antes de hacer una solicitud al servidor nos debemos autenticar.
403 → Forbidden → Indica que no tenemos acceso a ese recurso aunque se esté autenticado.
404 → Not Found → Indica que no existe el recurso que se está intentando acceder.
500 → Internal Server Error → Indica que algo falló, es un error que retorna el servidor cuando la solicitud no pudo ser procesada. . Fuente: aquí .

🖍️ ++Ejemplo en VSC:++ .

Ir a la consola y ubicarnos en la carpeta del proyecto y escribir el comando para instalar el paquete ++XMLHttpRequest++: npm i xmlhttprequest
Ir al ++VSC++ y crear un archivo llamado challenge.js en la ruta src/callback. El archivo queda:

const XMLHttppRequest = requiere('xmlhttprquest'); //llamado al XmlHttpRequest
const API = 'https://api.escuelajs.co/api/v1'; //API en mayúscula porque es una referencia que no va a cambiar

function fetchData(urlApi, callback){ //urlApi: no confundir y colocar API
	let xhttp = new XMLHttppRequest(); //referencia a new XMLHttpRequest

	xhttp.open('GET', urlApi, true); //petición "obtener" con true para habilitarlo
	xhttp.onreadystatechange = function(event) { //escucha diferentes estados de la solicitud y conocer cuando está disponible la información
	if(xhttp.readyState === 4) { //si el estado ha sido completada la llamada
		if(xhttp.status === 200 ){ //el servido responde de forma correcta
			callback(null, JSON.parse(xhttp.responseText)); //dentro de xhttp.responseTex recibimos lo que entrega el servidor en texto y se hace la transformación en JSON
		}
	} else {
		const error = new Error('Error' + urlApi);
		return callback(error,null); //es null porque no se está regresando ningún dato
	}
	}
	xhttp.send();
}

La nueva forma de hacer peticiones a una API es el fetch.

Eber Eliud Rodriguez Alvarado

student•

tus comentarios complementan mucho las clases 👌

Bryan Key

student•

Oye tu comentario sirve de MUCHISIMO! Tengo bastante tiempo en la industria y nunca habia detallado esos conceptos con detenimiento y reflexionado como tu lo has plasmado aca. (Los estados) Es super buena tu info! Gracias!

PD: Saber esto (estados) nos facilita mucho el manejo de los mismos a la hora de consumir cualquier recurso con estos metodos.

Go ahead Rodriguez!

Angel Duarte

student•

Viendo los comentarios, voy a intentar explicar más simple y paso a pasito la construcción de nuestra función fetchData.

Primero debemos declarar e importar el paquete de XMLHttpRequest, que nos permite utilizar objetos (XHR) para interactuar con servidores (en este caso la API de Platzi) para esto hacemos:

const XMLHttpRequest = require('XMLHttpRequest');

Lo que hace aquí "require()" es importar el módulo del id que le pasemos, además puede importar JSON y archivos locales. Pero necesitamos trabajar con XMLHttpRequest para manipular la API. |

Declaramos como constante el url de la API:

const API = 'https://api.escuelajs.co/api/v1/products';

Ahora es momento de iniciar con la función principal que en términos simples es:

function fetchData(urlApi, callback) {
}

El parámetro 'urlApi' hace referencia a cualquier API con la cuál estemos trabajando, en este caso la FakeStore de Platzi.
El segundo parámetro 'callback' es donde posteriormente vamos a pasar una función como argumento para poder controlar el flujo de información de la API. |

Necesitamos alguna manera de poder manipular las solicitudes que haremos para consultar los datos, para ello vamos a crear un espacio en memoria (una variable) en donde guardar el objeto (XHR) que importamos y gracias a los métodos ya construídos nos será mil veces más fácil desarrollar nuestra funcíon.

    let xhttp = new XMLHttpRequest();

Si estas familiarizado con OOP (Programación Orientada a Objetos) sabrás entonces que esto no es más que un constructor vacío, de la misma forma que:

	 let perrito = new Animal(); 🐶
	 let manzana = new Fruta();  🍎

Muy bien, ya podemos utilizar nuestra variable 'xhttp' (en conjunto al callback) como un objeto para acceder y manipular la API. Primero debemos abrir una solicitud (un request) esto lo hacemos con el método '.open()'

    xhttp.open('GET', urlApi, true);

Ahora bien el primer parámetro es el tipo de solicitud que vamos a realizar, pudo haber sido "POST", "PUT", "DELETE". Pero vamos a utilizar "GET" 😎
El segundo parámetro es la url de la API a la cuál le vamos a realizar el request.
Último y tercer parámetro recibe un booleano para indicarle si vamos a utilizar asíncronismo o no, tal simple como TRUE o FALSE según el caso.

Todo bien hasta aquí ¿cierto?, toma un pequeño descanso para repasar todo lo que has aprendido, que lo siguiente es un poquito más complejo.

Vamos a hacer una función anónima para verificar que el request de los datos ha salido con éxito y en caso de un tener error hacer registro de éste. Para ello nos vamos a apoyar de la propiedad de '.onreadystatechange' ésta llamará a la función cada que el readyState cambie (readyState retorna el número del estado en dónde se encuentra el request)

xhttp.onreadystatechange = function (e) {
}

Ahora bien el ciclo de vida del readyState es el siguiente:
Entonces debemos parar en '4' cuando la operacion ha sido completada

	if (xhttp.readyState === 4) {
} ✅

Una vez completado con éxito necesitamos saber que tipo de respuesta nos entregó el servidor, así que volvemos a verificar con un ' if ' la propiedad '.status' según el tipo de respuestas:
Entonces el if nos queda de la siguiente manera:

if (xhttp.readyState === 4) {
	if (xhttp.status === 200) {
	} ✅
} ✅

¡Ya comprobamos que tanto el request como el response hayan sido exitosos! Ahora podemos invocar nuestro callback (función por definir más tarde para manipular los datos)

if (xhttp.readyState === 4) {
	if (xhttp.status === 200) {
		callback(null, JSON.parse(xhttp.responseText));
	} ✅
} ✅

¿Y por qué tiene tantos parámetros el callback si aún nisquiera lo hemos definido? 🤔 Mira te explico:

El primero vamos a utilizarlo en caso de que se presente un error, pero como ya hemos verificado eso podemos simplemente dejarlo como un 'null'.
En el segundo usamos la función 'JSON.parse()' para convertir en datos que podamos controlar el texto que nos retorna la propiedad '.responseText' después de hacer el request.

Listo🥳, dejamos preparado nuestro callback sin errores y con la información "traducida" para cualquier momento en el que necesitemos usarla. Pero (sep, siempre hay un 'pero') ¿Y si el request no es exitoso?¿Qué va a pasar con nuestra función?😔

Hay que regresarnos al primer if y utilizar la estructura de else para que en caso de haber un error registrarlo y enviarlo al callback (donde antes habiamos puesto 'null') y ahora pasar el null en la parte de los datos, ya que nunca pudo consultarlos.

if (xhttp.readyState === 4) {
	if (xhttp.status === 200) {
		callback(null, JSON.parse(xhttp.responseText)); ✅
	} ✅
} else ❌ {
		const error = new Error('error' + urlApi);
		return callback(error, null);
}

🏆 ¡¡ Acabamos la función !! 🏆 Ya solo resta utilizar el método '.send()' después de procesar los datos para enviar el request al server (API)

xhttp.send();

Cualquier feedback es bien recibido para complementar mis conocimientos y el de cualquiera que lea esto.

⚠️(BONUS)⚠️

Para no usar "Magic numbers" se pueden declarar los estados a verificar como constantes, les dejo mi código completo

const XMLHttpRequest = require('XMLHttpRequest');
const API = 'https://api.escuelajs.co/api/v1/products';
const DONE = 4;
const OK = 200;

function fetchData(urlApi, callback) {
    let xhttp = new XMLHttpRequest();

    xhttp.open('GET', urlApi, true);
    xhttp.onreadystatechange = function (e) {
        if (xhttp.readyState === DONE && xhttp.status === OK) {
            callback(null, JSON.parse(xhttp.responseText));
        } else {
            const error = new Error('error' + urlApi);
            return callback(error, null);
        }
    }
    xhttp.send();
}

César Augusto Cortés Labrada

student•

Gran aporte. Me ha ayudado a entender mejor.

Andrea Alejandra Martínez Garnica

student•

Muchas gracias!! Tu comentario es muy valioso.

Cesar Smith

student•

No entendi para nada esta clase, siento que lo explica de manera muy tecnica con conceptos que aun no he aplicado en lo q llevo de aprendizaje de JS. Trato de hacer analogias para entenderlos y no logro, si alguien tiene una curso previo q pueda tomar para poder llevar el ritmo del prof se lo agradeceria

Luz Sthephany Granados Castro

student•

🚩😀 Mira la documentación de xmlhttprequest quizás pueda ayudarte un poco a entender mejor la clase, ya que como se trata de asíncrona es necesario consumir un API para entender un poco como son los llamados y las demoras que esto implica en el hilo de ejecución del código ⏱ https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Jose Alfredo Cano Hernandez

student•

Si man si te entiendo, a mi en lo personal no me gustan mucho las clases con el por la misma razón, lo hace todo de una manera muy técnica no te abrumes, sigue con los videos y mas adelante algo te va a hacer "click", tal vez en otro curso y en ese momento te regresas y te aseguro que vas a entender, a mi me paso con el curso de nico de consumo de apis en angular... con el entendí esto una vez que se llevo a la practica.

Giannina Stefania Baccelliere Mancilla

student•

Para mi fue casi chino.... pero seguiré estudiando para aprender!

Fabricio Aguilar

student•

Ahora no me siento solo, estamos igual, espero que hayas logrado entenderlo! 😅

Sebastian Mera

student•

Ya somos tres pero vamos que si se puede 💪

Julian Ward

student•

Esta clase me dejo mas dudas que certezas asi que les dejo un video que me ayudo a entederlo:

https://www.youtube.com/watch?v=TF-fwphqt7g&ab_channel=GermanRodriguez

Keinner Ross Durantt Rodríguez

student•

Gracias por dejar ese video, explicó TODAS las dudas que me surgieron de esta clase, Oscar debió explicar más " que" de cada cosa, y no asumir que se sobreentiende.

https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest

Dejo este link que explica a XMLHttpRequest, espero les sirva, igual me ayudó.

Matias Diaz

student•

Excelente! Este aporte tendría que estar mas arriba! Muchas gracias!

Lucas Aristizábal

student•

justo ayer acabé el curso viejo de asincronismo y justo hoy sale el nuevo 🙂

Oscar Barajas Tavares

Team Platzi•

A repasar los conceptos dentro de esta renovación.

Gaston Blanco

student•

Te entiendo, yo lo hice a 1 mes al viejo. Pero a aca estoy repasando las cosas que no me quedaron claras.

Mauricio Montenegro

student•

TERRIBLE esta clase, como consejo se debería estructurar de mejor manera la clase, hay conceptos que nunca se los vio en las clases pasadas y eso hace que se produzcan confusiones, se debería mejorar ese aspecto.

Esteban Sanabria

student•

completamente de acuerdo

Emerson David Cabrera Salas

student•

Bueno, venía bien emocionado entendiendo conceptos complejs y nuevos para mí del asincronismo, pero en esta clase quedé bien perdido, no domino nada de lo que dice el profe, escribía el código pero sin entender bien qué es lo que estoy haciendo. Seguiré investigando a ver si logro captar la idea.

Cecilio Cauich

student•

Las clases que he visto de él han sido siempre lo mismo. Y este curso es nuevo por lo que esperaba que leyendo los comentarios mejorarías sus clases pero no.

Kevin Harold Gutierrez Ramirez

student•

Estoy igual que tú. Toca investigar, aprender, practicar por otro lado y regresar a este curso cuando dominemos esos conceptos.

Yo lo tomo como mini retos para seguir aprendiendo.

Te recomiendo cambiar de perspectiva cada vez que te encuentres en esta zona(perdido, igual que yo), creo que así es mucho mejor y hace más llevadero los cursos. SUERTE BRO!!!! A meterle puche!!!

Cristian Leonardo Acero Mancipe

student•

Porfirio González López

student•

Gran complementación

Paul Martin Vargas Portugal

student•

Para obtener el JSON se utilizará un API llamado XMLHttpRequest (a menudo llamado XHR). Éste en un objeto JavaScript muy útil que permite realizar solicitudes de red para recuperar recursos desde un servidor vía JavaScript (por ejemplo: imágenes, texto, JSON, incluso código HTML), con lo que es posible actualizar pequeñas secciones de contenido sin tener que volver a cargar la página entera. Con ello se obtienen páginas web más interactivas, pero está fuera del alcance de este artículo entrar en detalle.

1 Para empezar, se debe almacenar la URL del JSON que se quiere recuperar en una variable. Agregue lo siguiente al final del código JavaScript:

const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

2 Para crear una solicitud, se necesita crear una nueva instancia de objeto de solicitud desde el constructorXMLHttpRequest, utilizando la palabra clave new. Agregue lo siguiente a continuación de la última línea:

const request = new XMLHttpRequest();

3 Ahora es necesario abrir una nueva solicitud utilizando el método open(). Agregue la siguiente línea:

request.open('GET', requestURL);

Esto requiere al menos dos parámetros — Existen otros parámetros opcionales disponibles. Sólo se requieren los dos obligatorios para este ejemplo:

El método HTTP a usar cuando se hace una solicitud en red. En este caso GET es adecuado, dado que sólo se estan recuperando algunos datos simples. La URL a la que se realiza la solicitud — esta es la URL del archivo que se almacenó antes.

4 Luego, agregue las siguientes dos lineas — establecemos el responseType a JSON, de esta forma ese XHR sabe que el servidor estará retornando JSON y que esto debería ser convertido en segundo plano en un objeto JavaScript. Entonces se envía la solicitud con el método send():

request.responseType = 'json';
request.send();

5 La última parte de esta sección comprende la espera por la respuesta a retornar desde el servidor y luego, manejarla. Agregue el siguiente código bajo el código previo:

request.onload = function() {
  const superHeroes = request.response;
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

En este punto se está almacenando la respuesta a la solicitud (disponible en la propiedad response) en una variable llamada superHeroes; esta variable ahora contendrá el objeto JavaScript basado en el JSON. Luego se pasa el objeto como argumento a dos funciones — la primera llenará el <header> con los datos correctos, mientras la segunda creará una tarjeta de información para cada héroe en el equipo y la insertará en <section>.

Se ha contenido el código en un manejador de eventos que se activa cuando se dispara el evento de carga (ver onload) — esto es porque el evento de carga se dispara cuando la respuesta ha sido retornada de forma exitosa; de esta manera se garantiza que request.response estará disponible cuando se intente hacer algo con ella.

Markin Piero Pulache Guarniz

student•

gracias paul

Luis Hernando Sendoya Serrato

student•

¿alguien prefiere usar fetch?

Juan Luis Medina Coelho

student•

Diojmío, ¿a alguien más le pasa que a veces no entiende nada de lo que está pasando y siente que no conecta nada de lo que está viendo con las clases pasadas? Me suele pasar, al final siempre logro entender pero no deja de darme vértigo cada vez que me pasa.

Kevin Salazar

student•

Suele pasar, lo mejor en estos casos es estructurar todo lo que no entiendes y empezar a buscar, por aquí te dejo un módulo, con información de todo lo que estaremos viendo aquí.

Fran L

student•

xhttp es un objeto instanciado de la clase XMLHttpRequest. Para ello que usamos el siguiente código:

let xhttp = new XMLHttpRequest();

una vez lo creamos, podemos ocupar sus atributos tales como :

xhttp.open()
xhttp.onreadystatechange()
xhttp.readyState
xhttp.status
xhttp.send()

Andrea Carolina Mora López

student•

y digamos la linea que hace al principio de

const XMLHttpRequest = require ('xmlhttprequest');

en realidad está llamando al paquete que contiene a esta clase ? o para que sirve esta linea ?

Jorge Arias Argüelles

student•

@acmoral Hola! Lo que dices esta bien. 👌

Un poc más es explicaciuón, por si es de ayuda....

La primera linea sirve para importar al archivo, el paquete que previamente instalamos cuando escribimos npm install xmlhttprequest.

const XMLHttpRequest = require ('xmlhttprequest');

Con la anterior linea no estamos usando xmlhttprequest, por eso es necesario crear una instancia con la palabra reservada new, como lo hacemos al interior de la función fetchData().

let xhttp = newXMLHttpRequest();

Jonathan Guidi

student•

Hola gente! Si, es complejo comprender como funciona XMLHTTPRequest en un principio, pero no se preocupen. Actualmente es más frecuente utilizar FETCH, puesto que es una API más actual y moderna que utiliza PROMESAS y nos permite hacer lo mismo (o más) y escribir menos código. Recomiendo este link para comprender mejor el tema ... https://lenguajejs.com/javascript/peticiones-http/xhr/

Jorman Urbina

student•

bro super necesario este comentario. bien ahi

Israel Iran Canul Chi

student•

Hoy 9/15/2023 me quede en shock cuando empezó a escribir el xmlhttprequest, y yo preguntándome por dentro ¿Por qué no uso Fetch?.

Devi Amaolo

student•

de donde sale esa funcion callback que llamamos una vez que hacemos la validacion?

Xavier Medina Veintimilla

student•

Hola :D

¿Qué problema tienes? ¿En qué podemos ayudarte?

Antonio Javier Colmenarez Gonzalez

student•

también tengo esa duda

Porfirio González López

student•

Esta clase la siento como un partido de futbol con extraterrestres:

. Sé qué están haciendo (jugando futbol, comprendo la lógica de la clase), pero no sé quiénes son, que hace, y por qué (Son extraterrestres jamás los había visto, hay muchos nuevos métodos que me pierdo) . Talvez no necesitamos saber todo eso (lo enseñan más adelante), pero como que al Profe le falto decir más sobre todos eso métodos .

Todos los nuevos métodos

requiere();
open();
.onreadystatechange
.readyState
.status
.parse();
.responseText
.send();

Mario José Yanez Sifontes

student•

Hola compañeros, comparto mis apuntes por si le son de ayuda a alguien.

Nunca paren de aprender! <3

Porfirio González López

student•

Buen aporte para como una introducción.

Carlos Enrique Rocha Zamudio

student•

para los compañeros que se encuentren un poco perdidos, les recomiendo verse el siguiente video el cual me explico perfectamente como funciona el XMLHttpRequest, es un poco largo pero vale la pena para poder entender esto https://www.youtube.com/watch?v=6CQrK1sS7WA&ab_channel=jonmircha