No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

XMLHTTPRequest

8/26
Recursos

Aportes 131

Preguntas 33

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

馃摜 饾棖饾椆饾棶饾榾饾棽 #饾煶: 饾棲饾棤饾棢饾棝饾棫饾棫饾棧饾棩饾棽饾椌饾槀饾棽饾榾饾榿饾煶/饾煯饾煭 馃摛
.
馃摬 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:
.

  • 200OK 鈫 Indica que todo est谩 correcto.
  • 201Created 鈫 Todo est谩 correcto cuando se hizo una solicitud POST, el recurso se cre贸 y se guard贸 correctamente.
  • 204No 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.
  • 400Bad Request 鈫 Indica que algo est谩 mal en la petici贸n (no encontr贸 algo).
  • 401Unauthorized 鈫 Significa que antes de hacer una solicitud al servidor nos debemos autenticar.
  • 403Forbidden 鈫 Indica que no tenemos acceso a ese recurso aunque se est茅 autenticado.
  • 404Not Found 鈫 Indica que no existe el recurso que se est谩 intentando acceder.
  • 500Internal 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:
.

  1. Ir a la consola y ubicarnos en la carpeta del proyecto y escribir el comando para instalar el paquete XMLHttpRequest:
    npm i xmlhttprequest
  2. 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.

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

  1. 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.
    |
  1. Declaramos como constante el url de la API:
const API = 'https://api.escuelajs.co/api/v1/products';
  1. Ahora es momento de iniciar con la funci贸n principal que en t茅rminos simples es:
function fetchData(urlApi, callback) {
}
  • El par谩metro 鈥榰rlApi鈥 hace referencia a cualquier API con la cu谩l estemos trabajando, en este caso la FakeStore de Platzi.
  • El segundo par谩metro 鈥榗allback鈥 es donde posteriormente vamos a pasar una funci贸n como argumento para poder controlar el flujo de informaci贸n de la API.
    |
  1. 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();
	 let perrito = new Animal(); 馃惗
	 let manzana = new Fruta();  馃崕
  1. Muy bien, ya podemos utilizar nuestra variable 鈥榵http鈥 (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 鈥淧OST鈥, 鈥淧UT鈥, 鈥淒ELETE鈥. Pero vamos a utilizar 鈥淕ET鈥 馃槑
  • 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.


|

  1. 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 鈥榥ull鈥.
  • 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 鈥渢raducida鈥 para cualquier momento en el que necesitemos usarla. Pero (sep, siempre hay un 鈥榩ero鈥) 驴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 鈥榥ull鈥) 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);
}
  1. 馃弳 隆隆 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.


<h5>鈿狅笍(BONUS)鈿狅笍</h5>

Para no usar 鈥淢agic 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();
}

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

Para mi fue casi chino鈥 pero seguir茅 estudiando para aprender!

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

justo ayer acab茅 el curso viejo de asincronismo y justo hoy sale el nuevo 馃檪

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.

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.

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.

Mi problema con la escuela de Javascript es que pone este curso despu茅s de las clases b谩sicas de Javascript. En este curso estan usando funciones de NodeJs y Rest Api algo que te explican mas adelante. Mi recomendaci贸n es primero tomar el curso de NodeJs y Api Rest con express. Les comparto el enlace de unos excelente tutoriales en Youtube, son relativamente cortos y explican muy bien los conceptos que se ven aqui:

Aqui entenderas lo b谩sico de NodeJs Curso NodeJs desde cero
Aqui aprenderas sobre Rest api y Json Json Rest Api

驴alguien prefiere usar fetch?

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

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/

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();

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

Nunca paren de aprender! 鉂わ笍

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

XMLHTTPRequest no se usa mas, actualmente se usan otros metodos para hacer request, sin embargo entenderlo te ayuda un monton, por lo que recomiendo ver y reever esta clase hasta buscando informacion adicional.

Sugerencia requerida para entender mejor esta clase:

  • Conocer los VERBOS y status de una request: aca se puede ver un lindo y claro resumen.
  • Conocer los estados de XMLHttpRequest: aca mas info.
  • Entender el manejor de Errores en js: la docu de mdn sirve para esto.

Esta formula para hacer peticiones se utilizaba a los inicios de Javascript, ahora hay maneras mas sencillas de hacer esto, como fetch.
Creo que el profesor nos muestra este ejemplo para que sepamos que existe este m茅todo, por lo que no se desesperen si parece un c贸digo muy abrumador al principio.

Hola amigos, quer铆a aportar algo. Ojo, esto es seg煤n mi entendimiento, pero me ayud贸 a verlo de una forma un poco m谩s facil.
Al momento en el que el profesor llama a XMLHttpRequest del otro archivo, est谩 importando funciones que no son necesarias que nosotros creemos, ya que, como lo dijo en un principio, vienen del lado del navegador y no es necesario que las utilicemos, pero. Por lo que aprend铆 en el curso de EcmaScript y lo que veo en esta clase a XMLHttpRequest como una CLASE. que nos va a ayudar al momento de hacer el llamado a la API. para quien no sepa qu茅 es una clase ac谩 les dejo un ejemplo

class Calculator {
    constructor() {
        this.valueA = 0
        this.valueB = 0
    }
    
    suma(num1, num2){
        this.valueA = num1
        this.valueB = num2
        return this.valueA + this.valueB
    }
}

// Instancia
const calculadora = new Calculator()

calculadora.suma(2,2) //4

En este ejemplo vemos c贸mo se crea la clase, y que la funci贸n suma() es un METODO de la clase Calculator. ahora bien, Cuando queremos acceder a la funci贸n SUMA que est谩 DENTRO de Calculator lo que hacemos es crear una nueva instancia de esta clase. Y esto se hace con una variable, igualandola a new + nuestra clase, como ven en el ejemplo new Calculator() y haciendo esto. podremos acceder a cualquier funci贸n que est茅 dentro de la clase Calculator haciendo uso de la variable.m茅todo.
Por eso el profesor hace esto

let xhttp = new XMLHttpRequest();

y puede acceder a las funciones que est谩n por dentro de XMLHttpRequest ya que est谩 importando la clase con TODAS sus funciones desde el documento que instal贸 con 鈥渘pm i xmlhttprequest鈥 al inicio. Por eso despu茅s que crea la nueva instancia de esta forma solamente tiene que utilizar

xhttp.open; //Para acceder a la funci贸n open que est谩 dentro de xmlhttprequest
xhttp.onreadystatechange;
xhttp.readyState;
xhttp.status;
xhttp.responseText
xhttp.send()
//Todas son funciones que est谩n dentro de xmlhttprequest y podemos acceder a ellas como si trabajaramos con clases 

Ahora ya para entender qu茅 hace cada una de las funciones es bueno que lean la documentaci贸n de xmlhttprequest: aqu铆
Pero eso fue lo que hizo el profesor durante esta clase, trabajar con una clase que ya est谩 definida en el navegador y que pudo acceder a sus funciones llamando solamente a sus m茅todos despu茅s de crear una instancia de ella.
As铆 fue que yo lo entend铆, si alguien tiene alg煤n aporte m谩s, es bienvenido
Nunca paren de aprender 鉂わ笍

馃崈 les dejo el c贸digo comentado paso a paso.

// Se requiere el m贸dulo 'xmlhttprequest' para hacer solicitudes HTTP
const XMLHttpRequest = require("xmlhttprequest");

// Se define la URL de la API a la que se har谩 la solicitud
const API = "https://api.escuelajs.co/api/v1";

