1. El documento discute posibles soluciones para implementar un chat por HTTP como Iframe scripting y propone que AJAX es una solución elegante. 2. Explica el esquema de funcionamiento de AJAX donde el navegador realiza peticiones asíncronas al servidor y actualiza el DOM sin recargar la página. 3. Revisa herramientas para desarrollo AJAX como Firebug que permiten debuggear aplicaciones AJAX.

1. Ajax & Prototype Tomás Vilariño Fidalgo OUSLI

2. ¿Cómo podría implementar un chat por http?

3. Posible solución Iframe scripting Un frame oculto se refresca por medio de javascript y se recuperan datos del servidor. Referencias: http://developer.apple.com/internet/webcontent/iframe.html http://www.bazon.net/mishoo/rpc.epl

4. Iframe scripting es una solución compleja “PHPOpenChat”, solución de web chat empleando Iframe scripting.

5. HTTP y aplicaciones en la Web HTTP presenta limitaciones: Es un protocolo petición/respuesta No existe un canal abierto de comunicación Después de la respuesta el servidor cierra la comunicación

6. Ejemplo petición HTTP

7. AJAX: la solución elegante Jesse James Garrett “bautiza” esta nueva forma de comunicación entre cliente y servidor. AJAX no es una tecnología. Son varias - A synchronous J avascript A nd X ml: XHTML y CSS DOM XML, XSLT, XPath XMLHttpRequest (XHR) JavaScript Referencias: http://adaptivepath.com/publications/essays/archives/000385.php

8. Esquema de funcionamiento Modelo Clásico

9. Esquema de funcionamiento Modelo AJAX

11. 1. Usuario provoca un evento 2. Se crea y configura un objeto XMLHttpRequest 3. El objeto XMLHttpRequest realiza una llamada al servidor 4. La petición se procesa en el servidor 5. El servidor retorna un documento XML (xHTML, JSON, ...) que contienen el resultado 6. El objeto XMLHttpRequest llama a la función callback() y procesa el resultado 7. Se actualiza el DOM (Document Object Model) de la página asociado con la petición con el resultado devuelto Esquema de funcionamiento Modelo AJAX

12. Historia de Ajax Origen: Microsoft Remote Scripting (IE ActiveX Microsoft.XMLHTTP), permite trabajar con XML del servidor en el cliente IE. Port a otros navegadores: Mozilla incorpora un objeto Javascript que realiza la misma funcionalidad XMLHttpRequest XMLHttpRequest incluido en borrador w3c: En borrador incorporado a DOM v3 W3C Working Draft 27 February 2007 Referencias: http://www.w3.org/TR/XMLHttpRequest/

13. Conceptos previos DOM, Document Object Model. Desde ECMAScript se permite manipular HTML como si fuese XML. <script language=”javascript”> var elto = document.getElementById(“id_elemento”); elto.innerHTML = “Hola mundo”; </script> <div id=”id_elemento”></div> Javascript y Orientación a Objetos. function miclase() { var private_var = 0; this.public_var = 1; this.metodo = function(valor){ private_var = valor; } } var instancia = new miclase(); instancia.metodo(2); miclase.prototype.nuevapropiedad = “Hola”; JSON, JavaScript Object Notation. Notación de objetos literal en javascript. var obj = {id: 10, mi_array: ['nombre1', 'nombre2'], cadena: “cadena de texto”};

14. DOM/BOM DOM manipula el árbol HTML, permite cambio de estilos CSS, renderizado de nuevo contenido, ...

15. JSON Permite definir en una cadena una estructura de datos similar a un array asociativo, pero que no deja de ser un objeto y sus las ventajas. Útil para transmitir datos con más expresividad que XML. Referencias: http://www.json.org

