Ajax (también AJAX / eɪ dʒ æ k s / ; abreviatura de "Asynchronous JavaScript y XML ") [1] [2] es un conjunto de desarrollo web técnicas que usan muchas tecnologías web en el lado del cliente para crear asíncronos aplicaciones web . Con Ajax, las aplicaciones web pueden enviar y recuperar datos de un servidorde 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 de forma dinámica sin la necesidad de recargar toda la página. [3] En la práctica, las implementaciones modernas comúnmente utilizan JSON en lugar de XML.
Apareció por primera vez | Marzo de 1999 |
---|---|
Extensiones de nombre de archivo | .js |
Formatos de archivo | JavaScript |
Influenciado por | |
JavaScript y XML |
Ajax no es una tecnología única, sino un grupo de tecnologías. HTML y CSS se pueden utilizar en combinación para marcar y aplicar estilo a la información. Luego, la página web puede ser modificada por JavaScript para mostrar dinámicamente, y permitir que el usuario interactúe con, la nueva información. El objeto XMLHttpRequest incorporado , o desde 2017 la nueva función de búsqueda dentro de JavaScript, se usa comúnmente 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 nueva tecnología, o un lenguaje diferente, solo tecnologías existentes utilizadas de nuevas formas.
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 que se cargara una página nueva desde el servidor. Este proceso fue ineficiente, como lo refleja la experiencia del usuario: todo el contenido de la página desapareció, luego apareció la nueva página. Cada vez que el navegador recargaba una página debido a un cambio parcial, todo el contenido tenía que ser reenviado, aunque solo una parte de la información había cambiado. Esto colocó 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 , puede cargar o recuperar contenido de forma asincrónica. En 1998, el equipo de Microsoft Outlook Web Access desarrolló el concepto detrás del objeto de scripting 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 , Safari , Opera y otros navegadores como el objeto XMLHttpRequest JavaScript . [7] Microsoft adoptó el modelo nativo XMLHttpRequest a partir de Internet Explorer 7 . La versión ActiveX sigue siendo 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).
Google realizó una amplia implementación de Ajax de navegador cruzado compatible con los estándares con Gmail (2004) y Google Maps (2005). [9] 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". [10] 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 World Wide Web Consortium (W3C) publicó el primer borrador de la especificación para el objeto XMLHttpRequest en un intento de crear un estándar web oficial . [11] El último borrador del objeto XMLHttpRequest se publicó el 6 de octubre de 2016, [12] y la especificación XMLHttpRequest es ahora un estándar de vida . [13]
Tecnologias
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:
- HTML (o XHTML ) y CSS para presentación
- El modelo de objetos de documento (DOM) para la visualización dinámica y la interacción con los datos
- JSON o XML para el intercambio de datos y XSLT para la manipulación de XML
- El objeto XMLHttpRequest para comunicación asincrónica
- JavaScript para unir estas 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. La notación de objetos JavaScript (JSON) se utiliza a menudo como formato alternativo para el intercambio de datos, [14] aunque también se pueden utilizar otros formatos como HTML preformateado o texto plano. [15] Una variedad de bibliotecas de JavaScript populares, incluida JQuery, incluyen abstracciones para ayudar en la ejecución de solicitudes Ajax.
Inconvenientes
- Cualquier usuario cuyo navegador no admita JavaScript o XMLHttpRequest, o que tenga esta funcionalidad deshabilitada, no podrá utilizar correctamente las páginas que dependen de Ajax. La única forma de permitir que el usuario lleve a cabo la funcionalidad es recurrir a métodos que no sean JavaScript. Esto se puede lograr asegurándose de que los enlaces y formularios se puedan resolver correctamente y no depender únicamente de Ajax. [dieciséis]
- De manera similar, algunas aplicaciones web que usan Ajax están construidas de una manera que no pueden ser leídas por tecnologías de lectura de pantalla, como JAWS . Los estándares WAI-ARIA proporcionan una forma de proporcionar pistas en tal caso. [17]
- Es posible que los lectores de pantalla que pueden usar Ajax aún no puedan leer correctamente el contenido generado dinámicamente. [18]
- La política del mismo origen evita que algunas técnicas Ajax se utilicen en todos los dominios, [11] aunque el W3C tiene un borrador del objeto XMLHttpRequest que habilitaría esta funcionalidad. [19] Existen métodos para eludir esta característica de seguridad mediante el uso de un canal especial de comunicaciones de dominio cruzado integrado como un iframe dentro de una página, [20] o mediante el uso de JSONP .
- Ajax está diseñado para comunicaciones unidireccionales con el servidor. Si se necesitan comunicaciones bidireccionales (es decir, para que el cliente escuche eventos / cambios en el servidor), WebSockets puede ser una mejor opción. [21]
- En los navegadores anteriores a HTML5 , las páginas creadas dinámicamente mediante sucesivas solicitudes de Ajax no se registraban automáticamente con el motor de historial del navegador, por lo que es posible que hacer clic en el botón "Atrás" del navegador no haya devuelto el navegador a un estado anterior de la página habilitada para Ajax, pero en su lugar, puede haber regresado a la última página completa visitada antes. Tal comportamiento, navegar entre páginas en lugar de navegar entre estados de página, puede ser deseable, pero si se requiere un seguimiento detallado del estado de la página, entonces una solución previa a HTML5 fue usar iframes invisibles para activar cambios en el historial del navegador. Una solución alternativa implementada por las técnicas Ajax es cambiar el identificador del fragmento de URL (la parte de una URL después del "#") cuando se accede a una página habilitada para Ajax y monitorear los cambios. [22] [23] HTML5 proporciona un estándar API extenso para trabajar con el motor de historial del navegador. [24]
- Las actualizaciones dinámicas de la página web también dificultan la creación de marcadores y el regreso a un estado particular de la aplicación. Existen soluciones a este problema, muchas de las cuales utilizan nuevamente el identificador de fragmento de URL. [22] [23] Por otro lado, como las páginas con uso intensivo de AJAX tienden a funcionar como aplicaciones en lugar de contenido, marcar estados provisionales rara vez tiene sentido. Sin embargo, la solución proporcionada por HTML5 para el problema anterior también se aplica a esto. [24]
- Dependiendo de la naturaleza de la aplicación Ajax, las actualizaciones dinámicas de la página pueden interrumpir las interacciones del usuario, particularmente si la conexión a Internet es lenta o poco confiable. Por ejemplo, editar un campo de búsqueda puede desencadenar una consulta al servidor para completar la búsqueda, pero es posible que el usuario no sepa que se acerca una ventana emergente de finalización de búsqueda, y si la conexión a Internet es lenta, la lista emergente puede aparecer en un momento inconveniente. , cuando el usuario ya ha procedido a hacer otra cosa.
- Excluyendo a Google , [25] la mayoría de los rastreadores web principales no ejecutan código JavaScript, [26] por lo que para ser indexada por los motores de búsqueda web , una aplicación web debe proporcionar un medio alternativo de acceder al contenido que normalmente se recuperaría con Ajax. Se ha sugerido que se puede utilizar un navegador sin cabeza para indexar el contenido proporcionado por los sitios web habilitados para Ajax, aunque Google ya no recomienda la propuesta de rastreo de Ajax que hicieron en 2009 [27].
Ejemplos de
Ejemplo de JavaScript
Un ejemplo de una solicitud Ajax simple usando el método GET , escrito en JavaScript .
get-ajax-data.js:
// Este es el script del lado del cliente.// Inicializa la solicitud HTTP. var xhr = new XMLHttpRequest (); xhr . open ( 'OBTENER' , 'enviar-ajax-data.php' );// Seguimiento de los cambios de estado de la solicitud. xhr . onreadystatechange = function () { var HECHO = 4 ; // readyState 4 significa que la solicitud está hecha. var OK = 200 ; // el estado 200 es un retorno exitoso. if ( xhr . readyState === HECHO ) { if ( xhr . status === OK ) { consola . log ( xhr . responseText ); // 'Esta es la salida'. } else { consola . log ( 'Error:' + estado xhr . ); // Ocurrió 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' );// Devuelve los datos. echo "Esta es la salida". ; ?>
A muchos desarrolladores no les gustó la sintaxis utilizada en el objeto XMLHttpRequest , por lo que algunos de ellos aplicaron soluciones que ya no son necesarias desde Fetch.
Obtener ejemplo
Fetch es una nueva API nativa de JavaScript. [28] 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".
fetch ( 'enviar-ajax-data.php' ) . luego ( datos => consola . log ( datos )) . catch ( error => console . log ( 'Error:' + error ));
Ejemplo de ES7 async / await:
función asíncrona doAjax () { try { const res = await fetch ( 'enviar-ajax-data.php' ); datos constantes = aguardar res . texto (); consola . log ( datos ); } captura ( error ) { consola . log ( 'Error:' + error ); } } doAjax ();
Como se vio anteriormente, fetch se basa en las promesas de JavaScript .
La fetch
especificación difiere de Ajax
las siguientes formas significativas:
- La Promesa devuelta
fetch()
no se rechazará en 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 laok
propiedad 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 establezca la opción de inicio de credenciales . (Desde abril de 2018. La especificación cambió la política de credenciales predeterminada asame-origin
. Firefox cambió desde 61.0b13).
Ver también
- ActionScript
- Comet (programación) (también conocido como Reverse Ajax)
- Google Instant
- HTTP / 2
- Lista de marcos Ajax
- Node.js
- Secuencias de comandos remotas
- Aplicación de Internet enriquecida
- WebSocket
- HTML5
- JavaScript
Referencias
- ↑ a b c 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 .
- ^ "Ajax - Guías para desarrolladores web" . Documentos web de MDN . Archivado desde el original el 28 de febrero de 2018 . Consultado el 27 de febrero de 2018 .
- ^ a b Ullman, Chris (marzo de 2007). A partir de Ajax . wrox. ISBN 978-0-470-10675-4. Archivado desde el original el 5 de julio de 2008 . Consultado el 24 de junio de 2008 .
- ^ a b "Artículo sobre la historia de XMLHTTP 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 .
- ^ "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 .
- ^ 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 .
- ^ "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 .
- ^ 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 .
- ^ "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 .
- ^ 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 .
- ^ a b van Kesteren, Anne; Jackson, Dean (5 de abril de 2006). "El objeto XMLHttpRequest" . W3.org . Consorcio Mundial de la red. Archivado desde el original el 16 de mayo de 2008 . Consultado el 25 de junio de 2008 .
- ^ Kesteren, Anne; Aubourg, Julian; Song, Jungkee; Steen, Hallvord RM "XMLHttpRequest Level 1" . W3.org . W3C. Archivado desde el original, el 13 de julio 2017 . Consultado el 19 de febrero de 2019 .
- ^ "Estándar XMLHttpRequest" . xhr.spec.whatwg.org . Consultado el 21 de abril de 2020 .
- ^ "Notación de objetos JavaScript" . Apache.org. Archivado desde el original el 16 de junio de 2008 . Consultado el 4 de julio de 2008 .
- ^ "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 .
- ^ Quinsey, Peter. "Ajax a prueba de usuarios" . Archivado desde el original el 19 de febrero de 2010 . Consultado el 8 de enero de 2009 .
- ^ "Descripción general de WAI-ARIA" . W3C. Archivado desde el original el 26 de octubre de 2010 . Consultado el 21 de octubre de 2010 .
- ^ Edwards, James (5 de mayo de 2006). "Ajax y lectores de pantalla: ¿Cuándo puede funcionar?" . sitepoint.com . Archivado desde el original el 6 de marzo de 2011 . Consultado el 27 de junio de 2008 .
- ^ "Control de acceso para solicitudes entre sitios" . Consorcio Mundial de la red. Archivado desde el original el 14 de mayo de 2008 . Consultado el 27 de junio de 2008 .
- ^ "Comunicación segura entre dominios en el navegador" . The Architecture Journal (MSDN). Archivado desde el original el 29 de marzo de 2010 . Consultado el 27 de abril de 2010 .
- ^ Pimentel, Victoria; Nickerson, Bradford G. (8 de mayo de 2012). "Comunicación y visualización de datos en tiempo real con WebSocket". Computación por Internet IEEE . 16 (4): 45–53. doi : 10.1109 / MIC.2012.64 .
- ^ a b "¿Por qué usar Ajax?" . InterAKT. 10 de noviembre de 2005. Archivado desde el original el 29 de mayo de 2008 . Consultado el 26 de junio de 2008 .
- ^ a b "Enlace profundo para AJAX" . Archivado desde el original el 23 de julio de 2011 . Consultado el 21 de abril de 2010 .
- ^ a b "Especificación HTML5" . Archivado desde el original el 19 de octubre de 2011 . Consultado el 21 de octubre de 2011 .
- ^ Hendriks, Erik (23 de mayo de 2014). "Noticias oficiales sobre rastreo e indexación de sitios para el índice de Google" . Google . Archivado desde el original el 25 de mayo de 2015 . Consultado el 24 de mayo de 2015 .
- ^ Prokoph, Andreas (8 de mayo de 2007). "Ayude a los rastreadores web a rastrear eficazmente los sitios de su portal y los sitios web" . IBM . Archivado desde el original el 19 de febrero de 2010 . Consultado el 22 de abril de 2009 .
- ^ "Desaprovechando nuestro esquema de rastreo AJAX" . Blog central para webmasters de Google. 14 de octubre de 2015. Archivado desde el original el 17 de octubre de 2015 . Consultado el 15 de octubre de 2015 .
- ^ "Obtener API - API web" . MDN . Archivado desde el original el 29 de mayo de 2019 . Consultado el 30 de mayo de 2019 .
enlaces externos
- Ajax: un nuevo enfoque para las aplicaciones web : artículo que acuñó el término Ajax y preguntas y respuestas
- Ajax (programación) en Curlie
- Tutorial de Ajax con ejemplos de GET, POST, texto y XML.