// Se define la funci贸n 'fectchData' que toma dos argumentos: 'urlAPI' y 'callback'
function fectchData(urlAPI, callback) {
	// Se crea una nueva instancia de 'XMLHttpRequest'
	let xhttp = new XMLHttpRequest();

	// Se abre una nueva solicitud HTTP GET a la URL especificada en 'urlAPI'
	xhttp.open("GET", urlAPI, true);

	// Se define una funci贸n para manejar el cambio de estado de la solicitud
	xhttp.onreadystatechange = function (event) {
		// Si el estado de la solicitud es 4 (completado)
		if (xhttp.readyState === 4) {
			// Si el c贸digo de estado HTTP es 200 (茅xito)
			if (xhttp.status === 200) {
				// Se llama a la funci贸n 'callback' con dos argumentos: null (sin error) y los datos recibidos (convertidos a un objeto JavaScript)
				callback(null, JSON.parse(xhttp.responseText));
			}
		} else {
			// Si el estado de la solicitud no es 4 (completado), se crea un nuevo objeto de error y se llama a la funci贸n 'callback' con dos argumentos: el objeto de error y null (sin datos)
			const error = new Error("Error " + urlAPI);
			return callback(error, null);
		}
	};

	// Se env铆a la solicitud HTTP
	xhttp.send();
}

Aqui tienen el comando npm

npm install xmlhttprequest

Hola peque帽o amigo, no te desanimes si no estas entendiendo los conceptos que hay en esta clase, es normal que no sepas algo que no conoces, como consejo no tomes notas de aqu铆 hasta el video de Callback Hell, una vez hayas visto estos 3 videos y prestado atenci贸n del proceso y el desenlace que explica el profe, regresa y vuelve a ver los videos haciendo anotaciones en tu c贸digo, as铆 como investigar cada uno de los nuevo m茅todos que veas, ya veras que cuando termines, algo va a ser click en tu cerebro.

Bueno aca les dejos las notas de la clase de hoy, con los estados de respuesta.

Espero que les sirva 馃槂

/* HTTP las respuestas se agrupan en 5 partes:
1- Respuestas informativas(100-199)
2- Respuestas sastifactorias(200-299)
3- Redirecciones(300-399)
4- Errores de clientes(400-499)
5- Errores de los servidores (500-599)

ReadyState
0- Es que aun no esta incializado.
1- Esta cargandose.
2- Se esta ejecutando.
3- Esta trabajando la solicitud.
4- Se completo.
*/

const XHMLHttpRequest= require('xmlhttprequest');
const API = 'https://api.escuelajs.co/api/v1'; //alt + 39 '

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

    xhttp.open('GET',urlApi, true); //Prepara la peticion para ser enviada tomando 3 parametros.
    xhttp.onreadystatechange= function(event){ //Un eventHandler que es llamado cuando readyState cambia.
        if(xhttp.readyState === 4 ){   // Retorna el estado de la peticion.
        if(xhttp.status === 200){      //Retorna el estado de respuesta de la peticion.
            callback(null,JSON.parse[xhttp.resposeText]); //Me convierte el valor a objeto.
        }       
        }else{
            const error= new error('Error' + urlApi) //Aca decimos que el error fue en la API.
            return callback(error,null)
        }
    }
    xhttp.send(); //Envia la peticion
}

p茅simo que se ense帽e de esta manera sin explicar el porqu茅 de .readySatate , por qu茅 se crea un condicional valid谩ndolo a 4, etc.

investigue por mi cuenta y es un tema m谩s amplio, recomiendo ver estos 2 videos para poder entender bien lo que el profesor dice.

Introducci贸n a AJAX

AJAX Objeto XMLHttpRequest

despu茅s de ver estos 2 videos, esta clase ya no ser谩 chino!

no entend铆 nada...

un comentario simplemente, tal vez hay un porque , pero si estamos en clases de asincronismo, porque usar esta librer铆a en vez de fetch o axios ? esta al ser mas antigua hay que configurar un mont贸n de cosas y si el sentido es formar a gente que tal vez no ha tocado estos conceptos antes se le complica mas. Hace a帽os con un microcontoladores que no ten铆an modulo UART, tenias que 鈥渋r tomando los tiempos鈥 para mantener un cierto rate de transmisi贸n en una comunicaci贸n, hoy nadie se plantear铆a hacerlo ni ense帽arlo as铆 ( habiendo m贸dulos como arduino o el ESP32)鈥, se pierde tiempo valioso, saludos y no es con mala intenci贸n , simplemente para un mejor feedback

Para las personas que se sienten perdidas con esta clase (yo tamien me perd铆 en algunos lados), como el profe dice al final, esta era una forma de hacerlo al comienzo , actualmente hay opciones muchos mas faciles, como fetch, axios , que nos permiten hacen esto de formas mas facil, est谩 muy bueno conocer los inicios , pero no recomendaria tratar de aprenderse toda esa funcion para hacer una petici贸n, esto es como las matematicas que nos ense帽an los dificil primero y luego alguna soluciones menos compleja que cumple el mismo objetivo

Como soy novato y no entendi un carajo, me tome la molestia de preguntarle a una IA, aqui la explicacion del codigo:

Este c贸digo define una funci贸n llamada fetchData() que utiliza la API XMLHttpRequest para hacer una solicitud HTTP GET a una API de productos (https://api.escuelajs.co/api/v1/products).

La primera l铆nea del c贸digo (const XMLHttpRequest = require('XMLHttpRequest');) indica que el c贸digo est谩 siendo ejecutado en un entorno Node.js y que se est谩 importando el m贸dulo XMLHttpRequest.

Las siguientes l铆neas definen algunas constantes que se utilizan en la funci贸n fetchData(). La constante API contiene la URL de la API de productos, DONE tiene un valor de 4 que indica que la solicitud ha finalizado y OK tiene un valor de 200 que indica que la solicitud ha sido exitosa.

La funci贸n fetchData() acepta dos argumentos: urlApi y callback. urlApi es la URL de la API que se va a solicitar, y callback es una funci贸n que se llamar谩 cuando se complete la solicitud.

Dentro de la funci贸n fetchData(), se crea una nueva instancia de XMLHttpRequest con let xhttp = new XMLHttpRequest();. Luego, se llama al m茅todo open() para configurar la solicitud HTTP GET con la URL de la API y se establece el tercer argumento en true para indicar que se desea una solicitud as铆ncrona.

Despu茅s de configurar la solicitud, se define una funci贸n an贸nima para el evento onreadystatechange. Este evento se dispara cada vez que el estado de la solicitud cambia. En esta funci贸n, se verifica si el estado es DONE y el estado HTTP de la respuesta es OK. Si es as铆, la funci贸n de devoluci贸n de llamada (callback) se llama con un primer par谩metro de null y un segundo par谩metro de los datos de respuesta JSON obtenidos de la API.

Si la solicitud falla o no es exitosa, se crea un objeto Error y se llama a la funci贸n de devoluci贸n de llamada con el error y un segundo par谩metro de null.

Finalmente, se llama al m茅todo send() de la instancia XMLHttpRequest para enviar la solicitud HTTP GET a la API.

En resumen, la funci贸n fetchData() utiliza XMLHttpRequest para hacer una solicitud HTTP GET a una API de productos y llama a una funci贸n de devoluci贸n de llamada con los datos de respuesta o un error en caso de fallo.

Se te hace dificil entender toda esa estructura de la funci贸n?
.
Ok, vamos a intentar entenderlo, voy a explicarte la idea general para que entiendas lo que est谩 pasando sin meterme en cada metodo.
.
XMLHttpRequest es un recurso que nos permite hacer peticiones a la red. La forma en la que fue creado en la raz贸n por la cu谩l tenemos que llamar todos esos metodos y hacer validaciones antes de obtener la respuesta.
.
Recuerda que la variable 鈥渪http鈥 es una instacia de XMLHttpRequest. Y como toda instancia por dentro tiene propiedades y metodos. En una de esas propiedades se guarda la respuesta del servidor, especificamente en la propiedad 鈥渞esponseText鈥.
.
onreadystatechage es como un escuchador de eventos que mira si hay cambios en el estado de la petici贸n, y cuando los hay, ejecuta la funci贸n que valida si la petici贸n fue correcta, las validaciones que est谩n en la linea 9 y 10.
.
Si la petici贸n fue correcta, significa que la propiedad 鈥渞esponseText鈥 ha recibido la respuesta del servidor y ya podemos acceder a ella.
.
Bueno, todos esos metodos son necesarios porque as铆 fue creado este recurso para poder hacer peticiones, entocnes es como un patr贸n que hay que seguir para hacer peticiones ocn callbacks, dir铆a que no necesitas memorizarlo porque es un patr贸n com煤n.
.
Lo importante es entender c贸mo funciona y ya entendimos la primera parte, todos esos metodos y validaciones son necesarios para poder obtener los datos.
.
Pero鈥 驴Y por qu茅 carajos es importante usar el callback ah铆?
.
Excelente pregunta, yo tambi茅n me la estaba haciendo.
.
Primero que nada, el callback es llamado en esos lugares porque es ah铆 donde ya tenemos una respuesta, exitosa o fallida.
.
Creo que lo que le falta a la clase es explicar este contexto y definir la funci贸n callback y hacer el llamado, aqu铆 tenemos la estructura para hacer la petici贸n solamente.
,
Callback ya sabes que es un parametro y es util para poder sacar la respuesta del servidor fuera de el cuerpo de la funci贸n fetchData.
.
Por ejemplo, definamos una funci贸n que es la que vamos a pasar como callback
.

function handleData(error, response) {
  if (error) {
    console.log('Error:', error.message);
  } else {
    console.log('Data:', response);
  }
}

.
Esa funci贸n lo que hace es recibir parametros, validarlos y mostrar el console.log (o llamar otra funci贸n para hacer algo con los datos)
.
Entonces, el llamado a fetchData ser铆a algo as铆
.

fetchdata('https://www.ejemplo.com/productos', handleData)

.
驴Recuerdas eso de que cada funci贸n debe encargarse de una tarea especifica?
.
Para eso es util el callback, para encargarse de la tarea de que una vez los datos del servidor est茅n disponibles, hacer algo con esos datos. Mientras que la funcion 鈥渇etchdata鈥 se encarga de traer esos datos.
.
Espero que te haya servido para entender conceptualmente que es lo que est谩 pasando aqu铆

Alguien que le diga al profe que deje los t茅rminos t茅cnicos y explique de donde sale cada cosa que dice, por favor y gracias.

Insistir, persistir, resistir y nunca desistir. 鉂わ笍

Hace poco v铆 esta frase en un aporte y la verdad que me subi贸 los 谩nimos. A darle compa帽eros.

Muchos conceptos al aire, lo que tocar铆a en este caso ser铆a hacer muchisimo research y self study.

No entendi nada. FIN

es importante saber la historia, pero ahora nadie usa ni pa jugar ese XMLhttpResquest

He recopilado parte de la informaci贸n mas b谩sica sobre XMLHttpRequest, me sirvio mucho para entender mejor lo que hace Oscar esta clase, la comparto para quien le pueda ayudar:

https://juanosuna.notion.site/XMLHttpRequest-1531999f35fe4bf9814a3cb8b19c695e

const XMLHttpRequest = require('xmlhttprequest');

// API con la variable
const API = 'https://api.escuelajs.co/api/v1';

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

    xhttp.open('GET', urlApi, true);
    xhttp.onreadystatechange = function(event){
        if (xhttp.readyState === 4){
            if(xhttp.status === 200){ 
                // pasamos el callback
                infoReturnData(null, JSON.parse(xhttp.resposeText));
            }
        } else{
            const error = new Error('Esto es un Error' + urlApi);
            return infoReturnData(error, null);
        }
    }

    // hacemos el llamado al xhttp.send
    xhttp.send();
}

