XMLHttpRequest (XHR)

La introducción de XMLHttpRequest (XHR) en los navegadores a mediados de la década de 2000 fue una gran victoria para la plataforma web. Vamos a ver cómo funciona.

Introducción

La introducción de XMLHttpRequest (XHR) en los navegadores a mediados de la década de 2000 fue una gran victoria para la plataforma web. Vamos a ver cómo funciona.

Las cosas que ahora parecen normales, en el pasado, parecían venir del futuro. Estoy hablando de GMail o Google Maps, por ejemplo, todos basados en gran parte en XHR.

XHR se inventó en Microsoft en los noventa y se convirtió en un estándar de facto ya que todos los navegadores lo implementaron en el período 2002-2006. El W3C estandarizó XMLHttpRequest en 2006.

Como a veces puede suceder en la plataforma web, inicialmente hubo algunas inconsistencias que hicieron que trabajar con XHR fuera bastante diferente entre navegadores.

Las bibliotecas como jQuery obtuvieron un impulso de popularidad al proporcionar una abstracción fácil de usar para los desarrolladores, y esto a su vez ayudó a difundir el uso de esta tecnología.

Un ejemplo de solicitud XHR

El siguiente código crea un objeto de solicitud XMLHttpRequest (XHR) y adjunta una función de devolución de llamada que responde en elonreadystatechangeevento.

La conexión xhr está configurada para realizar una solicitud GET ahttps://yoursite.com, y ha comenzado con elsend()método:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
  }
}
xhr.open('GET', 'https://yoursite.com')
xhr.send()

Parámetros de open () adicionales

En el ejemplo anterior, simplemente pasamos el método y la URL a la solicitud.

También podemos especificar los otros métodos HTTP - (get,post,head,put,delete,options).

Otros parámetros le permiten especificar una marca para hacer que la solicitud sea sincrónica si se establece en falso, y un conjunto de credenciales para la autenticación HTTP:

open(method, url, asynchronous, username, password)

onreadystatechange

losonreadystatechangese llama varias veces durante una solicitud XHR. Ignoramos explícitamente todos los estados que no seanreadyState === 4, lo que significa que la solicitud está hecha.

Los estados son

  • 1 (ABIERTO): comienza la solicitud
  • 2 (HEADERS_RECEIVED): se han recibido los encabezados HTTP
  • 3 (CARGANDO): la respuesta comienza a descargar
  • 4 (FINALIZADO): la respuesta se ha descargado

Abortar una solicitud XHR

Una solicitud XHR se puede cancelar llamando alabort()método en elxhrobjeto.

Comparación con jQuery

Con jQuery estas líneas se pueden traducir a:

$.get('https://yoursite.com', data => {
  console.log(data)
}).fail(err => {
  console.error(err)
})

Comparación con Fetch

Con elObtener APIeste es el código equivalente:

fetch('https://yoursite.com')
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
  })

Solicitudes entre dominios

Tenga en cuenta que una conexión XMLHttpRequest está sujeta a límites específicos que se aplican por razones de seguridad.

Uno de los más obvios es la aplicación de la misma política de origen.

No puede acceder a recursos en otro servidor,a no ser queel servidor admite explícitamente esto usandoCORS (intercambio de recursos de origen cruzado).

Cargar archivos usando XHR

Mira mi tutorial sobrecómo cargar archivos usando XHR.


Más tutoriales de navegador:


Tech Wiki en línea!