XMLHTTPRequest

📥 𝗖𝗹𝗮𝘀𝗲 #𝟳: 𝗫𝗠𝗟𝗛𝗧𝗧𝗣𝗥𝗲𝗾𝘂𝗲𝘀𝘁𝟳/𝟮𝟭 📤
.
📲 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:
.

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 ‘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.
  |

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

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

1. 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.

|

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 ‘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);
}

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.

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

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 “npm 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 ❤️

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 “ir 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

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

🍃 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

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

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!

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 “xhttp” 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 “responseText”.
.
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 “responseText” 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 “fetchdata” se encarga de traer esos datos.
.
Espero que te haya servido para entender conceptualmente que es lo que está pasando aquí

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

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

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. 👨‍💻

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.

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.

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 (“usaremos esto dependiendo de las necesidad entorno a nuetro ambiente de trabajo de javascript”) , llevo 2 cursos donde siempre debo buscar por mi cuenta.

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 “habilita” 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.

En resumen…

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

A pesar de tener la palabra “XML” 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.

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

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

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.

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 en Notion💚

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

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

https://es.javascript.info/xmlhttprequest