Esta clase me mato, necesito investigar mas a profundo. porque senti que me hablaba en chino. no entendi nada jajaja pero seguire estudiando.

Considero que esta clase se siente como si hubiera sido pensada para personas que ya tienen conocimiento trabajando con APIs, y un poco de backend en general, y me parece un error teniendo en cuenta que este es nada m谩s uno de los primeros cursos en la ruta de Full Stack Developer con JS. Es mi caso personal, hasta ahora estoy aprendiendo, y esto se siente exageradamente avanzado para el ritmo que se ven铆a teniendo anteriormente.

Consejo: miren la siguiente clase.

Si vieron que la clase termina con errores que el profesor dej贸 ah铆, miren la siguiente, todo tendr谩 mas sentido, sobre todo ese else de la lineal 13.
En mi opinan, no debieron cortar esta clase.

Este c贸digo es una funci贸n que utiliza el objeto XMLHttpRequest para realizar una solicitud GET a una API. El par谩metro urlApi especifica la URL de la API que se desea obtener, y el par谩metro callback es una funci贸n que se ejecutar谩 cuando se complete la solicitud.

En t茅rminos simples, es como si la funci贸n fuera un mensajero que va a buscar informaci贸n a una tienda (la API) y te la entrega a ti (mediante la funci贸n de callback).

La funci贸n crea una instancia de XMLHttpRequest y llama al m茅todo open para establecer una conexi贸n con la API. Luego, establece un listener de eventos con onreadystatechange para manejar la respuesta de la API. Cuando la solicitud se completa, se comprueba si el estado de la solicitud es 200 (茅xito) y se ejecuta la funci贸n de callback con los datos obtenidos. Si la solicitud no tiene 茅xito, se crea un error y se llama a la funci贸n de callback con el error.

En resumen, la funci贸n fetchData te permite hacer solicitudes a una API y obtener los datos que necesitas, todo esto mediante la utilizaci贸n del objeto XMLHttpRequest y una funci贸n de callback que se ejecuta cuando la solicitud se completa.

Hola, si desean obtener el car谩cter de triple igualdad como el profe pueden visitar y revisar el comentario aqu铆.
.
A mi me result贸 de la siguiente forma:
.

  • Tengo Ubuntu 22.04
  • Para saber la vrsi贸n instalda de Ubuntu, entra a la terminal presionando las teclas Ctrl + Alt + T y escribe lsb_release -a y da ENTER. En mi caso sali贸:
Distributor ID:	Ubuntu
Description:	Ubuntu 22.04 LTS
Release:	22.04
  • La idea es instalar la fuente especial Fira Code, en el enlace muestra la instalaci贸n para diferentes SO: aqu铆
  • Escribir en la terminal: sudo apt install fonts-firacode
  • Ir a la ruta: cd usr/share/fonts y verificar si est谩 la carpeta Fire Code. Si no aparece, escribir la siguiente l铆nea en la terminal, dar ENTER:
git clone --depth 1 https://github.com/tonsky/FiraCode.git 
  • Luego entrar a la carpeta FiraCode con cd FiraCode
  • Escribir en la terminal y dar ENTER:
git filter-branch --subdirectory-filter distr
  • Si no da error, escribir y dar ENTER:
fc-cache -f

Fuente: aqu铆.
.
Para configurar VSC una vez instalado Fire Code:
.
En el enlace est谩n las instrucciones para diferentes SO: aqu铆.

  • En mi caso entr茅 al editor VSC y en el icono que est谩 en la esquina inferior izquierda sale una tuerca, dar click ah铆 y entrar a Configuraciones (Settings) o puedes presionar las teclas Ctrl + , y aparecer谩 el editor las configuraciones.
  • Buscar Font y donde sale: Controls the font family editar el tipo de fuente y pegar: Fira Code Retina
  • Entrar al archivo setting.json y colcar true en "editor.fontLigatures": true, Guardar presionando las teclas Ctrl + S
  • Y listo, cuando escribas en el editor la triple igualdad: === se convertir谩 autom谩ticamente en

Nada parce, en el limbo total, demasiado tecnicismo, cero analog铆as, un dominio total de los conceptos (para 茅l). Creo que habl贸 en chino.

Se explican conceptos que vemos por primera vez y que solo entender铆an personas que ya tengan conocimientos previos,
ejemplos que no sirven para una mejor comprensi贸n del tema
No entend铆 nada

Qu茅 dolor de ojos esta clase. Si se ponen como objetivo hacer todo lo m谩s complejo posible, lo logran./

Pense que con este curso despejaria dudas del de ECMAScript pero ya vi que no, me deja en las mismas, utiliza recursos que antes de que entrara este actor a duras penas lo habian mencionado, siento como si me hubiera saltado algun curso necesario para poder entender estos conceptos, gracias a los comentarios logro ubicarme mas pero desde ya este curso para mi tiene una estrella, espero las siguientes clases ayuden y no entorpezcan mas mi aprendizaje.

