Este documento proporciona una introducción a AJAX y cómo funciona. Explica que AJAX permite actualizar partes de una página web sin recargar la página completa utilizando objetos XMLHttpRequest en segundo plano para intercambiar datos con el servidor en formato XML o texto. También describe cómo se crea y usa el objeto XMLHttpRequest para realizar peticiones asíncronas al servidor y procesar las respuestas.

1. Una introducción somera
DEW – Desarrollo web en cliente

2. Visión global

3. 3/36
¿Qué es AJAX?
 Asynchronous Javascript And XML
●
Presentación basada en HTML + CSS
●
Datos en formato XML
●
Detrás del escenario, objetos asíncronos XMLHTTPRequest en el
propio navegador para el manejo de datos
●
Javascript para hacer que todo funcione
 Realmente AJAX NO es un nuevo lenguaje, ni un nuevo producto
 Simplemente es una nueva forma de utilizar herramientas que ya existen
en el mercado
 AJAX permite intercambiar datos con el servidor y actualizar “trozos” de
una página web sin tener que recargar toda la página

4. 4/36
Cómo funciona: un vistazo
 Desde el navegador escribimos código JS que obtiene datos del
servidor según los necesite
 Cuando necesita más datos del servidor, detrás del telón JS utiliza
el objeto XMLHTTPRequest para lanzar una petición
 NO se produce un refresco de página
 Mientras llegan los datos, JS NO detiene su ejecución, sino que
está a la espera en segundo plano
 Cuando por fin llegan los datos, JS retoma esa acción
 De ahí que se llame asíncrono
 Los datos que vienen del servidor pueden ser XML o simplemente
texto plano

5. Crono: inicio
HTML
CSS
Javascript: funciones y eventos
Manejo de timers en JavaScript

6. 6/36
cronómetro v1: Descripción
 file:///home/moi/workspace2/stopwatch/v1.html
 Utilizar CSS para definir los estilos
●
color de fondo
●
tipo de letra
●
bordes
●
tamaño de los marcos
●
...
 Definir un timer que se ejecute cada décima de segundo
 Handlers de eventos
●
stop_handler
●
reset_handler
●
start_handler
●
tick_handler
 IMPEDIR que se pueda iniciar el timer si ya está iniciado

7. 7/36
Timers
 INICIAR
●
timer: variable global al script
●
tick_handler: función que se ejecutará cada vez que se alcance el
tiempo especificado
●
100: tiempo en milisegundos que queremos que se ejecute el timer
 DETENER
●
timer: variable global sobre la que iniciamos

8. 8/36
cronómetro v2: Sistema de puntuación
file:///home/moi/workspace2/stopwatch/v2.html
 Incluir una caja de texto para establecer la velocidad del timer
●
Sólo se puede modificar la velocidad cuando el timer está detenido
 Incluir un panel para llevar la puntuación <x/y>
