stringtranslate.com

Ajax (programación)

Ajax (también AJAX / ˈ æ 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.

Historia

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]

Tecnologías

El modelo convencional para una aplicación web versus una aplicación que utiliza Ajax

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, incluyendo JQuery , incluyen abstracciones para ayudar a ejecutar solicitudes Ajax.

Ejemplos

Ejemplo de JavaScript

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." ; ?>

Obtener ejemplo

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 ) );         

Ejemplo de ES7 async/await

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:

Beneficios

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, incluidas las versiones 5 y superiores de Microsoft Internet Explorer, las versiones 1.0 y superiores de Mozilla Firefox, las versiones 7.6 y superiores de Opera y las versiones 1.2 y superiores de Apple Safari. [20]

Véase también

Referencias

  1. ^ abc Jesse James Garrett (18 de febrero de 2005). «Ajax: un nuevo enfoque para las aplicaciones web». AdaptivePath.com. Archivado desde el original el 10 de septiembre de 2015. Consultado el 19 de junio de 2008 .
  2. ^ "Ajax - Guías para desarrolladores web". MDN Web Docs . Archivado desde el original el 28 de febrero de 2018. Consultado el 27 de febrero de 2018 .
  3. ^ ab Ullman, Chris (marzo de 2007). El comienzo de Ajax. wrox. ISBN 978-0-470-10675-4Archivado desde el original el 5 de julio de 2008 . Consultado el 24 de junio de 2008 .
  4. ^ ab "Artículo sobre la historia de XMLHTTP escrito por un desarrollador original". Alexhopmann.com. 31 de enero de 2007. Archivado desde el original el 23 de junio de 2007. Consultado el 14 de julio de 2009 .
  5. ^ "Especificación de la interfaz IXMLHTTPRequest de Microsoft Developer Network". Msdn.microsoft.com. Archivado desde el original el 26 de mayo de 2016. Consultado el 14 de julio de 2009 .
  6. ^ Dutta, Sunava (23 de enero de 2006). «Objeto XMLHTTPRequest nativo». IEBlog . Microsoft. Archivado desde el original el 6 de marzo de 2010 . Consultado el 30 de noviembre de 2006 .
  7. ^ "HTML y XML dinámicos: el objeto XMLHttpRequest". Apple Inc. Archivado desde el original el 9 de mayo de 2008. Consultado el 25 de junio de 2008 .
  8. ^ Hopmann, Alex. "Historia de XMLHTTP". Blog de Alex Hopmann . Archivado desde el original el 30 de marzo de 2010. Consultado el 17 de mayo de 2010 .
  9. ^ Tynan, Dan (1 de octubre de 2007). "Los 16 momentos más importantes de la historia de la Web". Entrepreneur .
  10. ^ "Una breve historia del Ajax". Aaron Swartz. 22 de diciembre de 2005. Archivado desde el original el 3 de junio de 2010. Consultado el 4 de agosto de 2009 .
  11. ^ English, Paul (12 de abril de 2006). «Interfaz de usuario de kayak». Technoblog oficial de Kayak.com . Archivado desde el original el 23 de mayo de 2014. Consultado el 22 de mayo de 2014 .
  12. ^ van Kesteren, Anne; Jackson, Dean (5 de abril de 2006). "El objeto XMLHttpRequest". W3.org . Consorcio World Wide Web. Archivado desde el original el 16 de mayo de 2008 . Consultado el 25 de junio de 2008 .
  13. ^ Kesteren, Anne; Aubourg, Julian; Song, Jungkee; Steen, Hallvord RM "XMLHttpRequest Level 1". W3.org . W3C. Archivado desde el original el 13 de julio de 2017 . Consultado el 19 de febrero de 2019 .
  14. ^ "Estándar XMLHttpRequest". xhr.spec.whatwg.org . Consultado el 21 de abril de 2020 .
  15. ^ "Notación de objetos JavaScript". Apache.org. Archivado desde el original el 16 de junio de 2008. Consultado el 4 de julio de 2008 .
  16. ^ "Acelere sus aplicaciones basadas en Ajax con JSON". DevX.com. Archivado desde el original el 4 de julio de 2008. Consultado el 4 de julio de 2008 .
  17. ^ "Fetch API - Web APIs". MDN . Archivado desde el original el 29 de mayo de 2019 . Consultado el 30 de mayo de 2019 .
  18. ^ "¿Qué es AJAX? Ventajas y desventajas de Ajax?". magaplaza. Archivado desde el original el 6 de octubre de 2023. Consultado el 6 de octubre de 2023 .
  19. ^ "¿Qué es AJAX? Ventajas y desventajas de AjaxVentajas y desventajas de AJAX: ya las conoces". POTENZA. Archivado desde el original el 6 de octubre de 2023. Consultado el 6 de octubre de 2023 .
  20. ^ "Las 5 principales ventajas y desventajas de AJAX". POTENZA. Archivado desde el original el 6 de octubre de 2023. Consultado el 6 de octubre de 2023 .

Enlaces externos