This content originally appeared on DEV Community and was authored by Ulises A.F.C
Para empezar a utilizar AJAX y consumir API’s es necesario tener conocimientos básicos en el lenguaje.
XMLHttpRequest es un objeto de JavaScript, es un estándar en la W3C, y nos proporciona información de una URL de forma fácil.
Iniciaremos creando dos archivos, un archivo html y el otro archivo javascript:
Dentro del archivo html incluiremos el archivo javascript para verlo en la consola del navegador.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest</title>
<style>
body {
font-family: monospace;
}
</style>
</head>
<body>
<h1>XMLHttpRequest</h1>
<hr>
<script src="xmlhttp.js"></script>
</body>
</html>
Ahora trabajaremos con el archivo javascript.
Para empezar a utilizar XMLHttpRequest debemos entender que es un objeto el cual debemos hacer una instancia de ella en nuestro archivo y para ello definiremos una constante de la siguiente manera:
const xhr = new XMLHttpRequest;
Al crear una instancia del objeto XMLHttpRequest podemos ver sus metodos y propiedades al mostrarlo en consola:
console.log(xhr);
Podemos ver que al imprimir en consola nos muestra todos sus metodos, propiedades y eventos, de los cuales tomaremos en cuenta los siguientes:
Como primer paso readystatechange, este contiene el manejador del evento que es invocado cuando se dispara el evento readystatechange, lo cual sucede cada vez que cambia el valor de la propiedad readyState.
Al saber lo antes mencionado asignaremos el evento readystatechange a nuestra instancia del objeto XMLHttpRequest, y dentro mandaremos a imprimir la instancia:
xhr.addEventListener("readystatechange", e => {
console.log(xhr);
});
Al hacerlo observamos que ya no nos muestra nada en consola, pero, es porque esta esperando a que el valor de la propiedad readyState cambie. Por defecto su valor es cero, pero sus valores pueden cambiar segun su estado del cliente.
Cada numero que se muestra significa un estado en el que se encuentra el cliente XMLHttpRequest, y cada numero significa lo siguiente:
Para que el cliente vaya cambiando su valor hasta llegar a “4” DONE, debemos continuar con el paso siguiente, iniciar la solicitud recien creada y eso lo hacemos invocando al metodo open() de la siguiente manera:
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
El cual recibe dos parametros principales, primero, el metodo de solicitud HTTP, y segundo, la direccion URL de la API o al recurso donde se hara la solicitud, para la URL usaremos JSONPlaceholder, que nos permite a acceder a una API falsa con datos ficticios para poder practicar..
Entre los principales metodos de solicitud HTTP son:
GET
El metodo HTTP GET solicita una representación del recurso especificado. Las solicitudes que usan GET solo deben usarse para recuperar datos (no deben incluir datos).
POST
El metodo HTTP POST envía datos al servidor. El tipo del cuerpo de la solicitud está indicado por la cabecera Content-Type.
PUT
El metodo (idempotente) HTTP PUT crea un nuevo elemento o reemplaza una representación del elemento de destino con los datos de la petición.
Diferencia entre PUT & POST es que PUT es un metodo idempotente, es decir, llamarlo una o más veces de forma sucesiva tiene el mismo efecto (sin efectos secundarios), mientras que una sucesión de peticiones POST idénticas pueden tener efectos adicionales, como enviar una orden varias veces.
DELETE
El metodo HTTP DELETE elimina el recurso especificado.
…
Una vez sabiendo esto podemos continuar con el siguiente paso, que es enviar la peticion invocando al metodo send():
xhr.send();
Al tener todo esto escrito en nuestro codigo, se debe de ver asi:
const xhr = new XMLHttpRequest;
xhr.addEventListener("readystatechange", e => {
console.log(xhr);
});
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
Hoy si podemos visualizar en consola lo siguiente:
Nos imprime 4 veces en consola la instancia realizada con el evento readystatechange, es porque segun va cambiando de estado nos va imprimiendo cada valor de la propiedad readyState, por eso es que si observamos bien podemos ver que en la propiedad readyState se va mostrando por cada impresion en consola el numero 1, 2, 3, 4:
Ahora teniendo en cuenta esto, volvemos dentro del evento readystatechange que asignamos a nuestra instancia del objeto XMLHttpRequest, aca es donde sucede la magia:
xhr.addEventListener("readystatechange", e => {
console.log(xhr);
});
Antes de imprimir el objeto vamos a hacer algunas validaciones, ya que hasta este paso el objeto nos muestra cuatro veces en consola por cada cambio de valor de la propiedad readyState, y nos interesa que nos muestre en consola solo cuando readyState* tenga como valor el numero 4.
Para eso hacemos la validacion correspondiente agregando dentro del evento lo siguiente:
if (xhr.readyState !== 4) return;
Accedemos a la propiedad readyState y validamos que cuando el valor de la propiedad readyState sea diferente de 4, que no haga nada, por eso ponemos “return”. Ya que nos interesa que solo nos muestre cuando el valor de la propiedad readyState sea “4”.
Al ver en consola vemos que ya solo nos imprime una vez:
Ahora que ya validamos eso, nos toca evaluar cuando la propiedad status este en el codigo de estado de respuesta HTTP correcto, estos codigos empiezan desde el numero 100 hasta 599.
Los codigos de estado de respuesta HTTP son los siguientes:
- Respuestas informativas (100 – 199)
- Respuestas satisfactorias (200 – 299)
- Redirecciones (300 – 399)
- Errores de los clientes (400 – 499)
- Errores de servidores (500 – 599)
Cada codigo representa algo en la web y mas cuando hacemos peticiones con AJAX, aca te muestro una captura donde podemos observar esos codigos que se estan ejecutando a medida que vamos realizando este tutorial, en el navegador cuando inspeccionamos la pagina, en el apartado de “network” vemos lo siguiente:
Podemos ver el status (codigos de estado de respuesta HTTP), observamos que nos muestra un codigo de respuestas informativas (101), estas son solo de informacion, en este caso es del web socket que se implementa en el navegador y el servidor de visual studio para ver en vivo los resultados del tutorial.
Nos aparecen códigos de respuestas satisfactorias (200), este es porque se ha hecho correctamente la petición a la API de JSONPlaceholder.
Y también nos muestra dos códigos de redirecciones (304), este es porque se están usando los dos archivos que creamos al inicio del tutorial y se almacenan en cache del navegador.
Los errores (400 – 499) son cuando no se encuentra el recurso de la peticion que se esta realizando, y los errores (500 – 599) suceden cuando el servidor donde se ha alojado el recurso no ha sido encontrado.
…
Ahora sabiendo esto, el siguiente paso es hacer la validacion cuando la respuesta sea satisfactoriamente, pondremos dentro del codigo lo siguiente:
if (xhr.status >= 200 && xhr.status < 300) {
let req = xhr.responseText;
console.log(req);
} else {
console.log("error");
}
Creamos un “if else” donde validamos que la respuesta sea satisfactoria con un operador logico, cuando el status sea mayor o igual a un codigo de respuesta 200 && status sea menor a un codigo de respuesta menor a 300 (el numero 300 no se toma en cuenta, 299 si). Si esto se cumple, entonces, declaramos una variable llamada “req” donde almacenaremos la respuesta a la peticion.
La respuesta a la peticion se almacena en la propiedad responseText y tambien en la propiedad response, la diferencia en ambos es que responseText devuelve la respuesta en texto plano, en cambio response devuelve la respuesta en un tipo de dato JavaScript.
Para acceder a la respuesta de la peticion, llamamos a la propiedad responseText para tenerlo en formato de texto plano, y mandamos a imprimir en consola.
Si esta condicion no se cumple, entonces imprimimos un error en consola.
Veamos el resultado de esto:
Ya podemos ver la respuesta en formato de texto plano en consola, pero, en formato de texto plano no nos sirve, debemos convertirlo en formato JSON, para eso lo convertimos de la siguiente manera:
Agregamos lo siguiente al codigo luego de mandar a imprimir en consola la variable “req”:
let data = JSON.parse(req);
console.log(data);
Creamos una variable llamada “data” y hacemos uso de JSON para invocar al metodo parse() quedando de la siguiente manera **JSON.parse()** y dentro de los parentesis ponemos la variable donde almacenamos la respuesta de la peticion. Finalmente mandamos a imprimir en consola la variable “data” donde ya convertimos la respuesta en formato JSON.
El código final nos debe quedar así:
const xhr = new XMLHttpRequest;
xhr.addEventListener("readystatechange", e => {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status < 300) {
let req = xhr.responseText;
let data = JSON.parse(req);
console.log(data);
} else {
console.error("error");
}
console.log(xhr);
});
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
Y si vemos la consola en el navegador ya podemos ver lo siguiente:
Ya podemos obtener la respuesta a la petición que hemos hecho a JSONPlaceholder en formato JSON.
Con esto hemos finalizado la petición a la API de JSONPlaceholder, ya con esto ya solo queda mostrar los datos en el DOM, en una tabla o en tarjetas dinámicas mediante el DOM, pero eso lo veremos en el próximo blog.
This content originally appeared on DEV Community and was authored by Ulises A.F.C