Guía Práctica: El Objeto Xmlhttprequest

XMLHttpRequest ha transformado el web desde 2015, permitiendo que páginas se actualicen sin recargas molestas. Esta Guía Práctica: El Objeto XMLHttpRequest te muestra cómo usarlo en JavaScript para requests dinámicos.

¿Qué es XMLHttpRequest?

Piensa en XMLHttpRequest, o XHR para amigos, como tu mensajero personal al servidor.
Pide datos sin interrumpir la página.

No solo XML, como dice su nombre.
Maneja JSON, texto, blobs.

💡 Si estás sumergiéndote en el mundo de la IA, descubre por qué Python brilla en inteligencia artificial y cómo impulsará tus proyectos con eficiencia y simplicidad.

¿Necesitas eventos del servidor? Usa EventSource.
Para chat full-duplex, WebSockets gana.

XHR brilla en apps antiguas o workers web.
Disponible en navegadores modernos desde julio 2015.

Creando tu primer XMLHttpRequest

Empecemos simple. Crea uno con el constructor.
let xhr = new XMLHttpRequest();

💡 Si estás explorando el mundo de la tecnología portátil, no te pierdas esta guía esencial sobre definición y características de dispositivos móviles, perfecta para entender sus fundamentos clave.

Llama al constructor antes de todo.
Sin él, nada funciona.

Abre la conexión con xhr.open('GET', 'url');.
Método y URL obligatorios.

Envía con xhr.send();.
Para POST, pasa datos: xhr.send(body);.

¿Listo para probar? Copia esto ya.
Verás magia en consola.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

💡 Si estás explorando carreras en el mundo de la tecnología y la innovación, no te pierdas un repaso completo a las ramas más demandadas de la ingeniería, ideal para decidir tu especialidad con total claridad.

Propiedades clave de XMLHttpRequest

XHR hereda de EventTarget.
Muchas propiedades leen el estado.

readyState: Número del progreso (0-4).
response: Datos según tipo.

responseText: String del body.
Útil si falla parseo.

responseType: Define formato (‘json’, ‘blob’).
Evita sorpresas.

💡 Si te apasiona la tecnología y buscas potenciar tu carrera, explora los beneficios clave de aprender a programar para desbloquear oportunidades infinitas en el mundo digital.

Propiedad	Descripción	Tipo
readyState	Estado actual	Número (0-4)
response	Cuerpo respuesta	Varía
status	Código HTTP	Número
timeout	Límite ms	Número

status: 200 OK, 404 no encontrado.
statusText: “OK” o razón.

withCredentials: Cookies en cross-site.
Actívalo con true.

Los estados: entendiendo readyState

readyState cuenta la vida del request.
0: No inicializado.

💡 Si eres desarrollador mobile y dudas entre plataformas, explora los pros y contras del ecosistema Android para devs para decidir con datos reales y optimizar tu flujo de trabajo.

1: Abierto, post-open().
2: Headers recibidos.

3: Cargando body.
4: Completado, listo.

¿Cuándo usarlo? En eventos como onreadystatechange.
Chequea if (xhr.readyState === 4 && xhr.status === 200).

Código típico:

xhr.onreadystatechange = function() {
  if (xhr.**readyState** === 4) {
    console.log('¡Listo!');
  }
};

No olvides status 200-299 para éxito.
Errores como 500? Maneja con gracia.

Manejo de eventos y respuestas

XHR es EventTarget.
Escucha load, error, progress.

xhr.onload = () => { datos = xhr.response; };
Más limpio que onreadystatechange.

Para upload: upload property.
xhr.upload.onprogress = updateBar();.

responseXML: Document si XML/HTML.
No en workers.

¿Qué pasa en HTTP/2? statusText vacío.
Usa status solo.

Pregúntate: ¿JSON esperado? Set responseType = 'json';.
Evita JSON.parse(xhr.responseText).

Ejemplo práctico: Fetching JSON

Imagina cargar usuarios de API.
Usa XHR para lista dinámica.

Paso uno: Crea y configura.

let xhr = new **XMLHttpRequest**();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
xhr.responseType = 'json';
xhr.timeout = 5000; // 5 seg

Dos: Eventos.

xhr.onload = function() {
  if (xhr.status === 200) {
    let users = xhr.response;
    users.forEach(user => console.log(user.name));
  }
};
xhr.onerror = () => console.error('Error!');

Tres: Envía.
xhr.send();

¡Lista en página!
Sin recarga.

¿POST? Cambia a 'POST', headers xhr.setRequestHeader('Content-Type', 'application/json');.
xhr.send(JSON.stringify(data));.

Prueba con form submit.
Adiós recargas.

Comparación con Fetch API

XHR vs Fetch: ¿Cuál elegir?
Fetch es moderno, Promise-based.

XHR gana en IE antiguos o upload progress.
Fetch más legible.

Aspecto	XHR	Fetch
Promesas	No nativo	Sí
Abort	abort()	AbortController
Progreso	Bueno	Limitado
Browser support	Todo	Moderno

¿Transición? Usa XHR si necesitas upload.
Sino, Fetch para futuro.

Humor: XHR es como teléfono fijo.
Funciona siempre, pero Fetch es smartphone.

Configuraciones avanzadas

Timeout: xhr.timeout = 10000; evita hangs.
Evento ontimeout.

Headers: setRequestHeader post-open.
No olvides Content-Type.

Cross-origin: withCredentials = true.
CORS debe permitir.

responseURL: URL final post-redirects.
Útil debug.

Workers: Sí, menos responseXML.
Service Workers: No.

Errores comunes y soluciones

¿Request no envía? Chequea open antes send.
Fácil olvido.

Status 0: CORS bloquea.
Ver dev tools.

Parse fail: Set responseType correcto.
O usa responseText.

No readyState 4: Espera evento.
Async por default.

Tip: Siempre xhr.abort() en unmount.
Evita leaks.

Pregunta: ¿Qué si servidor lento?
Timeout y retry logic.

Casos reales en apps

En dashboard: XHR carga charts data.
Progress bar para user feedback.

AJAX puro: Form validation servidor.
Sin page jump.

Legacy code: Migra despacio a Fetch.
XHR estable.

Ejemplo tabla dinámica:

// Carga y pinta tabla
xhr.onload = () => {
  let data = xhr.response;
  let table = document.getElementById('tabla');
  data.forEach(row => {
    let tr = table.insertRow();
    tr.insertCell(0).textContent = row.id;
  });
};

¿Ves? Poder simple.
Integra ya.

Mejores prácticas para XMLHttpRequest

Usa try-catch? No, eventos manejan.
Loggea status siempre.

Promises wrapper: Haz XHR promisificado.
Para async/await.

function fetchXHR(url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => resolve(xhr.response);
    xhr.onerror = reject;
    xhr.send();
  });
}

Genial para chains.
Moderniza sin romper.

Anticipo: ¿Seguridad? Sanitiza inputs.
HTTPS siempre.

Conclusión y próximos pasos

Dominaste XMLHttpRequest basics.
Práctica en proyectos reales.

Explora Fetch, Axios next.
Pero XHR base sólida.

Comparte tu primer request abajo.
¡Pregunta dudas! Esta Guía Práctica: El Objeto XMLHttpRequest solo empieza.