XMLHttpRequest es un objeto que se implemento en ECMAScript 5 para la realización de peticiones HTTP asíncronas nativas en Java Script.

Al ser un objeto, esta implementación cuenta con distintas propiedades y métodos que debemos conocer para comenzar a trabajar con ella.

<aside> 💡 Si bien en esta pagina se habla sobre XMLHttpRequest, solo se tocan las partes mas esenciales para el uso de este objeto. Puede encontrarse mas informaci+on en la documentación: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

</aside>

Propiedades de XMLHttpRequest:

Si bien estas no son todas sus propiedades, aca están algunas de las mas importantes para comenzar a trabajar:

• Status: Retorna un numero indicando el código de respuesta HTTP de la solicitud, alguno de los mas conocidos son:

• ResponseText: Nos devuelve un string que contienen un texto como respuesta de al solicitud, o null si la solicitud no fue exitosa.

• ReadyState: Retorna un numero que indica el estado de la solicitud, los valores pueden ser:

  

  Los métodos open()| send() son vistos mas adelante

• TimeOut: Tiempo en milisegundos que una solicitud tiene antes de cancelarse automáticamente.

Métodos de XMLHttpRequest:

• open(): Inicializa una solicitud, o re inicializa una existente.

  let XHR = new  XMLHttpRequest()
  
  XHR.open(metodo,URL,async,user,password)
  

  Este método puede recibir los siguientes parámetros:

  Método: el método de solicitudes HTTP a usar, tales como:

  “GET” , “POST”, “PUT”, “DELETE”

  URL: Un string representando la URL a donde se envía la solicitud.

  Async: Parámetro opcional. Booleano que indica si la solicitud es o no asíncrona, por default es true.

  User: Parámetro opcional. el nombre de usuario usado por razones de autenticación.

  Password: Parámetro opcional. la contraseña usada por razones de autenticación.

• send(): Este método envía la solicitud previamente abierta al servidor, este retorna su resultado usando eventos.

  let XHR = new  XMLHttpRequest()
  
  XHR.send()
  

• abort(): Este método aborta una solicitud que ha sido ya enviada, cambia la propiedad readyState a 0 (UNSET)

  let XHR = new  XMLHttpRequest()
  
  XHR.abort()
  

Eventos de XMLHttpRequest:

Estos eventos son manejados por la web api de eventos del navegador, estas nos permiten realizar peticiones que ejecutan código de manera asíncrona

• readyStateChange: Este es disparado siempre que el readyState de una solicitud cambie.

  onreadystatechange = (event) => { }
  addEventListener('readystatechange', (event) => { })
  

• load: Se dispara cuando una transacción de XMLHttpRequest se completa exitosamente.

  addEventListener('load', (event) => { })
  
  onload = (event) => { }
  

• abort: Se dispara cuando una peticion es abortada, por ejemplo usando el metodo abort()

  addEventListener('abort', (event) => { })
  
  onabort = (event) => { }