RA7 de Desarrollo Web en Entorno Cliente · DAW

Desarrolla aplicaciones Web dinámicas, reconociendo y aplicando mecanismos de comunicación asíncrona entre cliente y servidor.

Comprobar mi dominio con José →

Resumen Ejercicios Examen Flashcards

Contenido verificado asociado a este RA

Fundamentos de la Comunicación Asíncrona en la Web

Esta unidad introduce la comunicación asíncrona cliente-servidor, evaluando sus ventajas e inconvenientes y analizando los mecanismos principales para su implementación, sentando las bases para el desarrollo de aplicaciones web dinámicas y reactivas.

Implementación de Comunicación Asíncrona con XMLHttpRequest y Fetch API

Esta unidad detalla el uso de los objetos XMLHttpRequest y la Fetch API, identificando sus propiedades y métodos clave para establecer y gestionar la comunicación asíncrona, incluyendo el manejo de respuestas y errores.

Actualización Dinámica del DOM y Formatos de Intercambio de Información

Esta unidad se centra en cómo integrar los datos recibidos asíncronamente para actualizar el documento Web y en la gestión de diferentes formatos de información como JSON, XML y texto plano, tanto en el envío como en la recepción.

Compatibilidad entre Navegadores y Uso de Librerías para Asincronía

Esta unidad aborda la programación de aplicaciones asíncronas compatibles con diferentes navegadores y la clasificación, análisis y uso de librerías que simplifican y estandarizan la incorporación de estas tecnologías, incluyendo la creación y depuración de programas que las utilizan.

Conceptos clave

Comunicación asíncronaXMLHttpRequest (XHR)Fetch APIExperiencia de Usuario (UX)HTTPAJAXXMLHttpRequestPromesasObjeto ResponseEstados HTTPManejadores de eventosManipulación del DOMJSONXMLTexto PlanoFormDataSerializaciónParseo

Errores que conviene evitar

No gestionar el feedback al usuario: Causa: Olvidar indicar que una operación está en curso o ha fallado. Corrección: Mostrar un spinner de carga, mensajes de éxito/error, o deshabilitar botones durante la solicitud.
Bloquear la interfaz de usuario: Causa: Realizar operaciones síncronas o mal gestionar las asíncronas. Corrección: Asegurarse de que todas las operaciones de red se ejecuten de forma asíncrona y que el código no bloquee el hilo principal del navegador.
Olvidar `return response.json()` en Fetch: Causa: La segunda `.then()` recibe el objeto `Response` en lugar de los datos parseados. Corrección: Asegurarse de que el primer `.then()` devuelva el resultado de `response.json()` (o `text()`, etc.).
No manejar errores en `catch`: Causa: Las solicitudes fallidas no son capturadas, llevando a un comportamiento inesperado o a una mala UX. Corrección: Siempre incluir un bloque `.catch()` en `fetch` y manejar los errores de red o de servidor.
Inyección de HTML (XSS): Causa: Usar `innerHTML` con datos no sanitizados recibidos del servidor. Corrección: Siempre sanitizar los datos antes de insertarlos con `innerHTML`, o preferiblemente, usar `textContent` cuando solo se necesite texto, o librerías de templating seguras.
No especificar `Content-Type` en el envío: Causa: El servidor no puede interpretar correctamente el cuerpo de la solicitud. Corrección: Para JSON, establecer `headers: {'Content-Type': 'application/json'}` en Fetch o `xhr.setRequestHeader()` en XHR. Para `FormData`, el navegador lo gestiona automáticamente.
Dependencia excesiva de polyfills sin entender sus limitaciones: Causa: Usar polyfills sin considerar el tamaño del bundle o el rendimiento en navegadores muy antiguos. Corrección: Evaluar el público objetivo y el impacto del polyfill; a veces es mejor ofrecer una experiencia degradada o no soportar navegadores muy obsoletos.
No usar interceptores en librerías: Causa: Duplicar lógica (ej. añadir tokens de autenticación) en cada petición. Corrección: Aprovechar los interceptores de Axios o Angular HttpClient para centralizar la lógica de cabeceras, manejo de errores globales o logging.

Qué se evalúa en este RA

CE a

Se han evaluado las ventajas e inconvenientes de utilizar mecanismos de comunicación asíncrona entre cliente y servidor Web.

CE b

Se han analizado los mecanismos disponibles para el establecimiento de la comunicación asíncrona.

CE c

Se han utilizado los objetos relacionados.

CE d

Se han identificado sus propiedades y sus métodos.

CE e

Se ha utilizado comunicación asíncrona en la actualización dinámica del documento Web.

CE f

Se han utilizado distintos formatos en el envío y recepción de información.

CE g

Se han programado aplicaciones Web asíncronas de forma que funcionen en diferentes navegadores.

CE h

Se han clasificado y analizado librerías que faciliten la incorporación de las tecnologías de actualización dinámica a la programación de páginas Web.

CE i

Se han creado y depurado programas que utilicen estas librerías.