16. JSONRequest Una posible alternativa a XMLHttpRequest requestNumber = JSONRequest.post( &quot;https://json.penzance.org/request&quot;, { user: &quot;doctoravatar@yahoo.com&quot;, t: &quot;vlIj&quot;, zip: 94089, forecast: 7 }, function (requestNumber, value, exception) { if (value) { processResponse(value); } else { processError(exception); } } ); POST /request HTTP/1.1 Host: json.penzance.org Content-Type: application/jsonrequest Content-Length: 72 Content-Encoding: identity Domain: www.pirate.net {&quot;user&quot;:&quot;doctoravatar@penzance.com&quot;,&quot;forecast&quot;:7,&quot;t&quot;:&quot;vlIj&quot;,&quot;zip&quot;:94089}

17. Comet El cliente no deberá estar solicitando los cambios de la lista de usuarios, el servidor web es el que le envía los datos al cliente cuando cambia la lista de usuarios, esto reduce considerablemente el consumo de ancho de banda.

18. ¿Donde puedo encontrar Ajax?

19. Ajax en la vida real En el sitio menos pensado: Gmail, GMaps,... del.icio.us Chuza, Meneame, digg, webeame, ... Flickr, picassa, ... Youtube (Ajax + Flash)

20. ¿Quién fue el impulsor? G

21. G mail G talk G oogle maps G oogle pages G ...

22. Entorno de Trabajo 3 Reglas básicas desarrollando aplicaciones AJAX (según Thomas Fuchs): Usar Firefox Usar Firefox + extensiones Probar en el resto de navegadores: Opera, IES4Linux, Konqueror, ...

23. Javascript Debugger Logging para páginas web DOM Inspector Línea de comandos Espía de peticiones Ajax (XMLHttpRequest) Edición en vivo de javascript CSS, edición en línea, tracking de estilos Monitor de red ... Referencias: http://www.joehewitt.com/software/firebug https://addons.mozilla.org/firefox/1843/

24. Firebug: funcionalidades desde la consola Niveles de logging: console.debug(“mensaje”, [,objects]); Otros niveles: info, warn, error Assertions: console.assert(a, “mensaje”); // Si a es verdadero se muestra mensaje Funciones: $(“id”); // Atajo para document.getElementById $x(“//div”); // Expresiones xpath inspect(object); // mostrar el inspector para n objeto dir(object); // Devolver un array de propiedades del objeto

25. Debugger de firebug

26. Firebug sobre GMail

27. Complementos a Firebug FirePHP, extensión Firefox para desarrollo PHP http://www.firephp.org/ FireCake, helper para CakePHP http://bakery.cakephp.org/articles/view/227 FireBug Lite, firebug para IE y Opera http://www.getfirebug.com/lite.html Aptana http://www.aptana.org

28. http://www.firephp.org/Reference/Developers/ExtendingFirebug.htm Extendiendo Firebug

29. Extensiones firefox: otras Web Developer Toolbar: barra de herramientas que incluye diversas y útiles funcionalidades ( ¡imprescindible! ) Tamper Data: herramienta para la monitorización de las peticiones HTTP, incluidas las realizadas con AJAX. DOM Inspector: proporciona la representación de la página actual en forma de árbol DOM. Consola Javascript: incluida con firefox, muestra los errores en los script Otras: IETab, Colorzilla, All-In-One sidebar, MozGestures optimoz, Venkman Debugger , greasemonkey , ... (+extensiones en mozdev.org) Referencias: https://addons.mozilla.org/firefox/60/ (Web developer toolbar) http://tamperdata.mozdev.org/ (Tamper data) http://www.mozdev.org/projects/active.html (Otras extensiones)

30. Web developer, ¡imprescindible! Opciones para trabajar con: Cookies: editar, información, ... CSS: editar, deshabilitar, cambiar, ... Forms: habilitar campos, ver passwords, ... Images: imáges perdidas, información, ... Deshabilitar funcionalidades navegador: java, javascript, cache, css, ... Miscelánea: eliminar caché, cookies, ... Diseño: cuadrícula, reglas, ...

31. Web Developer Toolbar

32. Tamper Data Muy buena, monitorización de las peticiones HTTP.

33. GreaseMonkey Permite por medio de pequeñas porciones de código javascript creadas por usuarios ( *.user.js ), modificar el comportamiento de páginas web específicas. Con esta extensión es posible mejorar la experiencia de lectura de un sitio, hacerlo más usable, añadir nuevas funciones a páginas web, corregir errores, mejorar servicios de búsquedas y muchas otras cosas más. Útil en el proceso de desarrollo para cumplimentar formularios de forma automática, visualizar valores del servidor, eliminar imágenes, ... http://localhost/view-session.user.js

34. Anatomía de AJAX

35. Anatomía de AJAX (I) Vamos a crear una clase AJAX que envuelva (clase wrapper) las funcionalidades específicas de cada navegador.

36. Anatomía de AJAX (II) if ( window .XMLHttpRequest) { _req = new XMLHttpRequest (); _req.onload = displayState ; _req.open( &quot;GET&quot; , url, true ); _req.send( null ); } else if ( window .ActiveXObject) { _req = new ActiveXObject( &quot;Microsoft.XMLHTTP&quot; ) ; if (_req) { _req.onreadystatechange = displayState ; _req.open( &quot;GET&quot; , url, true ); _req.send(); } }

37. Anatomía de AJAX (III) /* Manejador del estado */ function displayState() { if (_req.readyState == 4) { if (_req. status == 200 ) { // Procesar datos // ... _res = _req.responseXML.documentElement ; // Llamada al manejador concreto _handler (_res); } else { alert ( &quot;Error recuperando datos: \n &quot; + _req.statusText); _err += _req.statusText + '\n' ; } } } /* Llamada al manejador concreto establecido en _hdl */ function _handler (response) { if (_hdl != null ) { _hdl(response); } }

38. Usando el wrapper Ajax Incluir ajax.js: <script src=&quot;ajax.js&quot; language=&quot;javascript&quot; type=&quot;text/javascript&quot;> </script> Después definir la función &quot;manejador&quot; que será la encargada de trabajar con los datos XML de la respuesta. <script language=&quot;javascript&quot; type=&quot;text/javascript&quot;> function miManejador (response) { alert( response.getElementsByTagName('resultado')[0].firstChild.data); } </script> Instanciar la clase AJAX y establecer el manejador definido en el paso anterior var ajax = new Ajax(); ajax.setHandler( miManejador ); Para desencadenar la llamada al manejador es necesario utilizar el método de ajax &quot;getXML&quot;. Para ello podemos utilizar los eventos de javascript: onclick=&quot;javascript:ajax. getXML ('server.php?q=1');&quot;

39. Usando el wrapper Ajax function cargar_hora () { ajax.getXML('timeserver.php'); } var idThread = null; function init() { idThread = setInterval ( cargar_hora , 5000 ); } El uso de temporizadores permite realizar peticiones al servidor de forma continua hasta que se destruya el temporizador. Esto permite emular una conexión persistente con el servidor.

40. Usando el wrapper Ajax Para trabajar con AJAX y XSLT hay q incluir ajax.js: <script src=&quot;ajax.js&quot; language=&quot;javascript&quot; type=&quot;text/javascript&quot;> </script> La transformación del documento XML en HTML gracias a XSLT se realiza con el siguiente método: ajax.transformXML(&quot;doc.xml&quot;, &quot;doc.xslt&quot;) var ajax = new Ajax(); var resultado = ajax.transformXML('menu.xml', “menu.xsl”); El resultado obtenido del método transformXML es una cadena con la transformación realizada del documento XML a HTML por medio de XSLT. <script language=&quot;javascript&quot;> var con = document.getElementById('salida'); con.innerHTML = resultado; </script> <div id=&quot;salida&quot; /> Referencias: http://devedge.netscape.com/viewsource/2003/xslt-js/

41. Ajax + XSLT

42. Esto es muy complejo. No existe un modo más sencillo de trabajar con Ajax?

43. Frameworks AJAX Mediante reflexión determinan la interfaz de las clases del lado servidor y generan código javascript para invocar funcionalidades desde el cliente. JPSpan y Sajax, en PHP5. DWR, en Java, posibilidad de integrar con otros frameworks como struts. DWR 2.0 introduce el concepto de Reverse Ajax (desde el servidor enviar javascript al cliente :-O ). Ajax.NET. Librerías javascript que permiten funcionalidades AJAX: script.aculo.us, mejor dicho prototype Dojo, integrada en DWR

44. PROTOTYPE ( http://prototype.conio.net/ ) es un framework desarrollado en JavaScript por Sam Stephenson para el desarrollo sencillo y dinámico de páginas WEB. PROTOTYPE simplifica gran parte del trabajo cuando se pretende desarrollar páginas altamente interactivas. [def.wikipedia: http://es.wikipedia.org/wiki/Prototype ] Framework Prototype

45. ¿Por qué Prototype? Ruby On Rails , Perl, Nitro, PHP, Java, Plone, Pylons, DotNet, Symfony, Seaside, AIDA/Web, OpenACS, Django, CakePHP Sencillo y potente OO y extensible Herramientas integran prototype (Aptana)

46. Métodos de utilidad: $(), $F(), $A(), $$(), ... Ajax Array, Hash, String Class, Object, Function Date, Element, Enumerable, Number Event, Position Form Insertion, Template PeriodicalExecuter, TimedObserver http://www.prototypejs.org/api Framework Prototype

47. Ejemplos con Prototype Facilita la programación OO: Helper = Class.create (); Helper.prototype = Object.extend (Helper, { initialize : function(element, url, options) { this.element = $(element); ... }}); http://localhost/ajax/js/helper.js Extiende objetos básicos de Javascript para proporcionar nuevas funcionalidades: String, Array, Hash, ...

48. Ajax con Prototype, por fin <div id=&quot; contenido &quot;></div> <script language=&quot;javascript&quot;> new Ajax . PeriodicalUpdater (' contenido ', ' timeserver.php ', {method: 'get', frequency: 3, decay: 2}); </script> <?php $hora = date(&quot;h:i:s a&quot;); header('Content-type: text/xml'); echo('<strong>'.$hora.'</strong>'); ?>

49. Ajax con Prototype, por fin Ajax Options, opciones comunes de los distintos objetos Ajax Ajax.PeriodicalUpdater new Ajax.PeriodicalUpdater(container, url[, options]) Realiza unas llamadas de forma periódica actualizando el contenido “container” con la respuesta basada en texto. Ofrece un mecanismo de “decay” (decaer, putrefacción) que comprueba las respuesta e incrementa los períodos de petición automáticamente. http://prototypejs.org/api/ajax/periodicalUpdater http://localhost/ajax/timeclient.htm Ajax.Request new Ajax.Request(url[, options]) El objeto más básico y potente de petición AJAX.

50. Ajax con Prototype, por fin Ajax.Responders Ajax.Responders.register(responder) Ajax.Responders.unregister(responder) Es un repositorio global de monitores que notifican todos los pasos de las peticiones Ajax (Prototype). Ajax.Updater new Ajax.Updater(container, url[, options]) Realiza una petición AJAX y actualiza el contenedor con el texto de la respuesta.

51. Script.aculo.us Script.aculo.us está implementado empleando prototype para proporcionar nuevas funcionalidades: Efectos (Effects) Controles visuales (Controls) Utilidades (Utils) Pruebas (Testing) Uso: <script src=&quot;javascripts/prototype.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;javascripts/scriptaculous.js&quot; type=&quot;text/javascript&quot;></script> <!-- scriptaculous.js?load=effects,dragdrop,builder,slider,controls -->

52. Script.aculo.us - Efectos Efectos de Entrada/Salida: Appear / Fade BlindUp / BlindDown SlideUp / SlideDown Grow / Shrink Efectos de Salida DropOut Fold Puff Squish SwitchOff <script type=&quot;text/javascript&quot; language=&quot;javascript&quot;> Effect.Appear('element_id'); </script>

53. Script.aculo.us - Efectos Efectos de atención: Highlight Pulsate Shake Efectos básicos (primitivas de los anterios): Effect.Scale, Effect.Move, Effect.MoveBy Effect.Opacity, Effect.ScrollTo Effect.Parallel Effect.toggle Effect.Queue s

54. Script.aculo.us - Efectos La última versión 1.7.0 añade nuevos efectos: Effect.Transform, Effect.Morph, ... inspirados en el framework de Bernie's: http://berniecode.com/writing/animator.html Soporte para reproducir sonidos: Sound.play('blah.mp3'); http://localhost/ajax/effects.php

55. Script.aculo.us - Controles InPlaceEditor Slider Drag & drop http://localhost/ajax/controls.php Google suggest + Autocompleter = Mashup Un Mashup es un sitio web o una aplicación que combina contenidos/servicios de varias fuentes integradas de modo que parezca una única aplicación. (Flickr + Weblog + GMaps) http://localhost/ajax/google-suggest.php

56. Script.aculo.us - Útiles Builder es una clase de script.aculo.us que permite manipular DOM de forma más sencilla sin tener que trabajar con document.createElement, document.createTextNode, .... http://localhost/ajax/builder.htm table = Builder.node('table', {width:'100%', cellpadding:'2', cellspacing:'0',border:'0'}); tbody = Builder.node('tbody'); tr = Builder.node('tr',{className:'header'}); td = Builder.node('td',[ Builder.node('strong','Category')]); tr.appendChild(td); tbody.appendChild(tr); table.appendChild(tbody); $('contenido').appendChild(table);

57. Faíscas Proyecto de OUSLI empleando: prototype, scriptaculous, ADOdb, Smarty, MySQL, ... Pizarra de trabajo colaborativo vía web Un usuario puede publicar notas, en las distintas pizarras categorizadas por temas, y en tiempo real ver los post-it publicados por los otros usuarios. http://localhost/brainstorming/login.php

58. Ahora con CakePHP Extraído del tutorial: http://grahambird.co.uk/cake/tutorials/ Lista de tareas pendientes 1.- Primero es necesario incluir las últimas versiones de prototype y script.aculo.us. Descargan script.aculo.us ya tenemos ambas incluidas. http://script.aculo.us/downloads 2.- Incluír en /app/views/layouts/default.thtml los tags para trabajar con script.aculo.us y prototype: <?php print $html->charsetTag(' UTF-8 ') ?> <?php print $javascript->link('prototype') ?> <?php print $javascript->link('scriptaculous.js?load=effects') ?> 3.- Creamos nuestra tabla: http://localhost/phpmyadmin

59. CakePHP y Ajax 4.- El modelo es el mismo que el empleado para el trabajo sin Ajax 5.- El controlador tiene en cuenta el layout con el que está trabajando a la hora de ejecutar el render. http://ajax.localhost/tasks_controller.phps function add() {... $this->render('todo', 'ajax'); ...}

60. CakePHP y Ajax 6.- En la vista es donde está (y donde debe estar) todo el meollo de Ajax. http://ajax.localhost/tasks/

61. Conclusiones Ajax tiene detractores pero seguramente sea por desconocimiento. Razones para usar Ajax: 1.- Este modelo de trabajo es complementario al anterior. 2.- Inconvenientes de accesibilidad, “botón atrás”, “marcadores”, ... son solucionables 3.- Se mejora la usabilidad de la aplicación empleando Ajax: tiempos de respuesta, ... (Gmail) 4.- Se está trabajando en aplicaciones web offline. Apollo de Adobe, Dojo toolkit, Mozilla 5.- Google está trabajando con esta tecnología, por algo será!!! 6.- ...

62. Teorías de conspiración (desvarios mentales propios) IExploter es el inconveniente más grande que evita la verdadera explosión de esta tecnología M$ no le interesa que este tipo de aplicaciones avancen. Tiene mucho mercado en aplicaciones de escritorio (Office) Aparecen nuevos frameworks que facilitan el trabajo en cliente y servidor en un mismo lenguaje: haXe, GWT, ... Gracias a una oferta tan importante de herramientas en Software Libre sería muy raro que esto sólo sea una burbuja.

63. Gracias por su atención Preguntas