AJAX

La versión actual de la página aún no ha sido revisada por colaboradores experimentados y puede diferir significativamente de la versión revisada el 6 de julio de 2021; las comprobaciones requieren 20 ediciones .
Ajax
clase de idioma Aplicación web , HTML , JavaScript , DHTML , modelo de objeto de documento , XMLHttpRequest , JSON , XML , XSLT , XHTML , hojas de estilo en cascada
Apareció en 2005
Autor James Garrett
 Archivos multimedia en Wikimedia Commons

AJAX , Ajax ( ˈeɪdʒæks , del inglés  Asynchronous Javascript and XML  - "asynchronous JavaScript and XML ") es un enfoque para construir interfaces de usuario interactivas para aplicaciones web , que consiste en el intercambio de datos "en segundo plano" entre el navegador y el servidor web . Como resultado, cuando se actualizan los datos, la página web no se recarga por completo y las aplicaciones web se vuelven más rápidas y convenientes. En ruso, a veces se pronuncia transliterado como "Ajax". La abreviatura AJAX no tiene un análogo bien establecido en cirílico.

Historia

El término AJAX fue utilizado públicamente por primera vez el 18 de febrero de 2005 por Jesse James Garrett en su artículo "A New Approach to Web Applications" [1]  - así denominó al nuevo conjunto de tecnologías que ofrecía al cliente .

Sin embargo, de una forma u otra, muchas tecnologías han estado disponibles y se han utilizado mucho antes, como en el enfoque "Remote Scripting" propuesto por Microsoft en 1998 , o utilizando el elemento HTML IFRAME, que apareció en Internet Explorer 3 en 1996 .

AJAX se hizo especialmente popular después de que Google lo usara en los servicios de Gmail , Google Maps y Google Suggest . .

Tecnología

AJAX no es una tecnología independiente, sino el concepto de usar varias tecnologías relacionadas. AJAX se basa en dos principios fundamentales:

Las acciones de la interfaz se convierten en operaciones con elementos DOM ( Document Object Model ) ,  con la ayuda de los cuales se procesan los datos disponibles para el usuario, como resultado de lo cual cambia su presentación. También procesa los movimientos y clics del mouse, así como las pulsaciones de teclas. Las hojas de estilo en cascada , o CSS ( Hojas de estilo en cascada ), brindan una apariencia uniforme a los elementos de la aplicación y facilitan el acceso a los objetos DOM. El objeto XMLHttpRequest (o mecanismos similares) se utiliza para comunicarse de forma asincrónica con el servidor, procesar las solicitudes de los usuarios y cargar los datos necesarios a medida que se ejecuta.  

Tres de estas cuatro tecnologías (CSS, DOM y JavaScript  ) forman DHTML ( Dynamic HTML ) .  Según algunos autores [4] , las herramientas DHTML que aparecieron en 1997 eran muy prometedoras, pero no estuvieron a la altura.

El formato de transferencia de datos puede ser fragmentos de texto sin formato, código HTML , JSON o XML .

Comparación del enfoque estándar y AJAX

En el modelo de aplicación web clásico:

  1. El usuario ingresa a una página web y hace clic en algunos de sus elementos;
  2. El navegador forma y envía una solicitud al servidor ;
  3. En respuesta, el servidor genera una página web completamente nueva y la envía al navegador, etc., después de lo cual el navegador vuelve a cargar completamente toda la página.

Al usar AJAX:

  1. El usuario ingresa a una página web y hace clic en algunos de sus elementos;
  2. El script (en JavaScript ) determina qué información se necesita para actualizar la página;
  3. El navegador envía una solicitud apropiada al servidor ;
  4. El servidor devuelve solo la parte del documento por la que se solicitó;
  5. El script realiza cambios en función de la información recibida (sin recargar la página completa).

Beneficios

Ahorro de tráfico, reducción de la carga en el servidor Cuando se implementa correctamente, AJAX le permite reducir la carga en el servidor varias veces. En particular, todas las páginas del sitio se generan con mayor frecuencia de acuerdo con una plantilla, incluidos los elementos sin cambios ("encabezado", "barra de navegación", "pie de página", etc.), cuya generación requiere acceso a diferentes archivos, el tiempo para procesar scripts (ya veces consultas a la base de datos); todo esto se puede omitir si reemplazamos la carga completa de la página con la generación y transmisión de solo el contenido. Capacidad de respuesta de la interfaz de usuario más rápida Dado que la carga de la parte cambiada es mucho más rápida, el usuario ve el resultado de sus acciones más rápido y sin parpadeo de página (que ocurre durante una recarga completa). Oportunidades para el procesamiento interactivo Por ejemplo, cuando ingresa una consulta de búsqueda en Google, se muestra una información sobre herramientas con posibles opciones de consulta. En muchos sitios, al registrarse, el usuario ingresa un nombre e inmediatamente ve si este nombre está disponible o no. AJAX es útil para programar chats , paneles de administración y otras herramientas que muestran datos que cambian con el tiempo. Los medios no se detendrán La página no se recarga, el reproductor sigue funcionando. Esta es la razón por la que AJAX es valioso en el alojamiento de audio y video. Entonces, YouTube para 2021 le permite reproducir videos en modo de imagen en imagen .

Desventajas