No me gusta para nada que mezcle el ingl茅s con el espa帽ol, estamos aprendiendo en espa帽ol, no en ingl茅s, esa rara mezcla confunde muchas cosas, cuando ya pasemos a programar formalmente lo haremos en ingl茅s pero para aprender deber铆a siempre hacerlo todo en espa帽ol, hasta para diferenciar las palabras propias del lenguaje de las variables. Es molestoso esto.

Seg煤n entend铆 gracias a los aportes de otros estudiantes la cosa ser铆a algo as铆:

  • xhttp.open = Prepara la petici贸n. Es decir, no manda nada a la url sino que especifica a d贸nde tiene que ir la petici贸n, con qu茅 m茅todo y si tiene que ser as铆ncrona o no. En este caso por el contexto del c贸digo no cambia nada si son as铆ncronas, pero es una buena pr谩ctica aclarar que queremos que los datos lleguen en orden para asegurarnos que toda la l贸gica se ejecute acorde a lo programado.

xhttp.readyState = Verifica si el llamado a la api se inicializo, si est谩 cargando, etc. El que importa es el estado 4 que significa que la llamada se ejecuto y que los datos est谩n listos.

  • xhttp.onreadystatechange = por el on antes del nombre se puede inferir que es un event handler, y efectivamente ese es el caso. Lo igualamos a una funci贸n que es la que se tiene que ejecutar cuando el estado cambia (pues el evento que est谩 siendo manejado u observado es que cambie el estado de la petici贸n). Una vez que el estado cambi贸 se ejecuta la l贸gica de la funci贸n y [IMPORTANTE] el resultado (por ejemplo, si fue exitosa llamar al callback(null, JSON.parse(xhttp.responseText)) se guarda en el callback queue del lado del navegador. Una vez que el stack est谩 vaci贸, es decir que se ejecuto todo el programa restante, el callback queue manda la funci贸n callback al stack y se ejecuta.

  • xhttp.send = manda la solicitud. A pesar de que la solicitud se manda una sola vez, xhttp.onreadystatechange est谩 permanentemente consultando si cambia el estado de la petici贸n enviada para ejecutar la l贸gica de la funci贸n a la que lo igualamos. Como el estado 4 (completado) es el 煤ltimo posible, el event handler deja de observar los cambios (porque ya no pueden haber m谩s) y cuando se vac铆e el stack el programa se detiene. Yo en la terminal prob茅 poniendo un else luego de if (xhttp.readyState === 4) y el else se ejecuto cada vez que el estado cambiaba excepto cuando la petici贸n estaba completada.

Si alguien tiene alguna pregunta por favor mandemela, quiz谩s entend铆 algo mal 馃槂

el profesor deber铆a considerar que muchos de los que estamos aqu铆 somos nuevos en estos temas, sus explicaciones son muy t茅cnicas y se complica absorber la informaci贸n as铆 la primera vez

He visto algunas cosas sobre el asincronismo en JS y por tanto entend铆 algunas cosas de esta sesi贸n y sinceramente, considero que ac谩 se complica mucho el asunto. Para empezar, hasta donde tengo entendido, no es necesario instalar el paquete de XMLHttpRequest, pues este viene por defecto en el lenguaje. En cuanto a la explicaci贸n del c贸digo ni siquiera es explicaci贸n, solo comenta lo que va escribiendo, algo que ya han mencionado otras personas. 馃槙

Yo creo que explico bien la logica de lo que hacia el codigo, pero dio por sentado que ya teniamos al parecer algun tipo de bases en el manejo de APIs. Yo vengo de la ruta de Desarrollo Web (actualmente con otro nombre), y ni siquiera se que es una API, tengo una idea, pero no me he encontrado con ninguna clase de Platzi que lo explique aun en lo que llevo de la ruta. Veo que muchas personas en los aportes dicen que no entiendieron la explicaci贸n por ser bastante tecnica, pero en realidad nadie que ya no haya trabajado con APIs entendio esta clase simplemente porque hay muchos conceptos escenciales que no explica. Siempre te terminas dando una idea de lo que hace cada linea de codigo, pero la verdad tambien senti que me hablaban en chino.

comando para la instalacion

npm i xmlhttprequest

Mi c贸digo:

Espero sirvan de ayuda

En la parte que pone

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

No queda muy claro por que true 鈥渉abilita鈥 la funci贸n. Leyendo la documentaci贸n dice que "An optional Boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send() method does not return until the response is received. If true, notification of a completed transaction is provided using event listeners. This must be true if the multipart attribute is true, or an exception will be thrown."
Es decir que de no hacerse true la funci贸n open bloquea el stack hasta que se de uan respuesta por parte de la api. de no ser as铆 se ejecuta asincronamente, pasa a estar disponible la respuesta en el callback queue una vez se tenga.

```js // Importamos el m贸dulo 'xmlhttprequest' y accedemos a su propiedad 'XMLHttpRequest' const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; // Definimos la URL base de la API a la que haremos las solicitudes const API = 'https://api.escuelajs.co/api/v1'; /** * Definimos la funci贸n fetchData, que se encargar谩 de realizar una solicitud HTTP a la API. * * La funci贸n toma dos par谩metros: * - urlApi: La URL a la que se har谩 la solicitud. * - callback: Es una funci贸n que se ejecutar谩 cuando la solicitud HTTP se complete. */ function fetchData(urlApi, callback) { // Creamos una instancia del constructor XMLHttpRequest para acceder a sus m茅todos y propiedades. const XHTTP = new XMLHttpRequest(); // Abrimos la solicitud de tipo GET para recibir datos de la API de manera asincr贸nica. XHTTP.open('GET', urlApi, true); // Funci贸n que se ejecuta autom谩ticamente cada vez que cambia el estado de la solicitud XMLHttpRequest. XHTTP.onreadystatechange = function() { // Si el estado actual de la solicitud es completado if (XHTTP.readyState === 4) { // Y la solicitud fue exitosa if (XHTTP.status === 200){ // Indicamos que no existe error y parseamos la respuesta de texto a objeto JSON. callback(null, JSON.parse(XHTTP.responseText)) } else { // En caso contrario, capturamos el error const error = new Error('error ', + urlApi); // Y devolvemos el error return(callback(error, null)) } } } // Enviamos la solicitud HTTP return XHTTP.send() } ```
Muy regular, cero explicaci贸n al final se convierte solo en la lectura de el c贸digo escrito pr谩cticamente
![](https://static.platzi.com/media/user_upload/code1-5fddda53-49fc-489d-ba92-79c44f762faf.jpg)
C脫DIGOS DE RESPUESTA HTTP * 100 a 199 Informativos * 200 a 299 Correcto * 300 a 399 Redirecci贸n * 400 a 499 Error del cliente * 500 a 499 Error del servidor
Estuvo densa la clase 馃槴
Wow muchos datos, me interesa mucho aprender y tratar de entender cada cosa: Aqui dejo los comandos: ![](https://static.platzi.com/media/user_upload/image-f4d866e3-1c03-4d4e-8312-12491dab1a86.jpg)![]()![]()
```js // Importa el m贸dulo 'xmlhttprequest' y lo asigna a la constante 'XMLHttpRequest'. const XMLHttpRequest = require('xmlhttprequest'); // Define la URL base de la API a la que se realizar谩n las solicitudes. const API = 'https://api.escuelajs.co/api/v1'; // Define una funci贸n llamada 'fetchData' que toma dos argumentos: 'urlApi' (la URL espec铆fica de la API a solicitar) y 'callback' (una funci贸n que se llamar谩 una vez que se complete la solicitud). function fetchData(urlApi, callback) { // Crea una nueva instancia de XMLHttpRequest. let xhttp = new XMLHttpRequest(); // Abre una nueva solicitud GET hacia la URL especificada ('urlApi'). xhttp.open('GET', urlApi, true); // Define una funci贸n que se ejecutar谩 cada vez que cambie el estado de la solicitud. xhttp.onreadystatechange = function (event) { // Verifica si el estado de la solicitud es 'DONE' (4). if (xhttp.readyState === 4) { // Verifica si el c贸digo de estado de la respuesta es 200 (茅xito). if (xhttp.status === 200) { // Si la solicitud fue exitosa, llama a la funci贸n de devoluci贸n de llamada ('callback') con 'null' como primer argumento (indicando que no hay errores) y con los datos de la respuesta convertidos de JSON a un objeto JavaScript ('JSON.parse(xhttp.resposeText)') como segundo argumento. callback(null, JSON.parse(xhttp.responseText)); } } else { // Si el estado de la solicitud no es 'DONE', crea un nuevo objeto de error con un mensaje que incluye la URL espec铆fica de la API que caus贸 el error. const error = new Error('Error' + urlApi); // Llama a la funci贸n de devoluci贸n de llamada con el objeto de error como primer argumento (indicando que se produjo un error) y con 'null' como segundo argumento (indicando que no hay datos para pasar). return callback(error, null); } }; // Env铆a la solicitud al servidor. xhttp.send(); } ```
no me funciono la primera linea
驴Por qu茅 no ponen las fechas de los comentarios? no saabemos que tan actualizado est谩n los comentarios...
No entend铆 nada. He visto varios comentarios felicitando al profe por haber mejorado sus explicaciones porque antes no se entend铆an, lo cual quiere decir que el profe lleva una curva de aprendizaje y eso me alegra, me parece muy bien por 茅l y por Platzi; sin embargo, me parece importante resaltar que el profesor a煤n no es claro y algunas clases no se entienden, como esta. En este curso con este profesor es la primera vez que me toca ver videos y clases de otros profesores para entender el tema de la clase, es decir, en lugar de esta clase entregarme informaci贸n, solo me dice que hay algo que deber铆a entender y debo buscarlo por fuera porque aqu铆 no lo recib铆 (para esto ha sido muy 煤til el material que comparten los dem谩s estudiantes en sus comentarios).

En resumen鈥

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

A pesar de tener la palabra 鈥淴ML鈥 en su nombre, se puede operar sobre cualquier dato, no solo en formato XML. Podemos cargar y descargar archivos, dar seguimiento y mucho m谩s.

Ahora hay un m茅todo m谩s moderno聽fetch聽que en alg煤n sentido hace obsoleto a聽XMLHttpRequest.

En el desarrollo web moderno聽XMLHttpRequest聽se usa por tres razones:

  1. Razones hist贸ricas: necesitamos soportar scripts existentes con聽XMLHttpRequest.
  2. Necesitamos soportar navegadores viejos, y no queremos聽polyfills聽(p.ej. para mantener los scripts peque帽os).
  3. Necesitamos hacer algo que聽fetch聽no puede todav铆a, ej. rastrear el progreso de subida.
隆Voy a tratar de explicar un poco lo visto en la clase!, en su momento yo tampoco entend铆 y deje este curso, ahora con mas experiencia puedo entenderlo y espero ayudarles a comprender esto mejor. const XMLHTTPRequest = require("xmlhttprequest"); require es una funcion que carga una dependencia, entonces, estas cargando la dependencia xmlhttprequest dentro de la variable XMLHTTPRequest, con la finalidad de cargar la dependencia dentro de este archivo de manera correcta. const API = "https://api.escuelajs.co/api/v1/products"; simplemente es una constante llamada API que contiene como string la cadena de conexi贸n hacia la api. aqu铆 empieza lo complejo xd, el problema es que para entender esto debes tener conocimiento de POO y saber c贸mo instanciar una clase a una variable (y que es instanciar). function fetchData(urlApi, callback){} en este punto solo se esta creando una funcion de nombre Fetchdata que va a recibir 2 parametros: 1.- la url de la api a la cual te conectaras 2.- el nombre de una funcion (en este punto a煤n no se ha declarado) let xhttp = new XMLHttpRequest(); en esta parte creo es donde muchos se pierden. lo que se esta haciendo es generar una instancia de la clase XMLHttpRequest en la variable xhttp. una instancia es una "extension" de algo, XMLHttpRequest es una clase con propiedades y metodos por dentro, cuando la instancias a xhttp haces que todas las propiedades y metodos que existen en la clase XMHttpRequest puedan ser accedidos desde la variable xhttp, estas "extendiendo" las propiedades y metodos de la clase a la variable. como mencione antes, el problema es que para entender esto deberias saber que es una clase, que son las propiedades, cual es la sintaxis de una clase y sus usos, cosas que hasta este momento del curso (o de la ruta de javascript) no han sido explicadas. imaginate que la dependencia XMLHttpRequest se ve asi class XMLHttpRequest{ open(type, url, async){ //mucho codigo que ni yo se xd } //propiedad int readystate; } en realidad, esta clase tiene muchos metodos y propeidades dentro de si, pero la idea es que mediante la sintaxis let xhttp = new XMLHttpRequest(); estas dandole todos estos metodos y propiedades a xhttp, y por ello puedes acceder a ellos! 聽xhttp.open("GET", urlApi, true); 聽 open() es un m茅todo existente dentro de la clase XMLHttpRequest() que sirve para configurar tu conexion antes de enviarla al servidor esta recibiendo 3 parametros 1.- "GET": sirve para definir de que tipo sera la peticion http, existen 4 tipos (POST, GET, PUT, DELETE) 2.- urlApi: se necesita la cadena de conexion a la api (en este caso: "https://api.escuelajs.co/api/v1/products" 3.- un bool: un booleano, true le dice al metodo que configure la peticion como asincrona (osea que no bloqueara el codigo, sino, que delegara esta tarea a la web api del navegador para no bloquear nuestro programa, si se pone en false estaremos configurando un metodo sincrono, que parara la aplicacion hasta tener respuesta de nuestro servidor, osea, de la api). xhttp.onreadystatechange = function(e){ if(xhttp.readyState === 4){ if(xhttp.status===200){ console.log("Validado, informacion cargada correctamente, status:" + xhttp.status); callback(null, JSON.parse(xhttp.responseText)); }else{ const error = new Error("ERROR: " + urlApi); return callback(error, null); } } } onreadystatechange es una propiedad de la clase XMLHttpRequest que recibe una funcion de tipo callback (anonima) que se ejecutara cada vez que el estadod e la solicitud cambie. volvere al ejemplo de la clase class XMLHttpRequest{ open(type, url, async){ //mucho codigo que ni yo se xd } //propiedades readystate; status; responseText //metodo send send(){ //mucho codigo que ni yo se xd } } imagina que en algun punto de la logica declarada dentro de el metodo send se asigna a la propiedad readystate el valor de 4, siempre y cuando se cumplan algunas condiciones ,y ademas, si la respuesta es satisfactoria, se le asigna "200" a la propiedad status, eso es lo que pasa aqui al momento de usar xhttp.send() al hacer uso del metodo send se mandara la solicitud al servidor (api) de fake platzi store API y cada vez que cambie el estado de esta solicitud se hara una ejecucion del metodo definido en onreadystatechange (ya que este metodo cada vez que cambia la solicitud se ejecuta automaticamente, 驴porque?, porque asi fue creado) y si la propiedad de status esta en 200 y readystate en 4 en algun cambio de estado, entonces ejecutamos una funcion (que aun no se ha definido) la cual se le pasara copmo parametro null, y un JSON.parse(xhttp.responseText) de nuevo, XMLHttprequest por dentro tiene una propiedad llamada responseText, esta propiedad es llenada con un string que contiene la respuesta del servidor, si el servidor contesta con un objeto lo hara de esta manera: "\[{name: 'mike', age: 25}, {name:'jose', age: 67}]", si queremos que javascript lo trate como un objetod e js debe ser parseado a un JSON, quedando asi \[ { name: 'micke', age: 25 }, { name: 'micke', age: 25 } ] espero haberte ayudado y que mi explicacion te aclarara un poco lo que esta pasando, cualquier duda dimela y si la puedo resolver lo hare, suerte!

Que clase mas compleja! 馃槮

XHR y Fetch son dos API de JavaScript que permiten realizar solicitudes HTTP a un servidor. Sin embargo, hay algunas diferencias clave entre las dos API.

XHR

  • Es una API nativa de JavaScript, lo que significa que est谩 disponible en todos los navegadores modernos.
  • Es un objeto complejo con una API extensa.
  • Utiliza callbacks para manejar las respuestas del servidor.

Fetch

  • Es una API moderna que se introdujo en 2015.
  • Es una API m谩s sencilla con una API m谩s concisa.
  • Utiliza promesas para manejar las respuestas del servidor.

Comparaci贸n

Caracter铆stica XHR Fetch
Disponibilidad Todos los navegadores modernos La mayor铆a de los navegadores modernos
Complejidad API compleja API sencilla
Manejo de respuestas Callbacks Promesas
Nuevos m茅todos No S铆, como blob(), formData() y redirect()
Streaming No S铆

Ventajas de XHR

  • Disponibilidad: XHR es una API nativa de JavaScript, lo que significa que est谩 disponible en todos los navegadores modernos.
  • Soporte de m茅todos antiguos: XHR admite m茅todos HTTP antiguos, como HEAD y OPTIONS.
  • Soporte de cach茅: XHR admite la cach茅 de respuestas HTTP.

Ventajas de Fetch

  • Simplificaci贸n: Fetch es una API m谩s sencilla que XHR.
  • Promesas: Fetch utiliza promesas para manejar las respuestas del servidor, lo que facilita la programaci贸n as铆ncrona.
  • Nuevos m茅todos: Fetch ofrece nuevos m茅todos, como blob(), formData() y redirect().
  • Streaming: Fetch admite el streaming de datos, lo que permite procesar los datos a medida que se reciben.

Conclusi贸n

En general, Fetch es una API m谩s moderna y sencilla que XHR. Sin embargo, XHR sigue siendo una opci贸n v谩lida para aplicaciones que requieren compatibilidad con navegadores antiguos o m茅todos HTTP antiguos.

XMLHttpRequest (XHR) es un objeto JavaScript que permite realizar solicitudes HTTP a un servidor sin necesidad de recargar la p谩gina completa. Esto permite a las p谩ginas web actualizarse de forma din谩mica, sin tener que volver a cargar todo el contenido.

XHR es un objeto nativo de JavaScript, lo que significa que est谩 disponible en todos los navegadores modernos. Se puede utilizar para realizar cualquier tipo de solicitud HTTP, incluyendo GET, POST, PUT y DELETE.

Para utilizar XHR, primero debemos crear un nuevo objeto XHR. Podemos hacerlo usando la funci贸n XMLHttpRequest(). Una vez que tengamos un objeto XHR, podemos configurarlo para realizar la solicitud deseada.

Para configurar una solicitud XHR, debemos especificar el m茅todo HTTP, la URL y los datos de la solicitud. El m茅todo HTTP determina el tipo de solicitud que se va a realizar. Las opciones disponibles son GET, POST, PUT y DELETE.

La URL especifica el recurso al que queremos acceder. Los datos de la solicitud son los datos que queremos enviar al servidor.

Una vez que hayamos configurado la solicitud, podemos enviarla usando el m茅todo send(). Cuando la solicitud se complete, se llamar谩 al m茅todo onload() del objeto XHR.

El m茅todo onload() recibir谩 un objeto Response que contiene la respuesta del servidor. Podemos utilizar este objeto para acceder a los datos de la respuesta.

A continuaci贸n, se muestra un ejemplo de c贸mo utilizar XHR para realizar una solicitud GET:

const xhr = new XMLHttpRequest();

xhr.open("GET", "https://example.com/");

xhr.onload = function() {
  const response = xhr.responseText;

  // Procesa la respuesta del servidor
};

xhr.send();

En este ejemplo, estamos realizando una solicitud GET a la URL https://example.com/. Cuando la solicitud se complete, se llamar谩 al m茅todo onload(). El m茅todo onload() recibir谩 el texto de la respuesta del servidor.

XHR es una herramienta poderosa que puede utilizarse para realizar una amplia gama de tareas. Es una parte esencial de la programaci贸n AJAX, que permite a las p谩ginas web actualizarse de forma din谩mica sin tener que recargar la p谩gina completa.

Aqu铆 hay algunos ejemplos de c贸mo se puede utilizar XHR:

  • Para cargar contenido din谩mico, como datos de un servidor o im谩genes.
  • Para enviar datos al servidor, como formularios o comentarios.
  • Para realizar peticiones as铆ncronas, como la actualizaci贸n de un contador o la comprobaci贸n de un estado.

Si est谩s aprendiendo JavaScript, es importante que aprendas a utilizar XHR. Es una herramienta esencial para la programaci贸n web moderna.

Si tuvieron dudas sobre el objeto XMLHttpRequest les recomiendo el curso del buen John Mircha, es un m谩ster.

https://www.youtube.com/watch?v=6CQrK1sS7WA&list=PLvq-jIkSeTUZ6QgYYO3MwG9EMqC-KoLXA&index=107

Si quieren complementar leyendo 馃槂:
https://lenguajejs.com/javascript/peticiones-http/xhr/

jajaja estaba todo feliz porque iba entendiendo todo sin problemas, hasta que llegue a esta clase y seme desconfiguro el cerebro. Pero bueno, supongo que estos retos son los que nos hacen buscar una mejor manera de buscar informaci贸n y aprender temas complejos para nosotros los mortales jaja ok no :3

XMLHttpRequest vs fetch

Tanto XMLHttpRequest como la API fetch en JavaScript son utilizados para realizar solicitudes HTTP, pero existen diferencias significativas entre ellos en t茅rminos de sintaxis, funcionalidad y caracter铆sticas. Aqu铆 hay una comparaci贸n entre XMLHttpRequest y fetch:

  1. Sintaxis y legibilidad:

    • XMLHttpRequest: Tiene una sintaxis m谩s compleja y requiere m谩s c贸digo para realizar una solicitud y manejar la respuesta.
    • fetch: Tiene una sintaxis m谩s simple y basada en promesas, lo que hace que el c贸digo sea m谩s limpio y legible.
  2. Promesas:

    • XMLHttpRequest: No se basa en promesas de manera nativa, lo que puede llevar a estructuras de c贸digo m谩s anidadas cuando se manejan solicitudes y respuestas.
    • fetch: Devuelve promesas de JavaScript, lo que facilita la implementaci贸n de l贸gica as铆ncrona y permite un manejo m谩s sencillo de errores y encadenamiento de acciones.
  3. Manejo de respuestas:

    • XMLHttpRequest: Requiere configurar manejadores de eventos para diferentes estados de la solicitud (onload, onerror, etc.).
    • fetch: Utiliza promesas y permite manejar respuestas utilizando los m茅todos then() y catch(), lo que hace que el c贸digo de manejo de respuestas sea m谩s claro y modular.
  4. Cross-Origin Resource Sharing (CORS):

    • Ambos XMLHttpRequest y fetch cumplen con las pol铆ticas de CORS y permiten solicitar recursos desde dominios diferentes al dominio de origen del script.
  5. Soporte para tipos de datos:

    • XMLHttpRequest: Permite trabajar con varios tipos de datos, como texto, array buffer, blob y documentos XML.
    • fetch: Tambi茅n es capaz de manejar varios tipos de datos y es m谩s flexible para convertir la respuesta en diferentes formatos, como JSON.
  6. Cancelaci贸n de solicitudes:

    • XMLHttpRequest: Permite cancelar una solicitud en progreso a trav茅s del m茅todo abort().
    • fetch: No proporciona una funci贸n incorporada para cancelar solicitudes en progreso, lo que puede ser una desventaja en ciertos casos.


En general, fetch se considera una API m谩s moderna y vers谩til para realizar solicitudes HTTP en comparaci贸n con XMLHttpRequest. Ofrece una sintaxis m谩s clara basada en promesas, facilita el manejo de respuestas y es m谩s flexible en t茅rminos de tipos de datos. Sin embargo, XMLHttpRequest todav铆a se encuentra en uso en proyectos m谩s antiguos o en situaciones donde la compatibilidad con navegadores m谩s antiguos es un factor importante.


Ejemplo con XMLHttpRequest


Aqu铆 tienes un ejemplo b谩sico de c贸mo utilizar XMLHttpRequest para realizar una solicitud GET hacia un servidor y manejar la respuesta:

// Crear un objeto XMLHttpRequest
var xhr = new XMLHttpRequest();

// Configurar la solicitud
xhr.open('GET', 'https://api.example.com/data', true); // true indica que la solicitud es as铆ncrona

// Configurar un manejador para el evento 'load' (cuando la respuesta ha sido cargada)
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // La solicitud fue exitosa
    console.log(xhr.responseText);
  } else {
    // La solicitud no fue exitosa
    console.error('Error en la solicitud. C贸digo de estado: ' + xhr.status);
  }
};

// Configurar un manejador para el evento 'error' (si ocurre alg煤n error)
xhr.onerror = function() {
  console.error('Hubo un error en la solicitud.');
};

// Enviar la solicitud
xhr.send();


Este es un ejemplo simple de una solicitud GET utilizando XMLHttpRequest. Puedes configurar diferentes tipos de solicitudes (GET, POST, PUT, DELETE, etc.) ajustando el primer argumento de xhr.open(). Adem谩s, puedes adjuntar datos al cuerpo de la solicitud utilizando el m茅todo xhr.send(), por ejemplo, en una solicitud POST.

Recuerda que XMLHttpRequest se considera una tecnolog铆a m谩s antigua, y se recomienda utilizar la API fetch o herramientas m谩s modernas para realizar solicitudes HTTP en JavaScript en aplicaciones m谩s recientes.


Ejemplo con API fetch


Aqu铆 tienes algunos ejemplos de c贸mo utilizar la API fetch para realizar solicitudes HTTP en JavaScript:

  1. Solicitud GET y manejo de respuesta en formato JSON:
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())  // Convertir la respuesta a JSON
  .then(data => {
    console.log(data);  // Mostrar los datos obtenidos en la consola
  })
  .catch(error => {
    console.error('Hubo un error:', error);
  });
  1. Solicitud POST con datos en formato JSON:
const dataToSend = {
  title: 'Mi nuevo post',
  body: 'Contenido del post',
  userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(dataToSend)  // Convertir los datos a JSON y enviarlos en el cuerpo
})
  .then(response => response.json())
  .then(data => {
    console.log('Nuevo post creado:', data);
  })
  .catch(error => {
    console.error('Hubo un error:', error);
  });
  1. Manejo de errores y respuestas no JSON:
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('La respuesta no fue exitosa');
    }
    return response.text();  // Obtener el contenido de la respuesta como texto
  })
  .then(text => {
    console.log('Contenido de la respuesta:', text);
  })
  .catch(error => {
    console.error('Hubo un error:', error);
  });


