PWS 2006-2007: AJAX - Asynchronous JavaScript and XML

Introducción a AJAX del curso Programación Web en Servidor.

Transcript

1. AJAX Ejemplo Prácticas AJAX Asynchronous JavaScript and XML Oscar Cubo Medina <ocubo@fi.upm.es> Programación Web en Servidor INEM 2006/2007 Oscar Cubo Medina Programación Web en Servidor AJAX
2. AJAX Ejemplo Prácticas Contenidos 1 Tecnología AJAX Introducción Objeto XMLHttpRequest Simple AJAX Code-Kit Lectura adicional 2 Ejemplo práctico Pasos Requisitos Diseño de la solución Interfaz HTML AJAX cliente AJAX Servidor 3 Prácticas Práctica 1 Práctica 2 Práctica 3 Oscar Cubo Medina Programación Web en Servidor AJAX
3. AJAX Ejemplo Prácticas 1 Tecnología AJAX Introducción Objeto XMLHttpRequest Simple AJAX Code-Kit Lectura adicional 2 Ejemplo práctico 3 Prácticas Oscar Cubo Medina Programación Web en Servidor AJAX
4. AJAX Ejemplo Prácticas Introducción Érase una vez... • AJAX surge por una necesidad: • Outlook Web Access (MS Exchange Server 2000) • Solución: Remote Scripting (1998) • Inclusión de un control ActiveX en IE [Hopmann(2007)] • Biblioteca MSXML • El término lo acuña Jesse James Garrett en 20051 • Muy vinculado a la Web 2.0 • GMail • Live mail • Blinklist • ... 1Ajax: A New Approach to Web Applications [Garrett(2005)] Oscar Cubo Medina Programación Web en Servidor AJAX
5. AJAX Ejemplo Prácticas Introducción Posibles usos ¿Cuándo se utiliza? Cuando es necesario actualizar una parte de la página sin tener que recargarla completamente. Oscar Cubo Medina Programación Web en Servidor AJAX
6. AJAX Ejemplo Prácticas Introducción Posibles usos ¿Cuándo se utiliza? Cuando es necesario actualizar una parte de la página sin tener que recargarla completamente. • Carga de detalles de un elemento en un listado Oscar Cubo Medina Programación Web en Servidor AJAX
7. AJAX Ejemplo Prácticas Introducción Posibles usos ¿Cuándo se utiliza? Cuando es necesario actualizar una parte de la página sin tener que recargarla completamente. • Carga de detalles de un elemento en un listado • Ejecución de múltiples acciones (dar de alta + asociar) Oscar Cubo Medina Programación Web en Servidor AJAX
8. AJAX Ejemplo Prácticas Introducción Posibles usos ¿Cuándo se utiliza? Cuando es necesario actualizar una parte de la página sin tener que recargarla completamente. • Carga de detalles de un elemento en un listado • Ejecución de múltiples acciones (dar de alta + asociar) • Generación de listas ordenadas Oscar Cubo Medina Programación Web en Servidor AJAX
9. AJAX Ejemplo Prácticas Introducción Posibles usos ¿Cuándo se utiliza? Cuando es necesario actualizar una parte de la página sin tener que recargarla completamente. • Carga de detalles de un elemento en un listado • Ejecución de múltiples acciones (dar de alta + asociar) • Generación de listas ordenadas • Votación + actualización de resultados Oscar Cubo Medina Programación Web en Servidor AJAX
10. AJAX Ejemplo Prácticas Introducción Posibles usos ¿Cuándo se utiliza? Cuando es necesario actualizar una parte de la página sin tener que recargarla completamente. • Carga de detalles de un elemento en un listado • Ejecución de múltiples acciones (dar de alta + asociar) • Generación de listas ordenadas • Votación + actualización de resultados • ¿...? Oscar Cubo Medina Programación Web en Servidor AJAX
11. AJAX Ejemplo Prácticas Introducción Ventajas e inconvenientes Ventajas • Mejor experiencia de usuario • Recuperación asíncrona • Interfaz de escritorio en la web • Menos ancho de banda • Menos proceso en el servidor • No precisa plugins Inconvenientes • Problemas de accesibilidad, compatibilidad, seguridad... • Pérdida de funcionalidades del navegador • Historial • Favoritos o bookmarks • Más peticiones al servidor • Latencia de la red Oscar Cubo Medina Programación Web en Servidor AJAX
12. AJAX Ejemplo Prácticas Introducción Fundamentos • Uso combinado de un conjunto de técnicas ya existentes • (X)HTML • CSS • Javascript • DHTML • DOM • Objeto XMLHttpRequest Oscar Cubo Medina Programación Web en Servidor AJAX
13. AJAX Ejemplo Prácticas XMLHttpRequest El objeto XMLHttpRequest • Permite realizar peticiones Web desde javascript • Incluido originalmente sólo en IE • Actualmente soportado en la API de javascript Oscar Cubo Medina Programación Web en Servidor AJAX
14. AJAX Ejemplo Prácticas XMLHttpRequest El objeto XMLHttpRequest • Permite realizar peticiones Web desde javascript • Incluido originalmente sólo en IE • Actualmente soportado en la API de javascript Problemas con codificación Es necesario especificar la codificación de todas las transferencias: header(’Content-Type: application/xhtml+xml; charset=ISO-8859-1’); Si no se indica nada se considera UTF-8. Oscar Cubo Medina Programación Web en Servidor AJAX
15. AJAX Ejemplo Prácticas XMLHttpRequest Funciones I Open • Permite abrir un canal de comunicación con el servidor open ( método, url, [asincrono], [usuario], [clave] ) Send • Envía datos a través de una conexión ya establecida send (datos) Oscar Cubo Medina Programación Web en Servidor AJAX
16. AJAX Ejemplo Prácticas XMLHttpRequest Funciones II Abort • Permite cancelar una petición en curso abort () Oscar Cubo Medina Programación Web en Servidor AJAX
17. AJAX Ejemplo Prácticas XMLHttpRequest Propiedades I Respuesta responseText Texto devuelto por el servidor responseXML Equivalente a la anterior pero con formato DOM Control de operación status Código de respuesta del servidor (código HTML) statusText Texto asociado al código de respuesta Oscar Cubo Medina Programación Web en Servidor AJAX
18. AJAX Ejemplo Prácticas XMLHttpRequest Propiedades II Estado de la petición readyState Estado de la petición onreadystatechange Función que se ejecuta al finalizar una petición asíncrona Código Significado 0 Sin inicializar (uninitialized) 1 Abierta conexión (opened) 2 Enviada petición (sent) 3 Recibiendo datos (receiving) 4 Cargado (loaded) Oscar Cubo Medina Programación Web en Servidor AJAX
19. AJAX Ejemplo Prácticas XMLHttpRequest Funcionamiento Oscar Cubo Medina Programación Web en Servidor AJAX
20. AJAX Ejemplo Prácticas XMLHttpRequest Funcionamiento new XmlHttpRequest 0 Oscar Cubo Medina Programación Web en Servidor AJAX
21. AJAX Ejemplo Prácticas XMLHttpRequest Funcionamiento new XmlHttpRequest 0 new XmlHttpRequest Open 0 1 Oscar Cubo Medina Programación Web en Servidor AJAX
22. AJAX Ejemplo Prácticas XMLHttpRequest Funcionamiento new XmlHttpRequest 0 new XmlHttpRequest Open 0 1 new XmlHttpRequest Open Send 0 1 2 Oscar Cubo Medina Programación Web en Servidor AJAX
23. AJAX Ejemplo Prácticas XMLHttpRequest Funcionamiento new XmlHttpRequest 0 new XmlHttpRequest Open 0 1 new XmlHttpRequest Open Send 0 1 2 new XmlHttpRequest Open Send Petición 0 1 2 Oscar Cubo Medina Programación Web en Servidor AJAX
24. AJAX Ejemplo Prácticas XMLHttpRequest Funcionamiento new XmlHttpRequest 0 new XmlHttpRequest Open 0 1 new XmlHttpRequest Open Send 0 1 2 new XmlHttpRequest Open Send Petición 0 1 2 new XmlHttpRequest Open Send Petición Respuesta 0 1 2 3 Oscar Cubo Medina Programación Web en Servidor AJAX
25. AJAX Ejemplo Prácticas XMLHttpRequest Funcionamiento new XmlHttpRequest 0 new XmlHttpRequest Open 0 1 new XmlHttpRequest Open Send 0 1 2 new XmlHttpRequest Open Send Petición 0 1 2 new XmlHttpRequest Open Send Petición Respuesta 0 1 2 3 new XmlHttpRequest Open Send Petición Respuesta 0 1 2 3 4 Oscar Cubo Medina Programación Web en Servidor AJAX
26. AJAX Ejemplo Prácticas XMLHttpRequest Funcionamiento new XmlHttpRequest 0 new XmlHttpRequest Open 0 1 new XmlHttpRequest Open Send 0 1 2 new XmlHttpRequest Open Send Petición 0 1 2 new XmlHttpRequest Open Send Petición Respuesta 0 1 2 3 new XmlHttpRequest Open Send Petición Respuesta 0 1 2 3 4 new XmlHttpRequest Open Send onreadystatechange Petición Respuesta 0 1 2 3 4 Oscar Cubo Medina Programación Web en Servidor AJAX
27. AJAX Ejemplo Prácticas XMLHttpRequest Esquema de uso I Creación del objeto // ¿ Existe en la API ? if (window.XMLHttpRequest) { // Usar API http = new XMLHttpRequest(); } else { // Usar ActiveX (IE<7) http = new ActiveXObject ("Microsoft.XMLHTTP"); } // if Oscar Cubo Medina Programación Web en Servidor AJAX
28. AJAX Ejemplo Prácticas XMLHttpRequest Esquema de uso II Petición de información // Función de finalización http.onreadystatechange = fn; // Abrir la conexión http.open("GET", "http://url/", true); // Enviar la petición http.send(null); Oscar Cubo Medina Programación Web en Servidor AJAX
29. AJAX Ejemplo Prácticas XMLHttpRequest Esquema de uso III Callback de recepción function fn() { // Se comprueba el fin de la carga if ( http.readyState == 4 ) { if (http.status == 200) { // OK // Proceso de datos // Mostrar resultado } else { alert(http.statusText); // Error } // if } // if } Oscar Cubo Medina Programación Web en Servidor AJAX
30. AJAX Ejemplo Prácticas SACK SACK Simple AJAX Code-Kit • AJAX simplificado • Recubre objeto XMLHttpRequest • Control automático y transparente • Enteramente javascript • Poco peso «SACK is exactly what it says it is: A simple set of code to allow you to put AJAX into your webpages with none of the fuss or overhead of other packages. Just AJAX, just simple.» Oscar Cubo Medina Programación Web en Servidor AJAX
31. AJAX Ejemplo Prácticas SACK Esquema de uso Petición AJAX con SACK document.getElementById(’id’).innerHTML = "Actualizando"; ajax = new sack(); ajax.reset(); ajax.element = ’id’; ajax.requestFile = ’http://url/fichero’; ajax.method = ’POST’; ajax.setVar(’id’, ’productos’); ajax.runAJAX(); // Ejecutar la petición Oscar Cubo Medina Programación Web en Servidor AJAX
32. AJAX Ejemplo Prácticas Referencias AJAX (Asynchronous JavaScript and XML) Mariano Amartino. AJAX un nuevo acercamiento a aplicaciones web, 2005. URL http://www.uberbin.net/archivos/internet/ ajax-un-nuevo-acercamiento-a-aplicaciones-web.php. Jesse James Garrett. Ajax: A new approach to web applications, 2005. URL http://www.adaptivepath.com/publications/essays/ archives/000385.php. Alex Hopmann. The story of XMLHTTP, 2007. URL http://www.alexhopmann.com/xmlhttp.htm. Wikipedia. AJAX — Wikipedia, La enciclopedia libre, 2007. URL http://es.wikipedia.org/wiki/AJAX. Oscar Cubo Medina Programación Web en Servidor AJAX
33. AJAX Ejemplo Prácticas Referencias SACK (Simple Ajax Code-Kit) Gregory Wild-Smith. Twilightuniverse - simple ajax code kit, 2007. URL http://www.twilightuniverse.com/resources/code/sack/. Oscar Cubo Medina Programación Web en Servidor AJAX
34. AJAX Ejemplo Prácticas Referencias Tutoriales José Manuel Alarcón. Ajax – ¡hagamos un ejemplo!, 2007. URL http://geeks.ms/search/SearchResults.aspx?q= ajax&u=2121&o=DateAscending. AsH. Ajax tutorials, 2007. URL http://vyk1.spaces.live.com/Blog/cns! EBE3A761F939F926!1051.entry. Oscar Cubo Medina. Tutorial de ajax, 2007. URL http: //laurel.datsi.fi.upm.es/~ocubo/labs/tutoriales/ajax. Oscar Cubo Medina Programación Web en Servidor AJAX
35. AJAX Ejemplo Prácticas 1 Tecnología AJAX 2 Ejemplo práctico Pasos Requisitos Diseño de la solución Interfaz HTML AJAX cliente AJAX Servidor 3 Prácticas Oscar Cubo Medina Programación Web en Servidor AJAX
36. AJAX Ejemplo Prácticas Pasos Pasos a cumplimentar Diseño 1 Definir requisitos 2 Estructura de directorios 3 Estructura de la interfaz 4 Identificar las operaciones AJAX Oscar Cubo Medina Programación Web en Servidor AJAX
37. AJAX Ejemplo Prácticas Pasos Pasos a cumplimentar Diseño 1 Definir requisitos 2 Estructura de directorios 3 Estructura de la interfaz 4 Identificar las operaciones AJAX Ciclo de implementación 1 Crear la estructura de interfaz 2 Crear el objeto AJAX (sin operaciones) 3 Implementar cada operación por separado 4 Pruebas Oscar Cubo Medina Programación Web en Servidor AJAX
38. AJAX Ejemplo Prácticas Requisitos Operaciones matemáticas Sumatorio, factorial y fibonacci • Aplicación que calcule operaciones matemáticas. Sumatorio Suma de los valores de 1 a x x = x + (x − 1) + (x − 2) + · · · + 2 + 1 Factorial Producto de los valores de 1 a x x! = x · (x − 1)! = x · (x − 1) · (x − 2) · . . . · 2 · 1 Fibonacci2 Es la serie matemática 1, 1, 2, 3, 5, 8, 13, 21, · · · F (x) = F (x − 1) + F (x − 2) • Actualización en tiempo realTM 2 http://es.wikipedia.org/wiki/Sucesión_de_Fibonacci Oscar Cubo Medina Programación Web en Servidor AJAX
39. AJAX Ejemplo Prácticas Diseño Estructura de directorios • Proyecto • index.php • ajax.php • lib / includes • operaciones.php • ... • scripts • tw-sack.js • ajax.js • ... • tpl • style.css • img1.jpg • img2.png • ... Oscar Cubo Medina Programación Web en Servidor AJAX
40. AJAX Ejemplo Prácticas Diseño Estructura de la interfaz #sumatorio #factorial #fibonacci Oscar Cubo Medina Programación Web en Servidor AJAX
41. AJAX Ejemplo Prácticas Diseño Identificar las operaciones AJAX • 3 controles a actualizar • sumatorio • factorial • fibonacci • 4 operaciones diferentes • Calcular sumatorio • Calcular factorial • Calcular fibonacci • Calcular todos Oscar Cubo Medina Programación Web en Servidor AJAX
42. AJAX Ejemplo Prácticas HTML (index.php) Interfaz HTML I Tipo de documento <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Oscar Cubo Medina Programación Web en Servidor AJAX
43. AJAX Ejemplo Prácticas HTML (index.php) Interfaz HTML II Cabecera del documento <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AJAX - Operaciones matemáticas</title> <link media="screen" href="css/estilo.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" language="javascript" src="scripts/tw-sack.js"></script> <script type="text/javascript" language="javascript" src="scripts/ajax.js"></script> </head> Oscar Cubo Medina Programación Web en Servidor AJAX
44. AJAX Ejemplo Prácticas HTML (index.php) Interfaz HTML III Estructura del documento <body> <div class="pagina"> <div class="cabecera">Cabecera</div> <div class="cuerpo"> <div class="izda">Izquierda</div> <div class="dcha">Derecha</div> </div> <div class="pie">Pie</div> </div> </body> Oscar Cubo Medina Programación Web en Servidor AJAX
45. AJAX Ejemplo Prácticas HTML (index.php) Interfaz HTML IV Esquema de enlace AJAX <span class="ajax" onclick="ajax.Operacion(1)">Operación(1)</span> Oscar Cubo Medina Programación Web en Servidor AJAX
46. AJAX Ejemplo Prácticas HTML (index.php) Interfaz HTML V Generación de enlaces for($i=0; $i<16;$i++) { echo "<tr>" ."<td><span onclick=\"ajax.Sum($i)\">sum($i)</span></td>" ."<td><span onclick=\"ajax.Fac($i)\">fac($i)</span></td>" ."<td><span onclick=\"ajax.Fib($i)\">fib($i)</span></td>" ."<td><span onclick=\"ajax.All($i)\">all($i)</span></td>" ."</tr>"; } // for Oscar Cubo Medina Programación Web en Servidor AJAX
47. AJAX Ejemplo Prácticas AJAX cliente (ajax.js) Código AJAX en cliente I Estructura de la clase function Ajax(file, txt) { // 1 objeto por cada id a actualizar this.vSumatorio = new sack(); this.vFactorial = new sack(); this.vFibonacci = new sack(); // 1 función por cada operación diferente this.Sumatorio = function(x) { ... } this.Factorial = function(x) { ... } this.Fibonacci = function(x) { ... } this.Todos = function(x) { ... } } // Ajax Oscar Cubo Medina Programación Web en Servidor AJAX
48. AJAX Ejemplo Prácticas AJAX cliente (ajax.js) Código AJAX en cliente II Ejemplo de método this.Sumatorio = function(x) { this.vSumatorio.reset(); this.vSumatorio.element = ’sumatorio’; document.getElementById(’id’).innerHTML = txt; this.vSumatorio.requestFile = file; this.vSumatorio.method = ’POST’; this.vSumatorio.setVar(’ajax’, ’sumatorio’); this.vSumatorio.setVar(’x’, x); this.vSumatorio.runAJAX(); } Oscar Cubo Medina Programación Web en Servidor AJAX
49. AJAX Ejemplo Prácticas AJAX cliente (ajax.js) Código AJAX en cliente III Operación múltiple this.Todos = function(x) { this.Sumatorio(x); this.Factorial(x); this.Fibonacci(x); } Crear la clase var ajax = new Ajax(’ajax.php’, ’Calculando...’); Oscar Cubo Medina Programación Web en Servidor AJAX
50. AJAX Ejemplo Prácticas AJAX servidor (ajax.php) Código AJAX en servidor I Selección de operación switch($_POST[’ajax’]) { case ’sumatorio’: ... case ’factorial’: ... case ’fibonacci’: ... default: // Error "Operación desconocida"; } // switch Oscar Cubo Medina Programación Web en Servidor AJAX
51. AJAX Ejemplo Prácticas AJAX servidor (ajax.php) Código AJAX en servidor II Sumatorio / Factorial function sumatorio($x) { $suma = 0; for($i=1; $i<=$x; $i++) { $suma += $i; } // for return $suma; } $res = sumatorio($_POST[’x’]); Oscar Cubo Medina Programación Web en Servidor AJAX
52. AJAX Ejemplo Prácticas AJAX servidor (ajax.php) Código AJAX en servidor III Fibonacci function fibonacci($x) { if ($x < 2) return 1; return ( fibonacci($x-1) + fibonacci($x-2) ); } $res = fibonacci($_POST[’x’]); Oscar Cubo Medina Programación Web en Servidor AJAX
53. AJAX Ejemplo Prácticas 1 Tecnología AJAX 2 Ejemplo práctico 3 Prácticas Práctica 1 Práctica 2 Práctica 3 Oscar Cubo Medina Programación Web en Servidor AJAX
54. AJAX Ejemplo Prácticas Práctica 1 Votación básica • Sistema de votación para el premio pulitzer • Dispone de X artículos candidatos • La votación se realiza vía Web • Cada persona puede asignar de 0 a 5 puntos a cada candidato • El candidato con más puntos ganará el premio ;-) • Se necesita actualizar la clasificación en tiempo realTM Oscar Cubo Medina Programación Web en Servidor AJAX
55. AJAX Ejemplo Prácticas Práctica 2 Votando en Eurovisión • Sistema de votación para eurovisión • Disponemos de X canciones candidatas • Cada usuario puede otorgar 5,4,3,2 y 1 votos a 5 candidaturas diferentes • Cuando se acaba la serie de 5 se inicia una nueva votación • Gana el que más votos tenga • La clasificación debe actualizarse en tiempo realTM Oscar Cubo Medina Programación Web en Servidor AJAX
56. AJAX Ejemplo Prácticas Práctica 3 Lista TO-DO • Gestor de tareas a realizar • Dispone de un listado de tareas ordenado por prioridad. • Cada tarea se compone de un nombre y una descripción • Cada tarea tiene 5 niveles de prioridad • En el listado de tareas se muestra sólo el nombre y, al seleccionar una tarea, se muestran sus detalles • Es posible añadir/borrar tareas Oscar Cubo Medina Programación Web en Servidor AJAX