●
x es el número de aciertos
●
y es el número de paradas del timer
 Un acierto ocurre cuando detenemos el cronómetro cuando hay 0 puntitos (.)
 Cada vez que detenemos el timer, se incrementa el número de intentos
 Si el timer está parado, y pulso Stop, NO contabilizar un nuevo intento (ni un nuevo
acierto, si ya de por sí estuviera parado en 0 puntitos (.)

9. Crono: autenticación
Listas asociativas PHP
AJAX open/send

10. 10/36
Cómo funciona: un vistazo

11. 11/36
El objeto XMLHttpRequest
 Ejemplo simple1 funcionando aquí
 Todos los navegadores modernos soportan el objeto
XMLHttpRequest
 Se utiliza para intercambiar datos en segundo plano con un servidor
 Creación de un objeto XMLHttpRequest:
●
variable = new XMLHttpRequest()
 En versiones antiguas de IE:
●
variable = new ActiveXObject(“Microsoft.XMLHTTP”);
 En nuestra página, deberemos comprobar el navegador para crear el
objeto XMLHttpRequest de acuerdo a éste

12. 12/36
El objeto XMLHttpRequest

13. 13/36
Cliente: Código (1)

14. 14/36
Cliente: código (2)

15. 15/36
Cliente: Enviar una petición al servidor
 Utilizamos los métodos open y send del objeto XMLHttpRequest
 El tercer parámetro de open...
●
true, la llamada es asíncrona
●
false, la llamada es síncrona
 send: recibe como parámetro los pares clave/valor que queremos
enviar en el POST

16. 16/36
Cliente: Enviar una petición al servidor (2)
 Si en el método send enviamos parámetros, deberemos especificar
su formato
 Para ello, especificaremos la cabecera Content-Type de HTTP
utilizando el método setRequestHeader del objeto XMLHttpRequest

17. 17/36
Servidor: código

18. 18/36
Cliente: recepción de respuesta

19. 19/36
Cliente: recepción de la respuesta (2)
 onreadystatechange
●
Este evento se dispara cada vez que se produzca un cambio en el
objeto XMLHttpRequest
●
La propiedad readyState contiene el estado actual
 readyState: Posibles valores
●
0: estado inicial del objeto
●
1: El método open se ha ejecutado sin problemas
●
2: Se ha enviado la solicitud al servidor
●
3: Se han recibido las cabeceras HTTP de la respuesta. NO ha llegado
el cuerpo
●
4: La transferencia de datos ha finalizado. Se puede procesar ya la
respuesta del servidor

20. 20/36
Cliente: recepción de la respuesta (3)
 Comprobar status == 200
●
Cuando llega la respuesta, es conveniente comprobar el valor de la
propiedad status
●
200. Todo bien, solicitud procesada correctamente
●
401. NO hay autorización para acceder al recurso
●
404. NO se encuentra el recurso (Normalmente URL errónea)
●
500. Error interno del servidor
 En caso de error, en statusText tenemos el detalle del error
responseText
Recuperamos la respuesta
como texto plano

21. 21/36
Ver ejemplo simple1
 Abrir ficheros y probar ejecución

22. 22/36
Cronómetro V3: validación PHP, sin AJAX
 Mostrar funcionamiento aquí
 Leer enunciado de la práctica

23. 23/36
Cronómetro V4: validación con AJAX
 Mostrar funcionamiento aquí
 Leer enunciado de la práctica

24. Fundamentos
2 técnicas de programación JS
DOM

25. 25/36
Observa y comenta
 ¿Funciona?
 ¿Cómo se puede mejorar?
 ¿Qué problemas presenta?
 ¿Cómo se llama esta técnica de
programación?
 Respuestas
●
Sí
●
Colocando el código JS
envuelto en una función
●
Se mezcla código HTML con JS.
Difícil mantenimiento
● Función embebida

26. 26/36
Observa y comenta
 ¿Funciona?
 ¿Qué hace?
 ¿Cómo se llama esta técnica?
 ¿Quién invoca a esta función para inicializar todo?
 Respuestas
●
Sí
Sin paréntesis
●
Enlaza el evento onclick al elemento llamado titulo
● Enlace dinámico de eventos
●
En el elemento body, asociamos al evento onload la función inicializa

27. 27/36
DOM: ¿Qué es?
 Document Object Model
 Estándar consolidado y aceptado internacionalmente W3C
 Se trata de la API para operar sobre la interfaz HTML

28. 28/36
DOM: Recorrer elementos de un formulario

29. 29/36
Cronómetro v5: formulario de nuevo Jugador –
validaciones
 Mostrar práctica 5 funcionando aquí
 Leer enunciado práctica 5

30. Variables de sesión
session_start
session_destroy
$_SESSION[“mi_variable”]

31. 31/36
Sesión y variables de sesión
 Una sesión es...
●
...información de cada usuario almacenada y gestionada por el servidor
 La sesión comienza...
●
...en el momento en el que el usuario se conecta al servidor
 La sesión finaliza...
●
...tras x minutos de inactividad
●
...si la finalizacimos explícitamente
 Las variables de sesión...
●
...almacenan información de cualquier tipo por usuario
●
Hasta el momento hemos visto que el tiempo de vida de una variable es la
página

32. 32/36
session_start, session_destroy
 session_start de PHP se utiliza para...
●
...crear una sesión de usuario y/o...
●
...si la sesión ya ha sido creada previamente, la continua
●
Debemos invocar a este método siempre que vayamos a
manejar la sesión de un usuario antes de manipularla
 session_destroy de PHP se utiliza para...
●
...eliminar todas las variables de sesión de un usuario
●
...es una forma explícita de finalizar su sesión

33. 33/36
Almacenar una variable de sesión
 $_SESSION[“mi_variable”] = 7
 A partir de este momento, la variable $_SESSION[“mi_variable”] es
visible desde cualquier página de mi servidor que visite el usuario
 Es una especie de variable Súper Global
 IMPORTANTE: no olvides session_start()
●
Tanto para leer como para escribir variables de sesión
debemos previamente haber invocado al método
session_start()

34. 34/36
Unir todas las piezas
 Pensemos en la práctica de la validación de usuarios
 Al insertar una pareja usuario/clave correcta, podríamos crear una
variable de sesión $_SESSION[“usuario”] = $usuario
 En la página del juego, comprobar si $_SESSION[“usuario”] es
vacío (isset), en cuyo caso el usuario NO se ha validado
 De ser así, redirigirlo a la pantalla de login
 En la pantalla de login, eliminar $_SESSION[“usuario”], de modo
que indicamos que NO se ha validado
 Dotar al juego de un botón de Salir, que elimine las variables de
sesión

35. AJAX síncrono
XMLHttpRequest.open

36. 36/36
Async=false
 Si modificamos el tercer parámetro del método open y lo establecemos a
false, indicamos que la comunicación va a ser síncrona
●
xmlhttp.open("GET","mi_pagina.php",false);
 El uso del modo asíncrono NO SE RECOMIENDA
 La ejecución se detendrá tras el método SEND
 El cliente quedará a la espera de la respuesta del servidor
 NO hay que escribir una función onreadystatechange
 Simplemente hay que escribir el código justo a continuación del send
●
xmlhttp.open("GET","mi_pagina.php",false);
●
xmlhttp.send();
●
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;