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
- Un ejemplo de solicitud XHR
- Parámetros de open () adicionales
onreadystatechange
- Abortar una solicitud XHR
- Comparación con jQuery
- Comparación con Fetch
- Solicitudes entre dominios
- Cargar archivos usando XHR
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 elonreadystatechange
evento.
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
losonreadystatechange
se 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 elxhr
objeto.
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.
Descarga mi gratisManual para principiantes de JavaScript
Más tutoriales de navegador:
- Algunos trucos útiles disponibles en HTML5
- Cómo hice que un sitio web basado en CMS funcionara sin conexión
- La guía completa de aplicaciones web progresivas
- La API de Fetch
- La guía Push API
- La API de mensajería de canal
- Tutorial para trabajadores de servicios
- La guía de la API de caché
- La guía de la API de notificaciones
- Sumérjase en IndexedDB
- La API de selectores: querySelector y querySelectorAll
- Cargue JavaScript de forma eficiente con diferir y asincrónico
- El modelo de objetos de documento (DOM)
- La API de almacenamiento web: almacenamiento local y almacenamiento de sesiones
- Descubra cómo funcionan las cookies HTTP
- La API de historia
- El formato de imagen WebP
- XMLHttpRequest (XHR)
- Un tutorial detallado de SVG
- ¿Qué son las URL de datos?
- Hoja de ruta para aprender la plataforma web
- CORS, intercambio de recursos de origen cruzado
- Trabajadores web
- La guía requestAnimationFrame ()
- Que es el Doctype
- Trabajar con la consola de DevTools y la API de la consola
- La API de síntesis de voz
- Cómo esperar el evento DOM Ready en JavaScript simple
- Cómo agregar una clase a un elemento DOM
- Cómo recorrer los elementos DOM de querySelectorAll
- Cómo eliminar una clase de un elemento DOM
- Cómo comprobar si un elemento DOM tiene una clase
- Cómo cambiar un valor de nodo DOM
- Cómo agregar un evento de clic a una lista de elementos DOM devueltos por querySelectorAll
- WebRTC, la API web en tiempo real
- Cómo obtener la posición de desplazamiento de un elemento en JavaScript
- Cómo reemplazar un elemento DOM
- Cómo aceptar solo imágenes en un campo de archivo de entrada
- ¿Por qué utilizar una versión de vista previa de un navegador?
- El objeto Blob
- El objeto de archivo
- El objeto FileReader
- El objeto FileList
- ArrayBuffer
- ArrayBufferView
- El objeto URL
- Matrices escritas
- El objeto DataView
- La API BroadcastChannel
- La API de Streams
- El objeto FormData
- El objeto del navegador
- Cómo utilizar la API de geolocalización
- Cómo utilizar getUserMedia ()
- Cómo utilizar la API de arrastrar y soltar
- Cómo trabajar con el desplazamiento en páginas web
- Manejo de formularios en JavaScript
- Eventos de teclado
- Eventos del mouse
- Toque eventos
- Cómo eliminar a todos los hijos de un elemento DOM
- Cómo crear un atributo HTML usando Vanilla Javascript
- ¿Cómo verificar si una casilla de verificación está marcada usando JavaScript?
- Cómo copiar al portapapeles usando JavaScript
- Cómo deshabilitar un botón usando JavaScript
- Cómo hacer que una página sea editable en el navegador
- Cómo obtener valores de cadena de consulta en JavaScript con URLSearchParams
- Cómo eliminar todo el CSS de una página a la vez
- Cómo utilizar insertAdjectedHTML
- Safari, avisa antes de salir
- Cómo agregar una imagen al DOM usando JavaScript
- Cómo restablecer un formulario
- Cómo utilizar las fuentes de Google