Ajax (también AJAX / ˈ eɪ dʒ æ k s / ; abreviatura de " A synchronous J avaScript and X ML " o " A synchronous Ja vaScript transfer ( x -fer) " [1] [2] ) es un conjunto de archivos web Técnica de desarrollo 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 desacoplar 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 dinámicamente 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 diseñar información. La página web se puede modificar mediante JavaScript para mostrarse dinámicamente y permitir al usuario interactuar con la nueva información. El objeto XMLHttpRequest incorporado se utiliza para ejecutar Ajax en páginas web, lo que permite a los sitios web cargar contenido en la pantalla sin actualizar la página. Ajax no es una tecnología nueva ni un lenguaje nuevo. Más bien, se trata de tecnologías existentes utilizadas de una manera nueva.
A principios y mediados de la década de 1990, 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 completamente nueva desde el servidor. Este proceso fue ineficiente, como lo refleja la experiencia del usuario: todo el contenido de la página desapareció y luego apareció la nueva página. Cada vez que el navegador recargaba una página debido a un cambio parcial, había que reenviar todo el contenido, aunque solo hubiera cambiado parte de la información. Esto supuso una carga adicional en el servidor e hizo 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 de objeto , [ cita necesaria ] 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 secuencias de comandos XMLHttpRequest . [4] Apareció como XMLHTTP en la segunda versión de la biblioteca MSXML , [4] [5] que se envió 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 todavía es compatible con Internet Explorer, pero no con Microsoft Edge . La utilidad de estas solicitudes HTTP en segundo plano y 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 realizó una amplia implementación de Ajax para varios navegadores , compatible con los estándares, 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 en comercio electrónico a gran escala de lo que sus desarrolladores en ese momento llamaron "lo 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: A New Approach to Web Applications , 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 de vida . [14]
El término Ajax ha llegado a representar un amplio grupo de tecnologías web que se pueden utilizar para implementar una aplicación web que se comunica 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 avances en las tecnologías utilizadas en una aplicación Ajax y en la definición del propio término Ajax. Ya no se requiere XML para el intercambio de datos y, por lo tanto, ya no se requiere XSLT para la manipulación de datos. La notación de objetos JavaScript (JSON) se utiliza a menudo como 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 JavaScript populares, incluida JQuery , incluyen abstracciones para ayudar en la ejecución de solicitudes Ajax.
Un ejemplo de una solicitud Ajax simple usando el método GET , escrita en JavaScript .
obtener-ajax-data.js:
// Este es el script del lado del cliente.// Inicializa la solicitud HTTP. let xhr = nuevo XMLHttpRequest (); // define la solicitud xhr . abrir ( 'OBTENER' , 'enviar-ajax-data.php' ); // Seguimiento de los cambios de estado de la solicitud. xhr . onreadystatechange = function () { const HECHO = 4 ; // readyState 4 significa que la solicitud está realizada. constante OK = 200 ; // el estado 200 es una devolución exitosa. if ( xhr . readyState === HECHO ) { if ( xhr . status === OK ) { console . iniciar sesión ( xhr . texto de respuesta ); // 'Esta es la salida.' } más { consola . log ( 'Error:' + xhr . estado ); // Se produjo un error durante la solicitud. } } }; // Envía la solicitud a send-ajax-data.php xhr . enviar ( nulo );enviar-ajax-data.php:
<?php // Este es el script del lado del servidor.// Establece el tipo de contenido. encabezado ( 'Tipo de contenido: texto/sin formato' );// Enviar los datos de vuelta. echo "Esta es la salida." ; ?>Fetch es una API de JavaScript nativa. [17] Según la documentación de desarrolladores de Google, "Fetch hace que sea más fácil realizar solicitudes web y manejar respuestas que con el XMLHttpRequest anterior".
buscar ( 'enviar-ajax-data.php' ) . entonces ( datos => consola . log ( datos )) . catch ( error => consola . log ( 'Error:' + error )); función asíncrona doAjax1 () { intentar { const res = esperar a buscar ( 'send-ajax-data.php' ); datos constantes = esperar resolución . texto (); consola . Dato de registro ) ; } captura ( error ) { consola . iniciar sesión ( 'Error:' + error ); } } hacerAjax1 ();Fetch se basa en promesas de JavaScript.
La fetchespecificación difiere Ajaxen los siguientes aspectos importantes:
fetch() no rechazará el 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 se completara la solicitud.fetch() no enviará cookies de origen cruzado a menos que configure la opción de inicio 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 juega un papel crucial en el desarrollo web moderno. Una ventaja clave de Ajax es su capacidad para representar aplicaciones web sin necesidad de recuperación de datos, lo que resulta en una reducción del tráfico del servidor. Esta optimización minimiza los tiempos de respuesta tanto en el lado del servidor como en el del cliente, eliminando la necesidad de que los usuarios soporten pantallas de carga. [18]
Además, Ajax facilita el procesamiento asincrónico al simplificar la utilización de XmlHttpRequest, que permite un manejo eficiente de solicitudes de recuperación de datos asincrónica. Además, la carga dinámica de contenido mejora significativamente el rendimiento de la aplicación. [19]
Además, Ajax disfruta de un amplio soporte en todos los principales navegadores web, incluidas las versiones 5 y superiores de Microsoft Internet Explorer, las versiones 1.0 y posteriores de Mozilla Firefox, las versiones 7.6 y superiores de Opera y las versiones 1.2 y superiores de Apple Safari. [20]
