4. Programacion Asíncrona con AJAX

En este tema comenzaremos a añadir más componentes a nuestra aplicación web. Aprenderás a:

  1. Conocer el concepto de programación asíncrona

  2. Conocer la técnica de programación AJAX

  3. Desarrollar aplicaciones web usando AJAX

Requisitos

Necesitas conocer cómo realizar páginas dinámicas sencillas con JS (Páginas Dinámicas con JS).

4.1. Qué es AJAX

  1. Es una técnica de desarrollo web, no un lenguaje. AJAX significa:

    1. Asyncronous. El cliente hace peticiones asíncronas (no espera respuesta inmediata) …

    2. Javascript. Usando JS y el DOM para gestiona la petición …

    3. And. … y …

    4. XML. … la respuesta HTTP devuelve texto estructurado en HTML / XML o texto en crudo (text/plain) o organizado en JSON/YAML/CSV o similar

  2. AJAX agrupa diferentes tecnologías en una arquitectura de tres capas ( HTML / JS / XML) para crear aplicaciones web completas

  3. Historia: buscaba resolver la ejecución remota de scripts sin tener que usar formularios continamente.

  4. Funcionamiento Básico

  5. Algunos Inconvenientes

    1. Usabilidad y Accesibilidad

    2. Rendimiento

    3. Seguridad

    4. Complejidad (actual)

Actividad T04-A01. Entender los conceptos previos

  1. ¿Qué significa AJAX?

  2. ¿Cual sería la letra donde estarían los datos a leer?

  3. ¿Cual sería la leta donde está la programación?

  4. ¿Cual es la diferencia entre un proceso síncrono y uno asíncrono?

  5. ¿Qué proceso es más rápido?

  6. ¿Podría usar AJAX para leer un archivo csv con un listado de estudiantes?

  7. ¿Cual sería el tipo MIME de un archivo JSON?

  8. ¿Cual sería el tipo MIME de un archivo XML?

  9. ¿Puede estar el script en un servidor que no esté en mi red local?

  10. ¿Puedo obtener, vía AJAX, los titulares de la página del Marca?

4.2. Primeros pasos con AJAX

  1. Veamos un ejemplo concreto (js_ajax_intro)

    1. Necesitamos una página HTML con un texto para cambiar

    2. Creamos una función que descargará un texto de un URI

    3. Añadimos esa función como manejo del evento que nos interese

  2. ¿Cómo es el funcionamiento?

    1. Ocurre un evento

    2. Se crea un objeto XMLHttpRequest (que tiene una serie de propiedades y métodos)

    3. Se hace una petición HTTP (método open) y se envía (método send)

    4. El servidor web procesa esa petición

    5. El servidor devuelve el recurso en una respuesta HTTP

    6. La respuesta se lee en JS (se actualiza el objeto XHR en la propiedad responseText)

    7. Cuando se termina de cargar el objeto XRH (propiedad onload), se ejecuta la acción correspondiente (por ejemplo cambiar el texto de un elemento al valor descargado)

      https://www.w3schools.com/js/pic_ajax.gif

Actividad T04-A02. Aplicación con AJAX

Crear una aplicación web como el ejemplo donde se cambie el texto de un elemento cuando pulsas un botón (necesitas un URL que devuelva un texto sencillo)

4.3. El Objeto XMLHttpRequest (XHR)

  1. Es la clave de la técnica AJAX (XMLHttpRequest)

    1. Es muy completo

    2. Describe propiedades y métodos para gestionar la petición

    3. El mismo objeto incluye la petición y la respuesta HTTP

    4. Es muy (muy) usado, aunque en la actualidad se busca usar la API Fetch del navegador

  2. Su uso es siempre igual:

    1. Creas el objeto

    2. Defines la función que se llamará cuando termine de cargar la página (evento onload). Sería el concepto de callback

    3. Defines la conexión a un URL (puedes establecer diferentes propiedades)

    4. Envías la solicitud (y te devuelve la respuesta)

  3. Puedes obtener diferente información:

    1. estado del objeto (readyState)

    2. código estado respuesta HTTP (state)

    3. añadir cabeceras HTTP concretas (setRequestHeader)

    4. y mucho más (XMLHttpRequest)

  4. La respuesta (js_ajax_http_response) puede ser texto, XML o hasta un array de bytes

  5. La petición es asíncrona (hasta que esté disponible no devuelve la respuesta), y si hay demasiadas peticiones asíncronas puede ser un lío la gestión.

Actividad T04-A03. Aplicación con AJAX

Añade al ejercicio de la sesión anterior la siguiente información (no sólo cambiar el texto, sino añadir más información):

  1. El código de estado HTTP devuelto

  2. Algunas de las cabeceras HTTP (p.ej Date, Host y Content-Type)