Recuerda que fetch devuelve una promesa que se resuelve con el objeto Response. Puedes usar m茅todos como json(), text(), arrayBuffer(), blob(), etc., en el objeto Response para acceder a diferentes formatos de datos. Adem谩s, recuerda manejar los errores utilizando catch() para garantizar que tu c贸digo sea robusto frente a problemas de red u otras excepciones.

Espero sea de utilidad. 馃懆鈥嶐煉

algunas de las desventajas de:

<npm i xmlhttprequest> 

Contexto de Uso: El objeto XMLHttpRequest se utiliza principalmente en el contexto de navegadores web para hacer solicitudes AJAX (Asynchronous JavaScript and XML) y obtener datos de servidores. Por lo tanto, su uso en entornos de servidor (como Node.js) es menos com煤n.

Nativas Alternativas en Node.js: En Node.js, hay m贸dulos y bibliotecas nativas que son m谩s adecuadas para hacer solicitudes HTTP, como http y https. Estos m贸dulos proporcionan formas m谩s eficientes y completas de hacer solicitudes HTTP en el entorno de Node.js.

Compatibilidad: Aunque xmlhttprequest puede instalarse en Node.js a trav茅s de npm, es una implementaci贸n que emula el comportamiento del objeto XMLHttpRequest en navegadores. No siempre es una opci贸n ideal para entornos de servidor, ya que su funcionamiento puede diferir del comportamiento real del navegador.

