AJAX

AJAX (Asynchronous JavaScript And XML) es una tecnología que permite una comunicación asíncrona entre el lado del cliente y el del servidor. Esto permite que la experiencia del usuario sea más satisfactoria reduciendo tiempos de espera.

Consultas AJAX

Para entender en qué consiste una consulta AJAX, vamos a basarnos en los apuntes de MDN.

La imagen muestra el modelo asíncrono propuesto por AJAX.

Por ejemplo, para ver la utilidad que aporta el que AJAX sea asíncrono, podemos utilizar el siguiente script PHP:

<?php usleep(5000000); echo "Escrito desde el servidor"; ?<

Este script se demora 5 en el envío del texto "Escrito desde el servidor". Esta situación puede darse en un entorno real cuando el servidor del que se espera una respuesta tiene un cierto nivel de carga. Un diseño síncrono de la aplicación, requerirá que la respuesta termine para que la página siga con su operación normal. La asincronía, en cambio, permite que la página siga operando normalmente mientras se espera la respuesta del servidor.

Vamos a escribir una página que tenga dos botones:

  • El primer botón (llamémoslo botón 1) añade el texto Botón 1 pulsado en el cuerpo de la página.
  • El segundo botón (lamémoslo botón AJAX) hace una petición AJAX a la página PHP anterior, de forma que se añade el texto devuelto por el servidor en el cuerpo de la página.

Debemos poder observar que ocurre lo siguiente:

  1. Hacemos clic en el "botón AJAX"
  2. Hacemos clic en el "botón 1"
  3. Se añade inmediatamente el texto "Botón 1 pulsado" al cuerpo de la página
  4. Unos segundos después, el texto "Escrito desde el servidor" se añade al cuerpo de la página

XML como motor de persistencia

En toda aplicación necesitamos un motor de persistencia que nos permita crear, leer, actualizar y borrar (operaciones cuyas siglas son CRUD -Create/Read/Update/Delete) datos de manera permanente.

XML, como ya sabemos, es una forma de almacenar información en documentos, así como todo un conjunto de tecnologías orientadas a garantizar cosas como la correcta estructura del documento, o su transformación en otros documentos. ¿Por qué no usar entonces archivos XML como motor de persistencia?

Para este apartado, hay varios enlaces de referencia que nos pueden ilustrar bastante:

Con las referencias ofrecidas, ya podemos plantear un ejercicio con algo de diversión.

Actividad 1. Crea una página con un formulario que te permita introducir la siguiente información:

  • Nombre de la tarea
  • Coste de la tarea
  • Descripción

Al enviar el contenido del formulario al servidor, éste lo almacena en un documento XML, manteniendo la información anterior (si hubiera alguna).

La página también tendrá una sección (debajo del formulario) donde se pueden ver las tareas definidas hasta el momento. La página obtendrá la información mediante una petición AJAX al abrir la página, aunque tendrá asociado un botón con el texto Actualizar tareas que actualizará las tareas

Entrega la actividad en un archivo llamado Act1-ajax.zip que incluya el documento html, el php y el xml

Validación de XML

¿Cómo comprobar que el documento XML que estamos usando es del tipo que nos interesa?¿Cómo validar su estructura? Esto es algo que ya hemos visto anteriormente en la asignatura. Por ejemplo, mediante un DTD o un esquema. Los siguientes enlaces pueden sernos útiles para esta finalidad:

Organizar el código

El código para el manejo de los archivos XML puede estar todo mezclado en una suerte de "espaguetis a la boloñesa", o bien organizado aprovechando las ventajas modulares de un lenguaje como PHP. Por ejemplo, observa cómo podemos hacernos la vida más fácil creándonos una especie de DAO (DataBase Access Object) como el que aparece en http://diego.com.es/tutorial-de-dom-en-php

AJAX y JSON

JSON (JavaScript Object Notation) es una sintaxis que permite representar objetos JavaScript de una manera muy cercana a un inicializador. JSON tiene ventajas y desventajas sobre XML, y depende de cada persona, preferirá uno u otro. Los siguientes enlaces nos van a venir bien para entender como usar JSON para la transferencia de información entre el cliente y el servidor:

¿Qué motor de persistencia usamos con JSON?

Existen diferentes alternativas. Podemos plantearnos usar base de datos documentales (como MongoDB o Redis) que permiten almacenar los documentos JSON más o menos directamente, o bien bases de datos relacionales como MySQL. En nuestro caso vamos usar ésta última.

Vamos a necesitar saber algunas cosas:

Combinar AJAX, PHP, JSON y MySQL

Con lo visto hasta ahora, ya estamos en disposición de combinar todas estas tecnologías para un fin común:

  • Los datos son enviados en formato JSON desde el cliente hacia el servidor mediante un petición AJAX
  • El servidor obtiene el documento JSON enviado desde el cliente, lo parsea a un array asociativo, del que extrae la información necesaria. Después, hace la consulta precisa en la base de datos con los datos extraídos.
  • El resultado (en caso de ser necesario) se puede almacenar en un array asociativo que será serializado a formato JSON, y enviado al cliente.

Actividad 2. Repite el ejercicio 1, pero en este caso utilizando JSON en lugar de XML y MySQL como motor de persistencia en lugar de XML.

Entrega la actividad en un archivo llamado Act2.zip que incluya lo siguiente:

  • Un script llamado scrum.sql que cree la base de datos "Scrum", así como la tabla "tarea" con los campos necesarios.
  • El archivo html
  • El archivo php

Además, deberás hacer una demostración en vivo del funcionamiento del ejercicio.