Una introducción someraDEW – Desarrollo web en cliente
Visión global
3/36¿Qué es AJAX?   Asynchronous Javascript And XML     ●        Presentación basada en HTML + CSS     ●         Datos en...
4/36Cómo funciona: un vistazo   Desde el navegador escribimos código JS que obtiene datos del    servidor según los neces...
Crono: inicioHTMLCSSJavascript: funciones y eventosManejo de timers en JavaScript
6/36cronómetro v1: Descripción   file:///home/moi/workspace2/stopwatch/v1.html   Utilizar CSS para definir los estilos  ...
7/36Timers   INICIAR     ●         timer: variable global al script     ●         tick_handler: función que se ejecutará ...
8/36cronómetro v2: Sistema de puntuaciónfile:///home/moi/workspace2/stopwatch/v2.html   Incluir una caja de texto para es...
Crono: autenticaciónListas asociativas PHPAJAX open/send
10/36Cómo funciona: un vistazo
11/36El objeto XMLHttpRequest   Ejemplo simple1 funcionando aquí   Todos los navegadores modernos soportan el objeto    ...
12/36El objeto XMLHttpRequest
13/36Cliente: Código (1)
14/36Cliente: código (2)
15/36Cliente: Enviar una petición al servidor   Utilizamos los métodos open y send del objeto XMLHttpRequest   El tercer...
16/36Cliente: Enviar una petición al servidor (2)   Si en el método send enviamos parámetros, deberemos especificar    su...
17/36Servidor: código
18/36Cliente: recepción de respuesta
19/36Cliente: recepción de la respuesta (2)   onreadystatechange     ●        Este evento se dispara cada vez que se prod...
20/36Cliente: recepción de la respuesta (3)   Comprobar status == 200     ●       Cuando llega la respuesta, es convenien...
21/36Ver ejemplo simple1   Abrir ficheros y probar ejecución
22/36Cronómetro V3: validación PHP, sin AJAX   Mostrar funcionamiento aquí   Leer enunciado de la práctica
23/36Cronómetro V4: validación con AJAX   Mostrar funcionamiento aquí   Leer enunciado de la práctica
Fundamentos2 técnicas de programación JSDOM
25/36Observa y comenta   ¿Funciona?   ¿Cómo se puede mejorar?   ¿Qué problemas presenta?   ¿Cómo se llama esta técnica...
26/36Observa y comenta   ¿Funciona?   ¿Qué hace?   ¿Cómo se llama esta técnica?   ¿Quién invoca a esta función para in...
27/36DOM: ¿Qué es?   Document Object Model   Estándar consolidado y aceptado internacionalmente W3C   Se trata de la AP...
28/36DOM: Recorrer elementos de un formulario
29/36Cronómetro v5: formulario de nuevo Jugador –validaciones   Mostrar práctica 5 funcionando aquí   Leer enunciado prá...
Variables de sesiónsession_startsession_destroy$_SESSION[“mi_variable”]
31/36Sesión y variables de sesión   Una sesión es...     ●        ...información de cada usuario almacenada y gestionada ...
32/36session_start, session_destroy   session_start de PHP se utiliza para...      ●        ...crear una sesión de usuari...
33/36Almacenar una variable de sesión   $_SESSION[“mi_variable”] = 7   A partir de este momento, la variable $_SESSION[“...
34/36Unir todas las piezas   Pensemos en la práctica de la validación de usuarios   Al insertar una pareja usuario/clave...
AJAX síncronoXMLHttpRequest.open
36/36Async=false   Si modificamos el tercer parámetro del método open y lo establecemos a    false, indicamos que la comu...
Upcoming SlideShare
Loading in …5
×

Ajax: introducción

1,563 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,563
On SlideShare
0
From Embeds
0
Number of Embeds
848
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax: introducción

  1. 1. Una introducción someraDEW – Desarrollo web en cliente
  2. 2. Visión global
  3. 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. 4/36Có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. 5. Crono: inicioHTMLCSSJavascript: funciones y eventosManejo de timers en JavaScript
  6. 6. 6/36cronó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. 7/36Timers 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. 8/36cronómetro v2: Sistema de puntuaciónfile:///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. 9. Crono: autenticaciónListas asociativas PHPAJAX open/send
  10. 10. 10/36Cómo funciona: un vistazo
  11. 11. 11/36El 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. 12/36El objeto XMLHttpRequest
  13. 13. 13/36Cliente: Código (1)
  14. 14. 14/36Cliente: código (2)
  15. 15. 15/36Cliente: 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. 16/36Cliente: 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. 17/36Servidor: código
  18. 18. 18/36Cliente: recepción de respuesta
  19. 19. 19/36Cliente: 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. 20/36Cliente: 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. 21/36Ver ejemplo simple1 Abrir ficheros y probar ejecución
  22. 22. 22/36Cronómetro V3: validación PHP, sin AJAX Mostrar funcionamiento aquí Leer enunciado de la práctica
  23. 23. 23/36Cronómetro V4: validación con AJAX Mostrar funcionamiento aquí Leer enunciado de la práctica
  24. 24. Fundamentos2 técnicas de programación JSDOM
  25. 25. 25/36Observa 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. 26/36Observa 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. 27/36DOM: ¿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. 28/36DOM: Recorrer elementos de un formulario
  29. 29. 29/36Cronómetro v5: formulario de nuevo Jugador –validaciones Mostrar práctica 5 funcionando aquí Leer enunciado práctica 5
  30. 30. Variables de sesiónsession_startsession_destroy$_SESSION[“mi_variable”]
  31. 31. 31/36Sesió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. 32/36session_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. 33/36Almacenar 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. 34/36Unir 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. 35. AJAX síncronoXMLHttpRequest.open
  36. 36. 36/36Async=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;

×