Ajax
Descargar como PPT, PDF0 recomendaciones282 vistas
AJAX es una técnica para crear aplicaciones web más dinámicas mediante el uso combinado de varias tecnologías como XHTML, CSS, DOM, XML, XSLT, XMLHttpRequest y JavaScript. Esto permite actualizar partes de una página web de forma asíncrona sin recargar la página completa, mejorando la interactividad y velocidad de las aplicaciones web. AJAX es compatible con la mayoría de los navegadores modernos y se usa comúnmente para validación de formularios, autocompletado, actualización de datos y interfaces gráficas avanzadas
Ajax
- 2. ¿Qué es AJAX? Acrónimo de Asynchronous JavaScript And XML Definición No es ninguna tecnología, ni lenguaje de programación. Es una técnica de desarrollo web que combina varias Tecnologías. Consiguiendo una navegación más ágil y rápida, más dinámica. Historia •Desarrollo de Microsoft de Remote Scripting (hace 10 años) •IFrame (Microsoft Internet Explorer 3, 1996) Carga asíncrona de páginas Layers (Netscape 4, 1997) Layers (Netscape 4, 1997) •Microsoft's Remote Scripting (o MSRS, 1998) Empleo de Applet Java Internet Explorer 4 y Netscape 4 Outlook Web Access •Definición del término AJAX(Febrero 2005) Jesse James Garrett: “A New Approach to Web Applications”
- 3. Tecnologías empleadas •XHTML (o HTML) y CSS Presentación de datos •Document Object Model (DOM) Mostrar e interactuar dinámicamente con la información •XML y XSLT Intercambiar y manipular datos con el servidor web •XMLHttpRequest Recuperación y envío de datos de modo asíncrono •JavaScript Nexo de unión Accesibilidad Los desarrolladores necesitan proporcionar opciones para usuarios en otras plataformas o navegadores que no utilicen AJAX
- 4. Web •Actualmente la mayoría de las actividades del usuario se desarrollan en la web (Correo, Chats, compartir información…)
- 5. Tipo de Respuesta • Documento XML • Texto • • • Procesado en el cliente Mostrado directamente JavaScript • • Evaluado en JavaScript mediante ‘eval()’ JSON, “JavaScript Object Notation”: Es un formato ligero para el intercambio de datos Es un subconjunto de la notación literal de objetos de Javascript pero no requiere el uso de Javascript
- 6. Funcionamiento de AJAX 1. Usuario provoca un evento 2. Se crea y configura un objeto XMLHttpRequest 3. El objeto XMLHttpRequest realiza una llamada al servidor 4. La petición se procesa en el servidor 5. El servidor retorna un documento XML que contienen el resultado 6. El objeto XMLHttpRequest llama a la función callback() y procesa el resultado 7. Se actualiza el DOM de la página asociado con la petición con el resultado devuelto
- 7. Navegadores soportados •Microsoft Internet Explorer 5.0 •Navegadores basados en Gecko (versión 7.1): Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon y Netscape •Navegadores con API KHTML (versión 3.2): Konqueror 3.2, Safari 1.2 •Opera 8.0 Navegadores disponibles para de teléfonos móviles: •Opera Mobile Browser versión 8.0 •Navegador para S60 de Nokia basado en Safari y API KHTML
- 8. Ventajas •Mayor interactividad Recuperación asíncrona de datos, reduciendo el tiempo de espera del usuario •Facilidad de manejo del usuario El usuario tiene un mayor conocimiento de las aplicaciones de escritorio •Se reduce el tamaño de la información intercambiada •Portabilidad entre plataformas No requieren instalación de plugins, applets de Java, ni ningún otro elemento •Código público
- 9. Inconvenientes y Críticas •Usabilidad: Comportamiento del usuario ante la navegación •Botón de volver atrás del navegador - Empleo de iframe ocultos para almacenar el historial) - Empleo de fragmento identificador del URL (‘#’) y recuperación mediante JavaScript •Problema al agregar marcadores/favoritos en un momento determinado de la aplicación - Empleo del fragmento identificador del URL (‘#’) y recuperación mediante JavaScript •Problemas al imprimir páginas renderizadas dinámicamente •Tiempos de respuesta entre la petición del usuario y la respuesta del servidor •Empleo de feedback visual para indicar el estado de la petición al usuario. •JavaScript •Requiere que los usuarios tengan el JavaScript activado en el navegador •En el caso de Internet Explorer 6 y anteriores, que necesita tener activado el ActiveX (En Internet Explorer 7, se implementa como JavaScript nativo) •Como en DHTML, debe comprobarse la compatibilidad entre navegadores y plataformas
- 10. USOS DE AJAX • Validación de datos de formularios en tiempo real Identificadores de usuario, nº de serie, códigos postales u otro código especial que necesite validación en el lado del servidor antes de ser enviado el formulario. • Autocompletado Direcciones de correo, nombres, ciudades • Operaciones de detalle Obtener información más detallada de un producto • GUI avanzadas Controles en árbol, menús, barras de progreso • • • • • Refresco de datos Notificaciones del servidorActualizar o eliminar registros Expandir formularios web Devolver peticiones simples de búsqueda Editar árboles de categorías