Hispanopedia Wiki
Articulo de referencia

Ajax (programación)

JavaScript y XML asíncronos [ 1 ] [ 2 ] , generalmente denominado Ajax (a veces escrito con mayúscula AJAX , / ˈ eɪ dʒ æ k s / ) es un conjunto de técnicas de desarrollo web que...

Hispanopedia WikiContenido en espanolLectura gratuita

JavaScript y XML asíncronos [ 1 ] [ 2 ] , generalmente denominado Ajax (a veces escrito con mayúscula AJAX , / ˈ eɪ dʒ æ k s / ) es un conjunto de técnicas de desarrollo web que utiliza varias tecnologías web asíncronas en el lado del cliente para crear aplicaciones web . Con Ajax, las aplicaciones web pueden enviar y recuperar datos de un servidor de forma asíncrona (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 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 patrón de programación. JavaScript permite modificar la página web para mostrar dinámicamente la información recuperada (y permitir la interacción del usuario con ella) sin necesidad de recargarla. El objeto XMLHttpRequest integrado se puede usar para ejecutar solicitudes Ajax en páginas web, y la función integrada fetch()es una alternativa más reciente a XMLHttpRequest que también permite realizar solicitudes Ajax.

Historia

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 la carga de una página nueva desde el servidor. Este proceso era ineficiente, como se reflejaba en la experiencia del usuario: todo el contenido de la página desaparecía y luego aparecía la nueva. Cada vez que el navegador recargaba una página debido a un cambio parcial, todo el contenido debía reenviarse, aunque solo una parte de la información hubiera cambiado. Esto sobrecargaba el servidor y convertía el ancho de banda en un factor limitante del rendimiento.

Los fundamentos de Ajax se remontan a 1996 con la introducción de JavaScript 1. Los desarrolladores descubrieron rápidamente que cualquier elemento HTML que aceptara un atributo "src" podía usarse para obtener datos remotos. Al cambiar el src de un marco oculto , un desarrollador podía obtener datos remotos, procesarlos o mostrarlos sin recargar la página. Los datos remotos podían ser una cadena, código JavaScript, XML o una página HTML parcial generada en el servidor. Lo mismo podía hacerse con las etiquetas y , pero muchos desarrolladores se alarmaron ante el concepto de un GIF ejecutable y prefirieron usar el oculto . Esta técnica se usó tanto para Netscape Navigator como para Internet Explorer , los dos navegadores principales en ese momento, hasta que los desarrolladores descubrieron que el objeto de servidor XMLHTTP (MSXML 1.0) estaba incluido en Internet Explorer 4 [ 4 ] . La detección del navegador se usó entonces para implementar el oculto en Netscape o usar el objeto XMLHTTP (MSXML 1.0) en IE 4.<img><embed><iframe><iframe>

En 1996, Internet Explorer introdujo la etiqueta iframe para incrustar una página web dentro de otra, con la página incrustada cargando de forma asíncrona. En 1998, el equipo de Microsoft Outlook Web Access desarrolló el concepto detrás del objeto de script XMLHttpRequest . [ 5 ] Apareció como XMLHTTP en la segunda versión de la biblioteca MSXML , [ 5 ] [ 6 ] que se incluyó con Internet Explorer 5.0 en marzo de 1999. [ 7 ]

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. [ 8 ] Microsoft adoptó el modelo nativo XMLHttpRequest a partir de Internet Explorer 7. La compatibilidad con la versión ActiveX se mantuvo en Internet Explorer y en el "modo Internet Explorer" de Microsoft Edge . La utilidad de estas solicitudes HTTP en segundo plano y tecnologías web asíncronas permaneció bastante desconocida hasta que comenzó a aparecer en aplicaciones en línea a gran escala como Outlook Web Access (2000) [ 9 ] y Oddpost (2002). [ 10 ]

Google implementó ampliamente Ajax compatible con estándares y compatible con múltiples navegadores en Gmail (2004) y Google Maps (2005). [ 11 ] En octubre de 2004, el lanzamiento de la versión beta pública de Kayak.com fue uno de los primeros usos a gran escala en comercio electrónico de lo que sus desarrolladores en ese momento llamaban "la cosa de XML HTTP". [ 12 ] 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 . [ 13 ]

En 2015, se introdujo el estándar Fetch como una alternativa moderna al objeto XMLHttpRequest. [ 14 ]

El último borrador del objeto XMLHttpRequest se publicó el 6 de octubre de 2016, [ 15 ] y la especificación XMLHttpRequest es ahora un estándar vivo . [ 16 ]

Tecnologías

El modelo convencional para una aplicación web frente a una aplicación que utiliza Ajax.

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, se han producido varios avances en las tecnologías utilizadas en una aplicación Ajax, y en la definición del término Ajax en sí. 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. A menudo se utiliza JSON ( JavaScript Object Notation ) como formato alternativo para el intercambio de datos, [ 17 ] aunque también se pueden utilizar otros formatos como HTML preformateado o texto plano. [ 18 ] Varias bibliotecas populares de JavaScript, incluida jQuery , incluyen abstracciones para ayudar en la ejecución de solicitudes Ajax.

XMLHttpRequest ha sido ampliamente compatible con todos los principales navegadores web desde Internet Explorer versión 5, Firefox versión 1.0, Opera versión 7.6 y Safari versión 1.2. [ 19 ]

Buscar

Fetch es un estándar de JavaScript que se creó para suceder a XMLHttpRequest. [ 20 ] Según la documentación de Google Developers, "Fetch facilita la realización de solicitudes web y el manejo de respuestas en comparación con el antiguo XMLHttpRequest". [ 21 ] Fetch se basa en promesas de JavaScript .

La especificación Fetch difiere de XMLHttpRequest en los siguientes aspectos importantes:

  • La promesa devuelta fetch()no se rechazará en caso de error HTTP, incluso si la respuesta es un 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 fallo de 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 la versión 61.0b13).

