1. Una introduccin someraDEW Desarrollo web en cliente

2. Visin global 3. 3/36Qu es AJAX? Asynchronous Javascript And XML Presentacin basada en HTML + CSS Datos en formato XML Detrs del escenario, objetos asncronos 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 existenen el mercado AJAX permite intercambiar datos con el servidor y actualizar trozos deuna pgina web sin tener que recargar toda la pgina 4. 4/36Cmo funciona: un vistazo Desde el navegador escribimos cdigo JS que obtiene datos delservidor segn los necesite Cuando necesita ms datos del servidor, detrs del teln JS utilizael objeto XMLHTTPRequest para lanzar una peticin NO se produce un refresco de pgina Mientras llegan los datos, JS NO detiene su ejecucin, sino queest a la espera en segundo plano Cuando por fin llegan los datos, JS retoma esa accin De ah que se llame asncrono Los datos que vienen del servidor pueden ser XML o simplementetexto plano 5. Crono: inicioHTMLCSSJavascript: funciones y eventosManejo de timers en JavaScript 6. 6/36cronmetro v1: Descripcin file:///home/moi/workspace2/stopwatch/v1.html Utilizar CSS para definir los estiloscolor de fondotipo de letrabordestamao de los marcos... Definir un timer que se ejecute cada dcima de segundo Handlers de eventosstop_handlerreset_handlerstart_handlertick_handler IMPEDIR que se pueda iniciar el timer si ya est iniciado 7. 7/36Timers INICIAR timer: variable global al script tick_handler: funcin 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/36cronmetro v2: Sistema de puntuacinfile:///home/moi/workspace2/stopwatch/v2.html Incluir una caja de texto para establecer la velocidad del timer Slo se puede modificar la velocidad cuando el timer est detenido Incluir un panel para llevar la puntuacin x es el nmero de aciertosy es el nmero de paradas del timer Un acierto ocurre cuando detenemos el cronmetro cuando hay 0 puntitos (.) Cada vez que detenemos el timer, se incrementa el nmero de intentos Si el timer est parado, y pulso Stop, NO contabilizar un nuevo intento (ni un nuevoacierto, si ya de por s estuviera parado en 0 puntitos (.) 9. Crono: autenticacinListas asociativas PHPAJAX open/send 10. 10/36Cmo funciona: un vistazo 11. 11/36El objeto XMLHttpRequest Ejemplo simple1 funcionando aqu Todos los navegadores modernos soportan el objetoXMLHttpRequest Se utiliza para intercambiar datos en segundo plano con un servidor Creacin de un objeto XMLHttpRequest: variable = new XMLHttpRequest() En versiones antiguas de IE: variable = new ActiveXObject(Microsoft.XMLHTTP); En nuestra pgina, deberemos comprobar el navegador para crear elobjeto XMLHttpRequest de acuerdo a ste 12. 12/36El objeto XMLHttpRequest 13. 13/36Cliente: Cdigo (1) 14. 14/36Cliente: cdigo (2) 15. 15/36Cliente: Enviar una peticin al servidor Utilizamos los mtodos open y send del objeto XMLHttpRequest El tercer parmetro de open... true, la llamada es asncrona false, la llamada es sncrona send: recibe como parmetro los pares clave/valor que queremosenviar en el POST 16. 16/36Cliente: Enviar una peticin al servidor (2) Si en el mtodo send enviamos parmetros, deberemos especificarsu formato Para ello, especificaremos la cabecera Content-Type de HTTPutilizando el mtodo setRequestHeader del objeto XMLHttpRequest 17. 17/36Servidor: cdigo 18. 18/36Cliente: recepcin de respuesta 19. 19/36Cliente: recepcin de la respuesta (2) onreadystatechange Este evento se dispara cada vez que se produzca un cambio en elobjeto XMLHttpRequestLa propiedad readyState contiene el estado actual readyState: Posibles valores0: estado inicial del objeto1: El mtodo open se ha ejecutado sin problemas2: Se ha enviado la solicitud al servidor3: Se han recibido las cabeceras HTTP de la respuesta. NO ha llegadoel cuerpo4: La transferencia de datos ha finalizado. Se puede procesar ya larespuesta del servidor 20. 20/36Cliente: recepcin de la respuesta (3) Comprobar status == 200 Cuando llega la respuesta, es conveniente comprobar el valor de la propiedad status200. Todo bien, solicitud procesada correctamente401. NO hay autorizacin para acceder al recurso404. NO se encuentra el recurso (Normalmente URL errnea)500. Error interno del servidor En caso de error, en statusText tenemos el detalle del error responseTextRecuperamos la respuestacomo texto plano 21. 21/36Ver ejemplo simple1 Abrir ficheros y probar ejecucin 22. 22/36Cronmetro V3: validacin PHP, sin AJAX Mostrar funcionamiento aqu Leer enunciado de la prctica 23. 23/36Cronmetro V4: validacin con AJAX Mostrar funcionamiento aqu Leer enunciado de la prctica 24. Fundamentos2 tcnicas de programacin JSDOM 25. 25/36Observa y comenta Funciona? Cmo se puede mejorar? Qu problemas presenta? Cmo se llama esta tcnica deprogramacin? Respuestas S Colocando el cdigo JS envuelto en una funcin Se mezcla cdigo HTML con JS. Difcil mantenimiento Funcin embebida 26. 26/36Observa y comenta Funciona? Qu hace? Cmo se llama esta tcnica? Quin invoca a esta funcin para inicializar todo? Respuestas S Sin parntesis Enlaza el evento onclick al elemento llamado titulo Enlace dinmico de eventos En el elemento body, asociamos al evento onload la funcin inicializa 27. 27/36DOM: Qu es? Document Object Model Estndar consolidado y aceptado internacionalmente W3C Se trata de la API para operar sobre la interfaz HTML 28. 28/36DOM: Recorrer elementos de un formulario 29. 29/36Cronmetro v5: formulario de nuevo Jugador validaciones Mostrar prctica 5 funcionando aqu Leer enunciado prctica 5 30. Variables de sesinsession_startsession_destroy$_SESSION[mi_variable] 31. 31/36Sesin y variables de sesin Una sesin es... ...informacin de cada usuario almacenada y gestionada por el servidor La sesin comienza......en el momento en el que el usuario se conecta al servidor La sesin finaliza......tras x minutos de inactividad...si la finalizacimos explcitamente Las variables de sesin......almacenan informacin de cualquier tipo por usuarioHasta el momento hemos visto que el tiempo de vida de una variable es lapgina 32. 32/36session_start, session_destroy session_start de PHP se utiliza para......crear una sesin de usuario y/o......si la sesin ya ha sido creada previamente, la continuaDebemos invocar a este mtodo siempre que vayamos amanejar la sesin de un usuario antes de manipularla session_destroy de PHP se utiliza para......eliminar todas las variables de sesin de un usuario...es una forma explcita de finalizar su sesin 33. 33/36Almacenar una variable de sesin $_SESSION[mi_variable] = 7 A partir de este momento, la variable $_SESSION[mi_variable] esvisible desde cualquier pgina de mi servidor que visite el usuario Es una especie de variable Sper Global IMPORTANTE: no olvides session_start()Tanto para leer como para escribir variables de sesindebemos previamente haber invocado al mtodosession_start() 34. 34/36Unir todas las piezas Pensemos en la prctica de la validacin de usuarios Al insertar una pareja usuario/clave correcta, podramos crear unavariable de sesin $_SESSION[usuario] = $usuario En la pgina del juego, comprobar si $_SESSION[usuario] esvaco (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 modoque indicamos que NO se ha validado Dotar al juego de un botn de Salir, que elimine las variables desesin 35. AJAX sncronoXMLHttpRequest.open 36. 36/36Async=false Si modificamos el tercer parmetro del mtodo open y lo establecemos afalse, indicamos que la comunicacin va a ser sncrona xmlhttp.open("GET","mi_pagina.php",false); El uso del modo asncrono NO SE RECOMIENDA La ejecucin se detendr tras el mtodo SEND El cliente quedar a la espera de la respuesta del servidor NO hay que escribir una funcin onreadystatechange Simplemente hay que escribir el cdigo justo a continuacin del send xmlhttp.open("GET","mi_pagina.php",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;