Requisitos: La instalaci贸n de xmlhttprequest a trav茅s de npm puede llevar a una sobrecarga innecesaria en el entorno de desarrollo si no se planea utilizarlo. Los paquetes adicionales aumentan el tama帽o de la aplicaci贸n y pueden potencialmente causar confusi贸n si alguien m谩s revisa el c贸digo en el futuro.

Esto es puro BACKEND no entiendo que hace XMLHTTPRequest en esta clase, la verdad hubiera preferido Express, tiene una sintaxis parecida a la de json y utiliza algunas sintaxis de javascript. Les recomiendo la app de mimo para aprender a programar, ayuda a comprender todos los conceptos b谩sicos del desarrollo web.


//llamado al XmlHttpRequest
const XMLHttpRequest = require('xmlhttprequest');


//API en may煤scula porque es una referencia que no va a cambiar
const API = 'https://api.escuelajs.co/api/v1';



function fetchData(urlApi, callback) {  //urlApi: no confundir y colocar API
    let xhttp = new XMLHttpRequest(); //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 (200)
                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();
}



esta clase esta potente, no entendi muchas cosas

Interesante

Definitivamente una clase de 15min no es suficiente para explicar y entender las bases del objeto XMLHttpRequest, revisen la documentaci贸n y otros videos sobre el tema.

