Lab 22: AJAX

Descripción

En esta actividad haremos una introducción a las tecnologías AJAX.

Modalidad

Individual.

Objetivos de aprendizaje
  • Comprender qué es AJAX y su mecánica básica de operación
  • Desarrollar aplicaciones que incorporen tecnologías AJAX
Instrucciones
  • Revisa junto con tu profesor la presentación Introducción a AJAX.
  • Primero, debemos preparar al servidor para que en lugar de enviar una página HTML completa, envíe únicamente una parte de la página, texto, o datos. El ejemplo que realizaremos será con datos estructurados en formato JSON, que es lo ideal para que nuestro servidor pueda atender distintos tipos de clientes. Para poder manipular fácilmente las peticiones que llegan en formato JSON, es necesario registrar el middleware para manejar JSON que incluye bodyParser: 
    app.use(bodyParser.json());
    Y para enviar las respuestas en formato JSON, en nuestro controlador tenemos que cambiar la respuesta por:
    response.status(200).json({message: "Respuesta asíncrona"});
  • Para poder hacer una petición asíncrona desde el javascript de nuestro cliente, debemos identificar el evento que detonará la petición asíncrona. En el caso de los botones, debemos asegurarnos que NO sean del tipo submit, y también debemos de eliminar los tags form para evitar que se dispare una petición asíncrona.
    Un ejemplo de código js asíncrono en nuestro cliente, es el siguiente: 
    const accion_asincrona = () => {
    const mensaje = document.getElementById('mensaje').value;
    //El token de protección CSRF
    const csrf = document.getElementById('_csrf').value;

    //función que manda la petición asíncrona
    fetch('/ruta/asincrona', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'csrf-token': csrf
        }
        body: JSON.stringify(data)
    }).then(result => {
        return result.json(); //Regresa otra promesa
    }).then(data => {
        //Modificamos el DOM de nuestra página de acuerdo a los datos de la segunda promesa
        //...
    }).catch(err => {
        console.log(err);
    });
};

document.getElementById('mi_boton').click = accion_asincrona;
  • Para alguno de tus laboratorios anteriores o tu proyecto (o si lo prefieres empieza con una nueva aplicación), integra al menos 1 componentes AJAX. Recuerda que el componente debe comunicarse con el servidor y debe actualizar alguna parte del sitio de manera asíncrona.
    • Indica en alguna parte del sitio cuáles fueron los componentes AJAX que utilizaste.
    • Utiliza una arquitectura MVC.
    • El componente debe tener coherencia y cierto nivel de complejidad.
    • Recuerda que tu aplicación debe ser agradable para el usuario, y que las preguntas deben contestarse en alguna página dentro de tu sitio.
Preguntas a responder
  • ¿Qué importancia tiene AJAX en el desarrollo de RIA's (Rich Internet Applications?
  • ¿Qué implicaciones de seguridad tiene AJAX? ¿Dónde se deben hacer las validaciones de seguridad, del lado del cliente o del lado del servidor?
  • ¿Qué es JSON?
Especificaciones de entrega

A través de tu repositorio personal (Bitbucket o GitHub).