Saltar al contenido
Portada » Fundamentos AJAX y XHR

Fundamentos AJAX y XHR

AJAX significa Asynchronous Javascript and XML, simplemente describe una técnica para enviar datos al backend sin alterar el estado actual de la página. De esta forma pueden cargarse datos de forma dinámica sin recargar la página web. XHR hace referencia al objeto XMLHttpRequest que sirve para interactuar con un servidor de backend.

En resumen, AJAX es el conjunto de técnicas que hacen uso de XHR para cargar datos de forma asíncrona en una web.

Algunos aspectos clave que hay que conocer antes de usar AJAX:

  • HTML DOM (Document Object Model): Para la manipulación de la pantalla que ve el usuario.
  • Información en formato JSON y XML.
  • XMLHttpRequest: Objeto Javascript que usaremos para lanzar las llamadas web al servidor y quedar a la espera del resultado.

Uso de XMLHttpRequest

Petición GET AJAX

var xhrobject = new XMLHttpRequest();
xhrobject.open('GET','ejemplo.com/obtenerdatos');
xhrobject.send();

Petición POST AJAX

  xhrobject.open("POST", 'ejemplo.com/enviardatos', true);
  xhrobject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhrobject.send("nombre=Pedro");

Recepción de la respuesta

xhrobject.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("respuesta").innerHTML = xhrobject.responseText;
  }
}

Ventajas de uso

El beneficio más inmediato es evidente, la actualización dinámica de contenido en tu web, sin necesidad de refrescar la página. Además, el uso directo de la interfaz XMLHttpRequest puede darte mucha versatilidad respecto a frameworks como jQuery, Angular, etc. Desde luego la ventaja del uso de frameworks es la rapidez con la que puedes tener implementadas algunas funcionalidades, pero te obliga a estar al día con la versión. Quedarte con una versión obsoleta puede implicar problemas de funcionamiento y seguridad en tus aplicaciones.

Profundiza en el uso de AJAX y Front

AJAX y XHRFundamentos de llamadas asíncronas JS al backend para cargar datos dinámicos en front.
FetchRealiza llamadas HTTP asíncronas con fetch
JQueryFramework JS para manipular el DOM, lanzar llamadas AJAX, etc

Recursos básicos JS

PrototypeAñadir propiedades de forma dinámica a un objeto
toLocaleStringHerramienta esencial para el formateo de fechas y números en aplicaciones internacionales
Recursividad y pilaUso de recursividad y funcionamiento de la pila JS
DesestructuraciónMecanismo para desempaquetar arrays y objetos
Manejo de StringsManejo básico de Strings, cadenas de caracteres
OperadoresUso de operadores de comparación y lógicos
PromesasGestión de peticiones asíncronas con promesas
SleepImplementación de la función sleep() en JS
ThisUso de la palabra reservada this en diferentes contextos
MapsTe enseñamos cuando usar Map y cuando Object con ejemplos
Switchery JSLibrería para modificar el estilo de los checkbox
Mejores libros Javascript EspañolEncuentra los mejores libros para aprender JS y convertirte en el desarrollador más demandado.
Exception JSManejo de excepciones en Javascript, control de errores y flujo de programa.
Obfuscator JavascriptProtege tu código Javascript Ofuscándolo
Javascript desde ceroAprende los conceptos básicos de Javascript, ponte en marcha.
LodashLodash hace que la manipulación de datos en JavaScript sea más fácil y menos propensa a errores
Formatdate JSFormateo y trabajo con fechas en javascript de forma sencilla.
DayjsBiblioteca para la gestión de fechas
padStartManeja cadenas de texto con la función padStart()