Una peque帽a petici贸n para nuestros profes de Platzi en general:

Cuando se trata de l贸gica de programaci贸n y de aprender c贸digo en general (como hacer un if-else, como establecer un ciclo, ligar HTML con CSS Y JS) es mas sencillo aprender usando varios puntos de vista y diferentes velocidades de ense帽anza, ya que con c贸digo realmente no hay caminos malos, sino caminos mas r谩pidos y caminos mas lentos.

Sin embargo con temas espec铆ficos, es fundamental ir despacio y detenerse el tiempo suficiente con temas como estos que se salen un poco de la l贸gica y entran mucho mas a lo t茅cnico y conceptual 鈥 En lo personal cuando veo esto y me toca irme a Youtube a buscar que canal me puede ense帽ar mejor un tema, me genera cierta desconfianza en el maestro de turno y en cursos posteriores que dicte el mismo.

Les tengo respeto, les agradezco y los admiro, pero de coraz贸n quisiera solicitarles que revisen conceptualmente sus rutas de aprendizaje para asegurarse de que est茅n correctamente hiladas y encaminadas 鈥 Se que es parte de la din谩mica de aprendizaje en programaci贸n el buscar por cuenta propia y revisar fuentes secundarias, pero sus estudiantes no tenemos por que estar yendo a informarnos tan frecuentemente de fuentes secundarias para poder comprender bien los temas 鈥 la verdad esto nos ralentiza mucho y genera frustraci贸n.

Me pasa lo mismo que con el curso de ECMAScript, perd贸n pero el profesor explica demasiado r谩pido, es imposible saltar de ejemplos sencillos de callbacks de la clase anterior a esto. Con ning煤n otro profesor me ha pasado esto, la ense帽anza debe ser progresiva 馃槙

XMLHttpRequest es una herramienta que permite que tu p谩gina web haga solicitudes a un servidor en segundo plano sin tener que recargar toda la p谩gina. Esto significa que puedes actualizar una parte de tu p谩gina web sin tener que refrescar toda la p谩gina.

Imagina que est谩s en una tienda en l铆nea y deseas agregar un producto a tu carrito de compras. En lugar de que la p谩gina se recargue por completo cada vez que agregas un producto, XMLHttpRequest permite que la informaci贸n se env铆e al servidor en segundo plano y se actualice solo la parte del carrito de compras.

Para utilizar XMLHttpRequest en JavaScript, primero debes crear una instancia del objeto XMLHttpRequest y establecer la URL a la que deseas enviar la solicitud. Luego, puedes enviar una solicitud utilizando el m茅todo open(). La solicitud puede ser de varios tipos, como GET, POST, PUT o DELETE, y puede incluir par谩metros como la informaci贸n del usuario.

