Ajax

Ajax & Prototype Tomás Vilariño Fidalgo OUSLI

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

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

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

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

Ejemplo petición HTTP

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

Esquema de funcionamiento Modelo Clásico

Esquema de funcionamiento Modelo AJAX

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

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/

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”};

DOM/BOM

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

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

JSONRequest

Una posible alternativa a XMLHttpRequest

requestNumber = JSONRequest.post(

"https://json.penzance.org/request",

{

user: "doctoravatar@yahoo.com",

t: "vlIj",

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

{"user":"doctoravatar@penzance.com","forecast":7,"t":"vlIj","zip":94089}

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.

¿Donde puedo encontrar Ajax?

Ajax en la vida real

En el sitio menos pensado:

Gmail, GMaps,...

del.icio.us

Chuza, Meneame, digg, webeame, ...

Flickr, picassa, ...

Youtube (Ajax + Flash)

¿Quién fue el impulsor? G

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

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, ...

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/

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

Debugger de firebug

Firebug sobre GMail

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

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

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)

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, ...

Web Developer Toolbar

Tamper Data

Muy buena, monitorización de las peticiones HTTP.

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

Anatomía de AJAX

Anatomía de AJAX (I)

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

Anatomía de AJAX (II)

if ( window .XMLHttpRequest) {

_req = new XMLHttpRequest ();

_req.onload = displayState ;

_req.open( "GET" , url, true );

_req.send( null );

} else if ( window .ActiveXObject) {

_req = new ActiveXObject( "Microsoft.XMLHTTP" ) ;

if (_req) {

_req.onreadystatechange = displayState ;

_req.open( "GET" , url, true );

_req.send();

}

}

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 ( "Error recuperando datos: " + _req.statusText);

_err += _req.statusText + ' ' ;

}

}

}

/* Llamada al manejador concreto establecido en _hdl */ function _handler (response) { if (_hdl != null ) { _hdl(response); } }

Usando el wrapper Ajax

Incluir ajax.js:

<script src="ajax.js" language="javascript" type="text/javascript"> </script>

Después definir la función "manejador" que será la encargada de trabajar con los datos XML de la respuesta.

<script language="javascript" type="text/javascript">

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 "getXML". Para ello podemos utilizar los eventos de javascript:

onclick="javascript:ajax. getXML ('server.php?q=1');"

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.

Para trabajar con AJAX y XSLT hay q incluir ajax.js:

<script src="ajax.js" language="javascript" type="text/javascript"> </script>

La transformación del documento XML en HTML gracias a XSLT se realiza con el siguiente método: ajax.transformXML("doc.xml", "doc.xslt")

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="javascript">

var con = document.getElementById('salida');

con.innerHTML = resultado;

</script>

<div id="salida" />

Referencias: http://devedge.netscape.com/viewsource/2003/xslt-js/

Ajax + XSLT

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

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

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

¿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)

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

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, ...

Ajax con Prototype, por fin

<div id=" contenido "></div>

<script language="javascript">

new Ajax . PeriodicalUpdater (' contenido ', ' timeserver.php ',

{method: 'get', frequency: 3, decay: 2});

</script>

<?php

$hora = date("h:i:s a");

header('Content-type: text/xml');

echo('<strong>'.$hora.'</strong>');

?>

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.

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.

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="javascripts/prototype.js" type="text/javascript"></script>

<script src="javascripts/scriptaculous.js" type="text/javascript"></script>

Script.aculo.us - Efectos

Efectos de Entrada/Salida:

Appear / Fade

BlindUp / BlindDown

SlideUp / SlideDown

Grow / Shrink

Efectos de Salida

DropOut

Fold

Puff

Squish

SwitchOff

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

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

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

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);

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

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