4.4. AJAX con CSV

  1. Una de las grandes ventajas de la técnica AJAX es que la capa de datos se puede desarrollar de diferentes maneras:

    1. Con texto en crudo (text/plain), sin mayor organización ni estructura

    2. Con texto organizado de alguna manera, por ejemplo con archivos CSV o JSON

    3. Con texto estructurado con marcas y organizado jerárquicamente de forma rigurosa (XML o HTML5)

  2. Como la petición del objeto XMLHTTP es independiente de que sea XML o no, en cualquier caso tendrás un texto para gestionar:

    1. Como una cadena de texto tal cual

    2. Como un objeto JS (al serializar la cadena de texto como objeto JSON)

    3. Como un documento XML para gestionar con la interfaz DOM del navegador (texto estructurado con marcas). HTML también sería un caso particular de archivo XML.

  3. Esto le da una gran flexibilidad y permite usar diferentes almacenes de datos en la misma aplicación (o diferentes)

  4. Los archivos con valores separados por comas (CSV):

    1. organizan la información como si fuera una tabla (diseño lógico plano)

    2. cada fila es un registro con los valores

    3. en campos separados por comas (u otro caracter separador)

    4. y cada valor está delimitado por comillas dobles (u otro delimitador)

  5. Los archivos CSV son muy sencillos de usar pero no te olvides de gestionar la integridad y consistencia de los datos (no es un SGBD)

  6. Usar CSV con técnica AJAX:

    1. la respuesta es una cadena de texto (responseText)

    2. tendrás que separar cada fila y los campos (con funciones de cadenas de texto).

    3. Generas el HTML según como te interese

Actividad T04-A04. Uso de AJAX con archivos CSV

Crea una página web que, al pulsar un botón, lea los datos de un archivo csv cualquiera (puedes usar por ejemplo addresses.csv de este listado de archivos CSV de ejemplo )

4.5. AJAX con JSON

  1. La gran ventaja de JSON es que es una cadena de texto (js_json_intro) que usa la sintaxis de objetos de Javascript (js_json_syntax ).

  2. El uso con AJAX es muy sencillo porque:

    1. Recibes un texto (el texto del archivo JSON)

    2. Lo analizas (js_json_parse) y …

    3. … ya tienes la estructura de datos disponible (js_json_objects)

  3. Los valores pueden ser de diferentes tipos (js_json_datatypes) y siempre en claves string

  4. El funcionamiento con arrays es similar (pero mejor enfocarse en el uso de JSON que es estándar entre lenguajes)

  5. Para serializar un objeto JS, es decir, convertir en string el objeto, se usa js_json_stringify

Actividad T04-A05. Uso de AJAX con JSON

Crea una página web con una tabla HTML que lea los datos de un archivo json cualquiera (puedes usar por ejemplo el objeto widget de este listado de archivos JSON de ejemplo )

4.6. AJAX con XML

Seguimos el ejemplo js_ajax_xmlfile

  1. Tienes un archivo XML como almacén de datos de referencia

  2. Realizas una petición para descargar el documento XML (debe estar tu dominio, por ejemplo localhost)

  3. Como tienes un objeto XML (Document) lo puedes leer vía DOM:

    1. Buscas los elementos que te interesan (Document/getElementsByTagName)

    2. Coges los valores del nodo (elemento) concreto (Node/nodeValue)

    3. Construyes el HTML

    4. Modificas el DOM de tu página (por ejemplo vía la propiedad innerHTML de un elemento)

  4. En la mayor parte de los casos es mejor usar JSON que XML (js_json_xml), salvo que :

    1. Necesites un control fuerte de tipos y estructura

    2. La estructura de datos jerárquica sea muy compleja

Actividad T04-A06. AJAX con XML

Haz el ejercicio del tutorial o, mejor, personalízalo con un XML que hayas creado. Puedes usar un listado de archivos XML de ejemplo

4.7. AJAX con PHP (por ejemplo)

  1. Seguimos el ejemplo js_ajax_php

    1. La única diferencia es que no descarga un archivo sino que …

    2. … lee la respuesta que le da el servidor

  2. El script php no tiene porqué devolver HTML, lo ideal es hacerlo con texto plano

  3. La función se (puede) ejecutar de forma repetida al activarse según el evento correspondiente

  4. El funcionamiento es el siguiente:

    1. El usuario presiona una tecla y al soltarla (event_onkeyup) …

    2. … se activa la función (showHint) … que …

    3. … comprueba si no hay nada o …

    4. … construye el URL y genera el objeto XMLHttp que …

    5. … cuando termina (event_onload) …

    6. … devuelve un texto (responseText) y …

    7. … se modifica el elemento con id txtHint

Actividad T04-A07. AJAX con XML

Haz el ejercicio del tutorial (O lo puedes personalizar para un caso sencillo que se te ocurra).

¿Un ejemplo? Pues un formulario que autocomplete las provincias gallegas a medida que el usuario va escribiendo.

4.8. Ventajas e Inconvenientes

  1. El uso de AJAX permite:

    1. una gran interactividad

    2. una aplicación integrada

    3. equilibrar el rendimiento de la aplicación entre cliente y servidor

  2. Pero tiene algunos inconvenientes:

    1. Puede comprometer la usabilidad de la página

    2. Manipula el comportamiento natural de la navegación web (no guarda historial, no funciona botón atrás, etc)

    3. Es difícil de archivar (contenido muy dinámico)

    4. El usuario muchas veces no sabe qué está pasando (no hay retroalimentación del estado)

  3. Recuerda que puedes usar las Herramientas de de Desarrollo (XHR object): Red / Fetch/XHR

  4. Documento Completo Resumen (Universidad Murcia, Rafael Barzanallana ): Apuntes sobre Ajax (PDF)

Actividad T04-A08. Ejercicio Final

¿Podrías hacer una aplicación web que revise el calendario del mundial de Qatar ?

Lo que me gustaría es:

  1. Seleccionar un equipo y que me diga qué día y a qué hora juega

  2. Seleccionar un partido y que me diga el resultado

  3. Seleccionar un día y que me diga qué partidos hay