Falta de integración con las herramientas estándar del navegador La URL no cambia, por lo tanto, el botón Atrás no funciona, es imposible guardar el marcador. El problema se puede resolver con éxito con History.pushState [5] . El contenido cargado dinámicamente no está disponible para los motores de búsqueda (si no verifica si la solicitud es regular o XMLHttpRequest ) Los motores de búsqueda no pueden ejecutar JavaScript , por lo que los desarrolladores deben buscar formas alternativas de acceder al contenido del sitio.[ especificar ] . Los viejos métodos de contabilización de las estadísticas del sitio se vuelven irrelevantes Muchos servicios de estadísticas realizan un seguimiento de las vistas de nuevas páginas en el sitio. Para los sitios cuyas páginas usan AJAX de forma extensiva, esta estadística ya no es relevante. Complejidad del proyecto La lógica del procesamiento de datos se redistribuye: hay una selección y transferencia parcial al lado del cliente de los procesos de formateo de datos primarios. Esto complica el control de la integridad de formatos y tipos. El efecto final de la tecnología puede verse contrarrestado por un aumento irrazonable en el costo de codificación y gestión de proyectos, así como por el riesgo de reducir la disponibilidad del servicio para los usuarios finales. Requiere JavaScript habilitado en el navegador Puede estar deshabilitado por razones de seguridad. Además, las páginas AJAX son de difícil acceso para navegadores, robots y archivos web que no estén completos . Problemas al mostrar codificaciones no estándar en algunos scripts ajax Los problemas de AJAX y cirílico son objeto de muchas discusiones en Internet [6] . Velocidad lenta en programación aproximada A pesar de que AJAX se diseñó originalmente específicamente para aumentar la velocidad, puede jugar una broma cruel: cuando hay muchas solicitudes de AJAX en una página y, por ejemplo, se carga una lista con cada clic, la página de AJAX se vuelve aún más lenta. que uno tradicional. Mal comportamiento en conexiones no confiables Si la comunicación se pierde con frecuencia (debido a la pérdida del operador o la congestión del enlace), al menos se puede volver a cargar la página normal. Una página AJAX (por ejemplo, con desplazamiento "infinito") el usuario tiene que volver a cargar desde el principio y buscar donde lo dejó. El trabajo paralelo, una característica de AJAX, tiene un efecto negativo aquí, dividiendo un canal ya estrecho en muchas conexiones pequeñas, y es probable que algunas de ellas se rompan. El problema está parcialmente resuelto por la API de historial. Riesgo de fabricación de solicitudes por parte de otros sitios El resultado de una solicitud AJAX puede ser código JavaScript (en particular, JSON ). XMLHttpRequest solo es válido dentro del mismo dominio y la etiqueta <script> no lo es. Si tú escribes < tipo de secuencia de comandos = "texto/javascript" src = "http://example.org/inbox.php" ></ secuencia de comandos > luego, la bandeja de entrada del usuario que está autorizado en esta computadora en esta computadora se insertará en el HTMLexample.org . Para protección, se utiliza una solicitud POST . Pero GET se considera idempotente y, por lo tanto, se almacena en caché, POST no, por lo que Google inserta un bucle infinito al comienzo de la respuesta : AJAX puede hacer cualquier cosa con la respuesta, incluida la eliminación del bucle, y la etiqueta <script>conecta el script tal como está y los bucles.

Tecnologías alternativas

En orden cronológico :

Flash de adobe

La pila de tecnología Flash (anteriormente Macromedia Flash) en forma de ActionScript 3, Adobe Flex y Flash Remoting forma la base tecnológica de RIA (Rich Internet Applications), promovida activamente por Macromedia (adquirida por Adobe ). La tecnología flash es adecuada para una variedad de aplicaciones, desde juegos de computadora hasta interfaces de aplicaciones comerciales complejas. En el marco de esta tecnología, se implementan potentes herramientas de soporte de gráficos que no están disponibles en las herramientas básicas de Ajax (aunque se implementan un número creciente de funciones dentro del estándar HTML5 y CSS3).

Notas

  1. ↑ Jesse James Garret. Ajax: un nuevo enfoque para las aplicaciones web . Adaptive Path (18 de febrero de 2005). Consultado el 1 de marzo de 2021. Archivado desde el original el 12 de febrero de 2021.
  2. ↑ Script remoto con IFRAME Archivado el 26 de junio de 2014 en Wayback Machine . 
  3. ↑ JsHttpRequest (enlace descendente) . Fecha de acceso: 24 de diciembre de 2006. Archivado desde el original el 21 de octubre de 2007. 
  4. ↑ David Crane. Ajax en acción . - Williams, 2008. - 640 p. — ISBN 9785845910349 . Archivado el 12 de diciembre de 2017 en Wayback Machine .
  5. ↑ API de historial/estado . Consultado el 15 de octubre de 2012. Archivado desde el original el 19 de octubre de 2011.
  6. ↑ AJAX y letras rusas: problema de codificación. (enlace no disponible) . Consultado el 15 de agosto de 2016. Archivado desde el original el 25 de agosto de 2016. 

Literatura

  • Brett McLaughin. Aprendizaje Ajax = Head Rush Ajax. - San Petersburgo. : Pedro , 2007. - ISBN 978-5-91180-322-3 .
  • Esteban Holzner. Biblia del programador Ajax = Biblia Ajax. - M .: Dialéctica , 2009. - S. 553. - ISBN 978-5-8459-1502-3 .
  • Dave Crane, Bear Bibo, Jordan Sonneveld. Ajax en la práctica = Ajax en la práctica. - M .: Williams , 2007. - ISBN 978-5-8459-1327-2 .
  • Daniel Woolston. Ajax y la plataforma .NET 2.0 para profesionales = Pro Ajax y la plataforma .NET 2.0. - M .: Williams , 2007. - S. 464. - ISBN 1-59059-670-6 .
  • Dave Crane, Eric Pascarello, Darren James. AJAX en acción: tecnología - JavaScript asíncrono y XML = Ajax en acción. - M .: Williams , 2006. - S. 640. - ISBN 1-932394-61-3 .

Enlaces