Ajax

Ajax & Prototype Tomás Vilariño Fidalgo OUSLI

Posible solución ,[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object]

AJAX: la solución elegante ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Referencias: http://adaptivepath.com/publications/essays/archives/000385.php

Esquema de funcionamiento Modelo Clásico

Esquema de funcionamiento Modelo AJAX

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Esquema de funcionamiento Modelo AJAX

Historia de Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Referencias: http://www.w3.org/TR/XMLHttpRequest/

Conceptos previos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JSON ,[object Object],[object Object],Referencias: http://www.json.org

JSONRequest ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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.

Ajax en la vida real ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Entorno de Trabajo ,[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Referencias: http://www.joehewitt.com/software/firebug https://addons.mozilla.org/firefox/1843/

Firebug: funcionalidades desde la consola ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Complementos a Firebug ,[object Object],[object Object],[object Object],[object Object]

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

Extensiones firefox: otras ,[object Object],[object Object],[object Object],[object Object],[object Object],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! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

GreaseMonkey ,[object Object],[object Object],[object Object],[object Object]

Anatomía de AJAX (I) ,[object Object]

Anatomía de AJAX (II) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Anatomía de AJAX (III) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],/* Llamada al manejador concreto establecido en _hdl */ function _handler (response) { if (_hdl != null ) { _hdl(response); } }

Usando el wrapper Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Usando el wrapper Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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.

Usando el wrapper Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Referencias: http://devedge.netscape.com/viewsource/2003/xslt-js/

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

Frameworks AJAX ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],Framework Prototype

¿Por qué Prototype? ,[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Framework Prototype

Ejemplos con Prototype ,[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax con Prototype, por fin ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax con Prototype, por fin ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax con Prototype, por fin ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Script.aculo.us ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Script.aculo.us - Efectos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<script type="text/javascript" language="javascript"> Effect.Appear('element_id'); </script>

Script.aculo.us - Efectos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Script.aculo.us - Efectos ,[object Object],[object Object],[object Object]

Script.aculo.us - Controles ,[object Object],[object Object],[object Object],[object Object],[object Object]

Script.aculo.us - Útiles ,[object Object],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 ,[object Object],[object Object],[object Object],[object Object]

Ahora con CakePHP ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CakePHP y Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object]

CakePHP y Ajax ,[object Object],[object Object]

Conclusiones ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Teorías de conspiración (desvarios mentales propios) ,[object Object],[object Object],[object Object],[object Object]

Gracias por su atención Preguntas

Ajax

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Ajax

Similar to Ajax (20)

More from ousli07

More from ousli07 (20)

Recently uploaded

Recently uploaded (10)

Ajax