Una vez que la solicitud se env铆a, puedes manejar la respuesta utilizando el m茅todo onreadystatechange. Esto te permite controlar el estado de la solicitud en cada paso del proceso. Cuando la solicitud est谩 completa, puedes obtener la respuesta utilizando el m茅todo responseText o responseXML, dependiendo del tipo de datos que esperas recibir.

comparto 馃槂
para compreender estados con gatitos https://www.flickr.com/photos/girliemac/sets/72157628409467125

8/26 XMLHTTPRequest

const XMLHttpRequest = require('xmlhttprequest');
const API = 'https://api.escuelajs.co/api/v1'; // Se llaman a las variables en mayuscula cuando se sabe que no ser谩n cambiadas.

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

    xhttp.open('GET', urlApi, true);
    xhttp.onreadystatechange 0 function (event) {
        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);
        }
    }
    xhttp.send();
}

mis apuntes y a mimir

        //XMLHTTPRequest 

//1- vamos a llamar el archivo XMLHTTPRequest 
const XMLHTTPRequest = require('xmlhttprequest');
//2-ahora vamos a llamar la api y para eso la metemos en una const con el nombre en mayusculas que hace referencia que nunca va cambiar
const API = 'https://api.escuelajs.co/api/v1';
//3-ahora crearemos una funcion la cual recibira la url y un callback para recibir la api
function fetchData(urlApi, callback){
   let xhttp = new XMLHTTPRequest();
   //el open abre una conexion con la api
   xhttp.open('GET', urlApi, true);
   //GET es el tipo de peticion que queremos que es obtener
   //El true abilita la conexion
   xhttp.onreadystatechange = function (event){
    //onreadystatechange este se encarga de escuchar diferentes estado que tiene la solicitud y sabremos cuando esta disponible la info 
    //en la funcion validadar el estado 
    if (xhttp.readyState === 4){
        if(xhttp.status===200){
            callback(null, JSON.parse(xhttp.resposeText));
            //JSON hara una transformacion de datos, xhttp resibimos lo que envie el servidor ya que que este nos envia la info en text y json lo transforma en objeto
        }
    }else{
        const error = new Error('Error' + urlApi);
        return callback (error, null)
    }
   } 
   xhttp.send();
   //ejecuta la logica anterior 
}
/*el readyState tiene de 0 a 4 estados 0 es que no se a inicializado, 1 significa loade o cargar osea que todavia no se ha llamado el valor de de ejecucion sent, 2 cuando ya se ejecuto el valor de sent, 3 que esta descagabdi o interactuando  con la soli y por ultimo 4 que es cuando se a completado la llamada */

Comparto el link a mi soluci贸n del challenge cuando tom茅 el bootcamp en frontend con Platzi.

Para menos confusi贸n yo utiliz茅 el addEventListener:
EJEMPLO:

const peticion = new XMLHttpRequest();
peticion.addEventListener('readystatechange', ()=>{
	if(peticion.readystate == 4){
	console.log(peticion.response)
  }
}

Otra definici贸n de XMLHttpRequest y como funciona:

https://www.youtube.com/watch?v=nz9S3uZE_dM

Estoy leyendo todos los comentarios y ya veo que no soy el 煤nico que se qued贸 perdido. El profe lo que hace es leer las l铆neas de c贸digo que escribe. Mi valoraci贸n para esta clase es la m谩s baja.

Modifiqu茅 un poco el c贸digo del profesor. Ejec煤tenlo en la consola del navegador.

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

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

  xhttp.open('GET', urlApi, true);
  xhttp.onreadystatechange = function (event) {
    if (xhttp.readyState === 4) {
      /*0 - No se ha inicializado
        1 - loading... Aun no se ejecuta send
        2 - Cuando ya se ejecuto el valor de send
        3 - Trabajando con la solicitud...
        4 - Se ha completado la llamada (solicitud)
        Al crear el objeto la propiedad readyState tiene valor 0*/

      if (xhttp.status === 200) {
        callback(null, JSON.parse(xhttp.responseText));
      }
    } else if (xhttp.readyState === 3) {
      console.info("Trabajando con la solicitud...");
    } else if (xhttp.readyState === 2) {
      console.info("Solicitud enviada...");
    } else {
      const error = new Error('Error ' + urlApi);
      return callback(error, null);
    }
  }
  xhttp.send();
}

function recibirRespuesta(error, obj) {
  if (error) {
    console.warn(error);
    return;
  }
  console.table(obj);
}

fetchData(API + "/products", recibirRespuesta);

Oscar deber铆a de dar cursos mas avanzados porque con temas tan fundamentales como este como que no se le da tan bien explicarlos de manera sencilla aunque se nota que eso intenta.

Sinceramente no me ha gustado que este se帽or sea el principal profesor entorno a la ruta de javascript, su forma de explicar es poco explicita y MUY repetitiva, ejemplo (鈥渦saremos esto dependiendo de las necesidad entorno a nuetro ambiente de trabajo de javascript鈥) , llevo 2 cursos donde siempre debo buscar por mi cuenta.

El objeto XMLHttpRequest:
-Nos ayuda a hacer peticiones asincronas y sincronas. En este caso siempre se utiliza de manera asincrona, El antecesor de todas las nuevas maneras de hacer peticiones http. 驴Para que nos sirve hacer estas peticiones? Para obtener recursos de una API. en el dia a dia como desarroladores FRONT-END nos vamos a topar con APIS(Aplicaciones de interfaces creadas por otro desarrollador en este caso BACK-END) que nos brindara los recursos necesarios para el uso correcto de nuestra pagina web o app.

Por ej: Obtener todos los productos de nuestra empresa de cosmeticos.

Para ello el objeto XML = xhr requiere varias configuraciones hasta completar la peticion.

Por ej: Escuchar los estados de la peticion. Si es correcto, si es incorrecto, etc. (readyOnStateChange)

Primero abrimos la peticion con: xhr.open(鈥楪ET鈥,API)
Segundo escuchamos los eventos para manejar la informacion con onReadyStateChange
tercero realizamos la peticion con xhr.send()

No lo culpo. Es muy buen desarrollador pero fue muy tecnico en esta clase

Terrible esta clase, no entend铆 nada. No s茅 porque si seg煤n platzi segu铆 exactamente la ruta, me hace pensar que quiz谩s el curos est茅 mal posicionado (o quiz谩s sea yo)

Apunte en Notion

Recomendaci贸n: leer la documentaci贸n https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest

///Reto de trabajar con FAKE API usando XMLHTTPRequest

const XMLHTTPRequest = require('xmlhttprequest'); //importamos la libreria
const API ='https://api.escuelajs.co/api/v1'; //url de la API.

//funcion que nos permite hacer una peticion a la API
function fetchData(url_api, callback)
{
    let xhttp = new XMLHTTPRequest(); //Aqui creamos una instancia "OBJETO" de la libreria XMLHTTPRequest

    xhttp.open('GET', url_api, true); //Aqui abrimos la conexion con la API y le pasamos los parametros que necesita

    //Ahora vamos a escuchar el evento "onreadystatechange" que nos permite saber si la peticion se realizo correctamente o no
    xhttp.onreadystatechange = function(event)
    {
        //Aqui verificamos si la peticion se realizo correctamente.
        //Estados:
        // 0: request not initialized,
        // 1: server connection established,
        // 2: request received,
        //3: processing request,
        // 4: request finished and response is ready
        if(xhttp.readyState === 4) 
        {
            if(xhttp.status === 200)//Verificamos que el estado que retorno la solicitud es 200 "RESUELTA CORRECTAMENTE"
            {
                callback(null, JSON.parse(xhttp.responseText)); //llAMAMOS al callback y le pasamos el error como null y el resultado de la peticion parseado a JSON 
            }else //Si la peticion no se realizo correctamente cualquier codigo que no sea 200
            {
                const error = new Error('Oucrri贸 un error con la peticion a la API:' + url_api);
                return callback(error, null); //llAMAMOS al callback y le pasamos el error y el resultado como null
            }
        }
    }
    xhttp.send(); //Aqui enviamos la peticion a la API 
}