Ejemplos

Ejemplo de XMLHttpRequest

Un ejemplo de una solicitud Ajax simple utilizando el método GET . El script del lado del cliente está escrito en JavaScript con el objeto XMLHttpRequest, y el script del lado del servidor, que devuelve una respuesta simple en texto plano , está escrito en PHP .

get-ajax-data.js:

// Este es el script del lado del cliente.// Inicializa la solicitud HTTP.let xhr = new XMLHttpRequest ();// Definir 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 ha terminado.const OK = 200 ; // El estado 200 indica un retorno exitoso.si ( xhr . readyState === DONE ) {si ( xhr . status === OK ) {console.log ( xhr.responseText ); // ' Esta es la salida. '} demás {console.log ( ' Error : ' + xhr.status ); // Se produjo un error durante la solicitud.}}};// Envía la solicitud a send-ajax-data.php.xhr.send ( null ) ;​

send-ajax-data.php:

<?php // Este es el script del lado del servidor.// Establecer el tipo de contenido. header ( 'Content-Type: text/plain' );// Devuelve los datos. echo 'Esta es la salida.' ; ?>

Obtener ejemplo

Un ejemplo del mismo script del lado del cliente utilizando la función Fetch en su lugar, con sintaxis Promise al estilo de devolución de llamada:

// Este es el script del lado del cliente.fetch ( 'send-ajax-data.php' ) . then ( res => res.text ( ) ) . then ( data => console.log ( data ) ) . catch ( error => console.log ( ' Error: ' + error ) ) ;

Ejemplo de Async/await

El mismo script utilizando la sintaxis async/await de JavaScript :

// Este es el script del lado del cliente.try { const res = await fetch ( ' send-ajax-data.php' ); const data = await res.text ( ); console.log ( data ) ; } catch ( error ) { console.log ( ' Error : ' + error ) ; }

Véase también

