Ajax (también AJAX / ˈ eɪ dʒ æ k s / ; abreviatura de " JavaScript y XML asincrónicos " [1] [2] ) es un conjunto de técnicas de desarrollo web que utiliza varias tecnologías web en el lado del cliente para crear aplicaciones web asincrónicas . Con Ajax, las aplicaciones web pueden enviar y recuperar datos de un servidor de forma asincrónica (en segundo plano) sin interferir con la visualización y el comportamiento de la página existente. Al disociar la capa de intercambio de datos de la capa de presentación, Ajax permite que las páginas web y, por extensión, las aplicaciones web, cambien el contenido de forma dinámica sin la necesidad de recargar toda la página. [3] En la práctica, las implementaciones modernas suelen utilizar JSON en lugar de XML.
Ajax no es una tecnología, sino un concepto de programación. HTML y CSS se pueden utilizar en combinación para marcar y dar estilo a la información. La página web se puede modificar mediante JavaScript para que se muestre de forma dinámica y permita que el usuario interactúe con la nueva información. El objeto XMLHttpRequest integrado se utiliza para ejecutar Ajax en páginas web, lo que permite que los sitios web carguen contenido en la pantalla sin actualizar la página. Ajax no es una tecnología nueva ni un lenguaje nuevo, sino tecnologías existentes utilizadas de una forma nueva.
A principios y mediados de los años 90, la mayoría de los sitios web se basaban en páginas HTML completas. Cada acción del usuario requería que se cargara una página nueva completa desde el servidor. Este proceso era ineficiente, como lo reflejaba la experiencia del usuario: todo el contenido de la página desaparecía y luego aparecía la nueva página. Cada vez que el navegador recargaba una página debido a un cambio parcial, todo el contenido tenía que volver a enviarse, aunque solo hubiera cambiado parte de la información. Esto suponía una carga adicional para el servidor y hacía que el ancho de banda fuera un factor limitante en el rendimiento.
En 1996, Internet Explorer introdujo la etiqueta iframe ; al igual que el elemento object , [ cita requerida ] puede cargar una parte de la página web de forma asincrónica. En 1998, el equipo de Microsoft Outlook Web Access desarrolló el concepto detrás del objeto de script XMLHttpRequest . [4] Apareció como XMLHTTP en la segunda versión de la biblioteca MSXML , [4] [5] que se incluyó con Internet Explorer 5.0 en marzo de 1999. [6]
La funcionalidad del control ActiveX XMLHTTP de Windows en IE 5 fue implementada posteriormente por Mozilla Firefox , Safari , Opera , Google Chrome y otros navegadores como el objeto JavaScript XMLHttpRequest. [7] Microsoft adoptó el modelo nativo XMLHttpRequest a partir de Internet Explorer 7. La versión ActiveX aún es compatible con Internet Explorer, pero no con Microsoft Edge . La utilidad de estas solicitudes HTTP en segundo plano y las tecnologías web asincrónicas permaneció bastante oscura hasta que comenzó a aparecer en aplicaciones en línea a gran escala como Outlook Web Access (2000) [8] y Oddpost (2002). [9]
Google implementó ampliamente Ajax compatible con estándares y multinavegador con Gmail (2004) y Google Maps (2005). [10] En octubre de 2004, la versión beta pública de Kayak.com fue uno de los primeros usos de comercio electrónico a gran escala de lo que sus desarrolladores en ese momento llamaban "la cosa xml http". [11] Esto aumentó el interés en Ajax entre los desarrolladores de programas web.
El término AJAX fue utilizado públicamente el 18 de febrero de 2005 por Jesse James Garrett en un artículo titulado Ajax: Un nuevo enfoque para las aplicaciones web , basado en técnicas utilizadas en las páginas de Google. [1]
El 5 de abril de 2006, el Consorcio World Wide Web (W3C) publicó el primer borrador de especificación para el objeto XMLHttpRequest en un intento de crear un estándar web oficial . [12] El último borrador del objeto XMLHttpRequest se publicó el 6 de octubre de 2016, [13] y la especificación XMLHttpRequest es ahora un estándar vivo . [14]
El término Ajax ha llegado a representar un amplio grupo de tecnologías web que pueden utilizarse para implementar una aplicación web que se comunique con un servidor en segundo plano, sin interferir con el estado actual de la página. En el artículo que acuñó el término Ajax, [1] [3] Jesse James Garrett explicó que se incorporan las siguientes tecnologías:
Desde entonces, sin embargo, ha habido una serie de desarrollos en las tecnologías utilizadas en una aplicación Ajax, y en la definición del término Ajax en sí. XML ya no es necesario para el intercambio de datos y, por lo tanto, XSLT ya no es necesario para la manipulación de datos. JavaScript Object Notation (JSON) se utiliza a menudo como un formato alternativo para el intercambio de datos, [15] aunque también se pueden utilizar otros formatos como HTML preformateado o texto sin formato. [16] Una variedad de bibliotecas populares de JavaScript, incluida JQuery , incluyen abstracciones para ayudar a ejecutar solicitudes Ajax.
Un ejemplo de una solicitud Ajax simple que utiliza el método GET , escrito en JavaScript .
obtener-ajax-data.js:
// Este es el script del lado del cliente.// Inicializa la solicitud HTTP. let xhr = new XMLHttpRequest (); // define la solicitud xhr.open ( 'GET' , 'send-ajax-data.php' ); // Realiza un seguimiento de los cambios de estado de la solicitud. xhr . onreadystatechange = function () { const DONE = 4 ; // readyState 4 significa que la solicitud está realizada. const OK = 200 ; // el estado 200 es un retorno exitoso. if ( xhr . readyState === DONE ) { if ( xhr . status === OK ) { console . log ( xhr . responseText ); // 'Esta es la salida.' } else { console . log ( 'Error: ' + xhr . status ); // Ocurrió un error durante la solicitud. } } }; // Envía la solicitud a send-ajax-data.php xhr . send ( null );enviar-ajax-data.php:
<?php // Este es el script del lado del servidor.// Establezca el tipo de contenido. header ( 'Content-Type: text/plain' );// Envía los datos de vuelta. echo "Esta es la salida." ; ?>Fetch es una API nativa de JavaScript. [17] Según la documentación para desarrolladores de Google, "Fetch facilita la realización de solicitudes web y el manejo de respuestas que con la antigua XMLHttpRequest".
fetch ( 'send-ajax-data.php' ) . then ( datos = > console.log ( datos ) ) . catch ( error => console.log ( ' Error:' + error ) ); función asíncrona doAjax1 ( ) { try { const res = await fetch ( ' send - ajax-data.php' ); const data = await res.text ( ); console.log ( datos ) ; } catch ( error ) { console.log ( 'Error:' + error ) ; } } hacerAjax1 ();Fetch se basa en promesas de JavaScript.
La fetchespecificación difiere Ajaxen los siguientes aspectos importantes:
fetch() no se rechazará en caso de un estado de error HTTP incluso si la respuesta es HTTP 404 o 500. En cambio, tan pronto como el servidor responda con encabezados, la Promesa se resolverá normalmente (con la okpropiedad de la respuesta establecida en falso si la respuesta no está en el rango 200-299), y solo se rechazará en caso de falla de la red o si algo impidió que la solicitud se completara.fetch() No enviará cookies de origen cruzado a menos que configure la opción de inicialización de credenciales . (Desde abril de 2018. La especificación cambió la política de credenciales predeterminada a same-origin. Firefox cambió desde 61.0b13).Ajax ofrece varios beneficios que pueden mejorar significativamente el rendimiento de las aplicaciones web y la experiencia del usuario. Al reducir el tráfico del servidor y mejorar la velocidad, Ajax desempeña un papel crucial en el desarrollo web moderno. Una ventaja clave de Ajax es su capacidad para renderizar aplicaciones web sin necesidad de recuperar datos, lo que resulta en una reducción del tráfico del servidor. Esta optimización minimiza los tiempos de respuesta tanto del lado del servidor como del cliente, eliminando la necesidad de que los usuarios soporten pantallas de carga. [18]
Además, Ajax facilita el procesamiento asincrónico al simplificar el uso de XmlHttpRequest, lo que permite un manejo eficiente de las solicitudes de recuperación asincrónica de datos. Además, la carga dinámica de contenido mejora significativamente el rendimiento de la aplicación. [19]
Además, Ajax goza de un amplio soporte en todos los navegadores web principales, incluidos Microsoft Internet Explorer versiones 5 y superiores, Mozilla Firefox versiones 1.0 y superiores, Opera versiones 7.6 y superiores, y Apple Safari versiones 1.2 y superiores. [20]
