
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 XHR | Fundamentos de llamadas asíncronas JS al backend para cargar datos dinámicos en front. |
Fetch | Realiza llamadas HTTP asíncronas con fetch |
JQuery | Framework JS para manipular el DOM, lanzar llamadas AJAX, etc |
Recursos básicos JS
Prototype | Añadir propiedades de forma dinámica a un objeto |
toLocaleString | Herramienta esencial para el formateo de fechas y números en aplicaciones internacionales |
Recursividad y pila | Uso de recursividad y funcionamiento de la pila JS |
Desestructuración | Mecanismo para desempaquetar arrays y objetos |
Manejo de Strings | Manejo básico de Strings, cadenas de caracteres |
Operadores | Uso de operadores de comparación y lógicos |
Promesas | Gestión de peticiones asíncronas con promesas |
Sleep | Implementación de la función sleep() en JS |
This | Uso de la palabra reservada this en diferentes contextos |
Maps | Te enseñamos cuando usar Map y cuando Object con ejemplos |
Switchery JS | Librería para modificar el estilo de los checkbox |
Mejores libros Javascript Español | Encuentra los mejores libros para aprender JS y convertirte en el desarrollador más demandado. |
Exception JS | Manejo de excepciones en Javascript, control de errores y flujo de programa. |
Obfuscator Javascript | Protege tu código Javascript Ofuscándolo |
Javascript desde cero | Aprende los conceptos básicos de Javascript, ponte en marcha. |
Lodash | Lodash hace que la manipulación de datos en JavaScript sea más fácil y menos propensa a errores |
Formatdate JS | Formateo y trabajo con fechas en javascript de forma sencilla. |
Dayjs | Biblioteca para la gestión de fechas |
padStart | Maneja cadenas de texto con la función padStart() |