Referencias

  1. 1 2 3 Jesse James Garrett (18 de febrero de 2005). "Ajax: Un nuevo enfoque para las aplicaciones web" . AdaptivePath.com. Archivado del original el 10 de septiembre de 2015. Recuperado el 19 de junio de 2008 .
  2. ↑ "Ajax - Guías para desarrolladores web" . MDN Web Docs . Archivado del original el 28 de febrero de 2018. Consultado el 27 de febrero de 2018 .
  3. 1 2 Ullman, Chris (marzo de 2007). Beginning Ajax . wrox. ISBN 978-0-470-10675-4Archivado del original el 5 de julio de 2008. Consultado el 24 de junio de 2008 .
  4. ↑ "Hoja de ruta de MSXML" . Microsoft Learn . 27 de octubre de 2016. Archivado del original el 6 de diciembre de 2025. Consultado el 8 de junio de 2026 .
  5. 1 2 "Artículo sobre la historia de XMLHTTP por un desarrollador original" . Alexhopmann.com. 31 de enero de 2007. Archivado del original el 23 de junio de 2007. Recuperado el 14 de julio de 2009 .
  6. ↑ "Especificación de la interfaz IXMLHTTPRequest de la Red de Desarrolladores de Microsoft" . Msdn.microsoft.com. Archivado del original el 26 de mayo de 2016. Consultado el 14 de julio de 2009 .
  7. ↑ Dutta, Sunava (23 de enero de 2006). "Objeto XMLHTTPRequest nativo" . IEBlog . Microsoft. Archivado del original el 6 de marzo de 2010. Recuperado el 30 de noviembre de 2006 .
  8. ↑ "HTML y XML dinámicos: El objeto XMLHttpRequest" . Apple Inc. Archivado del original el 9 de mayo de 2008. Consultado el 25 de junio de 2008 .
  9. ↑ Hopmann, Alex. "Historia de XMLHTTP" . Blog de Alex Hopmann . Archivado del original el 30 de marzo de 2010. Consultado el 17 de mayo de 2010 .
  10. ↑ Tynan, Dan (1 de octubre de 2007). "Los 16 mejores momentos de la historia de la web" . Entrepreneur .
  11. ↑ "Una breve historia del Ajax" . Aaron Swartz. 22 de diciembre de 2005. Archivado del original el 3 de junio de 2010. Consultado el 4 de agosto de 2009 .
  12. ↑ English, Paul (12 de abril de 2006). "Interfaz de usuario de Kayak" . Blog técnico oficial de Kayak.com . Archivado del original el 23 de mayo de 2014. Consultado el 22 de mayo de 2014 .
  13. ↑ van Kesteren, Anne; Jackson, Dean (5 de abril de 2006). "El objeto XMLHttpRequest" . W3.org . Consorcio World Wide Web. Archivado del original el 16 de mayo de 2008. Recuperado el 25 de junio de 2008 .
  14. ↑ Asaolu, Elijah (7 de enero de 2025). "La API Fetch finalmente es estable en Node.js" . Blog de LogRocket . Consultado el 16 de julio de 2026 .
  15. ↑ Kesteren, Anne; Aubourg, Julian; Song, Jungkee; Steen, Hallvord RM "XMLHttpRequest Level 1" . W3.org . W3C. Archivado del original el 13 de julio de 2017. Recuperado el 19 de febrero de 2019 .
  16. ↑ "Estándar XMLHttpRequest" . xhr.spec.whatwg.org . Consultado el 21 de abril de 2020 .
  17. ↑ "Notación de objetos JavaScript" . Apache.org. Archivado del original el 16 de junio de 2008. Consultado el 4 de julio de 2008 .
  18. ↑ "Acelera tus aplicaciones basadas en Ajax con JSON" . DevX.com. Archivado del original el 4 de julio de 2008. Consultado el 4 de julio de 2008 .
  19. ↑ "Las 5 principales ventajas y desventajas de AJAX" . POTENZA. 16 de enero de 2022. Archivado del original el 6 de octubre de 2023. Consultado el 6 de octubre de 2023 .
  20. ↑ "Fetch API - Web APIs" . MDN . Archivado del original el 29 de mayo de 2019. Consultado el 30 de mayo de 2019 .
  21. ↑ "Trabajar con la API Fetch" . Google Developers . Archivado del original el 30 de septiembre de 2018. Consultado el 6 de junio de 2025 .

Lecturas adicionales

  • Garrett, Jesse James (18 de febrero de 2005). Ajax: Un nuevo enfoque para las aplicaciones web (PDF) . Recuperado el 28 de junio de 2025 .— Artículo que acuñó el término Ajax y preguntas y respuestas.

Lecturas relacionadas
6 articulos
Desarrollo webDesarrollo webEl desarrollo web es el trabajo involucrado en el desarrollo de un sitio web para Internet ( World Wide Web ) o una intranet (una red privada). [1]...Modelo cliente-servidorDiagrama de red informática de clientes que se comunican con un servidor a través de Internet. El modelo cliente-servidor es un patrón de mensajerí...Aplicación webCaptura de pantalla de 2007 de Horde , una aplicación web de código abierto y de trabajo en grupo Una aplicación web (o web app ) es un software de...Web serverWeb serverA web server is computer software and underlying hardware that accepts requests via HTTP (the network protocol created to distribute web content) o...Intercambio de datosIntercambio de datosEl intercambio de datos es el proceso de tomar datos estructurados bajo un esquema de origen y transformarlos en un esquema de destino , de modo qu...JSONJSONJSON ( JavaScript Object Notation , pronunciado / ˈdʒeɪsən / o / ˈdʒeɪˌsɒn / ) es un formato de archivo estándar abierto y un formato de intercambi...