AJAX

Ejemplo

Prcticas

AJAX
Asynchronous JavaScript and XML Oscar Cubo Medina <ocubo@.upm.es>
Programacin Web en Servidor

INEM 2006/2007

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX

Ejemplo

Prcticas

Contenidos

Tecnologa AJAX Introduccin Objeto XMLHttpRequest Simple AJAX Code-Kit Lectura adicional Ejemplo prctico Pasos Requisitos

Diseo de la solucin Interfaz HTML AJAX cliente AJAX Servidor

3

Prcticas Prctica 1 Prctica 2 Prctica 3

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX

Ejemplo

Prcticas

Tecnologa AJAX Introduccin Objeto XMLHttpRequest Simple AJAX Code-Kit Lectura adicional Ejemplo prctico Prcticas

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Introduccin

Ejemplo

Prcticas

rase una vez...

AJAX surge por una necesidad: Outlook Web Access (MS Exchange Server 2000) Solucin: Remote Scripting (1998) Inclusin de un control ActiveX en IE [Hopmann(2007)] Biblioteca MSXML El trmino lo acua Jesse James Garrett en 20051 Muy vinculado a la Web 2.0 GMail Live mail Blinklist ...
1

Ajax: A New Approach to Web Applications [Garrett(2005)]

Programacin Web en Servidor

Oscar Cubo Medina AJAX

AJAX Introduccin

Ejemplo

Prcticas

Posibles usos
Cundo se utiliza? Cuando es necesario actualizar una parte de la pgina sin tener que recargarla completamente.

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Introduccin

Ejemplo

Prcticas

Posibles usos
Cundo se utiliza? Cuando es necesario actualizar una parte de la pgina sin tener que recargarla completamente.
Carga de detalles de un elemento en un listado

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Introduccin

Ejemplo

Prcticas

Posibles usos
Cundo se utiliza? Cuando es necesario actualizar una parte de la pgina sin tener que recargarla completamente.
Carga de detalles de un elemento en un listado Ejecucin de mltiples acciones (dar de alta + asociar)

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Introduccin

Ejemplo

Prcticas

Posibles usos
Cundo se utiliza? Cuando es necesario actualizar una parte de la pgina sin tener que recargarla completamente.
Carga de detalles de un elemento en un listado Ejecucin de mltiples acciones (dar de alta + asociar) Generacin de listas ordenadas

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Introduccin

Ejemplo

Prcticas

Posibles usos
Cundo se utiliza? Cuando es necesario actualizar una parte de la pgina sin tener que recargarla completamente.
Carga de detalles de un elemento en un listado Ejecucin de mltiples acciones (dar de alta + asociar) Generacin de listas ordenadas Votacin + actualizacin de resultados

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Introduccin

Ejemplo

Prcticas

Posibles usos
Cundo se utiliza? Cuando es necesario actualizar una parte de la pgina sin tener que recargarla completamente.
Carga de detalles de un elemento en un listado Ejecucin de mltiples acciones (dar de alta + asociar) Generacin de listas ordenadas Votacin + actualizacin de resultados ...?

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Introduccin

Ejemplo

Prcticas

Ventajas e inconvenientes
Ventajas
Mejor experiencia de

usuario
Recuperacin asncrona Interfaz de escritorio en

la web Menos ancho de banda Menos proceso en el

Inconvenientes Problemas de accesibilidad, compatibilidad, seguridad... Prdida de funcionalidades del navegador

Historial Favoritos o bookmarks

servidor
No precisa plugins

Ms peticiones al servidor Latencia de la red

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Introduccin

Ejemplo

Prcticas

Fundamentos

Uso combinado de un conjunto de tcnicas ya existentes

(X)HTML CSS Javascript DHTML DOM Objeto XMLHttpRequest

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

El objeto XMLHttpRequest
Permite realizar peticiones Web desde javascript Incluido originalmente slo en IE Actualmente soportado en la API de javascript

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

El objeto XMLHttpRequest
Permite realizar peticiones Web desde javascript Incluido originalmente slo en IE Actualmente soportado en la API de javascript

Problemas con codicacin Es necesario especicar la codicacin 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 AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Funciones I
Open
Permite abrir un canal de

comunicacin con el servidor

open ( mtodo, url, [asincrono], [usuario], [clave] )

Send Enva datos a travs de una conexin ya establecida

Oscar Cubo Medina AJAX

send (datos)

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Funciones II

Abort Permite cancelar una peticin en curso

abort ()

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Propiedades I

Respuesta responseText Texto devuelto por el servidor responseXML Equivalente a la anterior pero con formato DOM Control de operacin status Cdigo de respuesta del servidor (cdigo HTML) statusText Texto asociado al cdigo de respuesta

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Propiedades II
Estado de la peticin readyState Estado de la peticin onreadystatechange Funcin que se ejecuta al nalizar una peticin asncrona Cdigo 0 1 2 3 4 Signicado Sin inicializar Abierta conexin Enviada peticin Recibiendo datos Cargado (uninitialized ) (opened ) (sent ) (receiving ) (loaded )

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Funcionamiento

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Funcionamiento

new XmlHttpRequest

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Funcionamiento

new XmlHttpRequest

Open

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Funcionamiento

new XmlHttpRequest

Open

Send

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Funcionamiento

new XmlHttpRequest

Pe

Open

Send

n tici

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Funcionamiento

new XmlHttpRequest
u sp Re ta es

Pe

Open

Send

n tici

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Funcionamiento

new XmlHttpRequest
u sp Re ta es

Pe

Open

Send

n tici

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Funcionamiento

new XmlHttpRequest
u sp Re ta es

onreadystatechange

Pe

Open

Send

n tici

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Esquema de uso I

Creacin 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 AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Esquema de uso II

Peticin de informacin
// Funcin de finalizacin http.onreadystatechange = fn; // Abrir la conexin http.open("GET", "http://url/", true); // Enviar la peticin http.send(null);

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX XMLHttpRequest

Ejemplo

Prcticas

Esquema de uso III

Callback de recepcin
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 AJAX

Programacin Web en Servidor

AJAX SACK

Ejemplo

Prcticas

SACK
Simple AJAX Code-Kit

AJAX simplicado Recubre objeto XMLHttpRequest Control automtico 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 AJAX

Programacin Web en Servidor

AJAX SACK

Ejemplo

Prcticas

Esquema de uso
Peticin 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 peticin

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Referencias

Ejemplo

Prcticas

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 AJAX

Programacin Web en Servidor

AJAX Referencias

Ejemplo

Prcticas

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 AJAX

Programacin Web en Servidor

AJAX Referencias

Ejemplo

Prcticas

Tutoriales
Jos Manuel Alarcn. 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 AJAX

Programacin Web en Servidor

AJAX

Ejemplo

Prcticas

Tecnologa AJAX Ejemplo prctico Pasos Requisitos Diseo de la solucin Interfaz HTML AJAX cliente AJAX Servidor Prcticas

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Pasos

Ejemplo

Prcticas

Pasos a cumplimentar
Diseo 1 Denir requisitos
2 3 4

Estructura de directorios Estructura de la interfaz Identicar las operaciones AJAX

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Pasos

Ejemplo

Prcticas

Pasos a cumplimentar
Diseo 1 Denir requisitos
2 3 4

Estructura de directorios Estructura de la interfaz Identicar las operaciones AJAX

Ciclo de implementacin
1 2 3 4

Crear la estructura de interfaz Crear el objeto AJAX (sin operaciones) Implementar cada operacin por separado Pruebas
Programacin Web en Servidor

Oscar Cubo Medina AJAX

AJAX Requisitos

Ejemplo

Prcticas

Operaciones matemticas
Sumatorio, factorial y bonacci

Aplicacin que calcule operaciones matemticas.

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 2 Fibonacci Es la serie matemtica 1, 1, 2, 3, 5, 8, 13, 21, F (x) = F (x 1) + F (x 2)
Actualizacin en tiempo realTM
2

http://es.wikipedia.org/wiki/Sucesin_de_Fibonacci
Programacin Web en Servidor

Oscar Cubo Medina AJAX

AJAX Diseo

Ejemplo

Prcticas

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 AJAX

Programacin Web en Servidor

AJAX Diseo

Ejemplo

Prcticas

Estructura de la interfaz

#sumatorio #factorial #fibonacci

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Diseo

Ejemplo

Prcticas

Identicar las operaciones AJAX

3 controles a actualizar sumatorio factorial bonacci

4 operaciones diferentes Calcular sumatorio Calcular factorial Calcular bonacci Calcular todos

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX HTML (index.php)

Ejemplo

Prcticas

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 AJAX

Programacin Web en Servidor

AJAX HTML (index.php)

Ejemplo

Prcticas

Interfaz HTML II
Cabecera del documento
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AJAX - Operaciones matemticas</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 AJAX

Programacin Web en Servidor

AJAX HTML (index.php)

Ejemplo

Prcticas

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 AJAX

Programacin Web en Servidor

AJAX HTML (index.php)

Ejemplo

Prcticas

Interfaz HTML IV

Esquema de enlace AJAX

<span class="ajax" onclick="ajax.Operacion(1)">Operacin(1)</span>

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX HTML (index.php)

Ejemplo

Prcticas

Interfaz HTML V
Generacin 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 AJAX

Programacin Web en Servidor

AJAX AJAX cliente (ajax.js)

Ejemplo

Prcticas

Cdigo 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 funcin por cada operacin diferente this.Sumatorio = function(x) { ... } this.Factorial = function(x) { ... } this.Fibonacci = function(x) { ... } this.Todos = function(x) { ... } } // Ajax

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX AJAX cliente (ajax.js)

Ejemplo

Prcticas

Cdigo AJAX en cliente II

Ejemplo de mtodo
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 AJAX

Programacin Web en Servidor

AJAX AJAX cliente (ajax.js)

Ejemplo

Prcticas

Cdigo AJAX en cliente III

Operacin mltiple
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 AJAX

Programacin Web en Servidor

AJAX AJAX servidor (ajax.php)

Ejemplo

Prcticas

Cdigo AJAX en servidor I

Seleccin de operacin
switch($_POST[ajax]) { case sumatorio: ... case factorial: ... case fibonacci: ... default: // Error "Operacin desconocida"; } // switch

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX AJAX servidor (ajax.php)

Ejemplo

Prcticas

Cdigo 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 AJAX

Programacin Web en Servidor

AJAX AJAX servidor (ajax.php)

Ejemplo

Prcticas

Cdigo 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 AJAX

Programacin Web en Servidor

AJAX

Ejemplo

Prcticas

Tecnologa AJAX Ejemplo prctico Prcticas Prctica 1 Prctica 2 Prctica 3

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Prctica 1

Ejemplo

Prcticas

Votacin bsica

Sistema de votacin para el premio pulitzer Dispone de X artculos candidatos La votacin se realiza va Web Cada persona puede asignar de 0 a 5 puntos a cada candidato El candidato con ms puntos ganar el premio ;-) Se necesita actualizar la clasicacin en tiempo realTM

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Prctica 2

Ejemplo

Prcticas

Votando en Eurovisin

Sistema de votacin para eurovisin 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 votacin Gana el que ms votos tenga La clasicacin debe actualizarse en tiempo realTM

Oscar Cubo Medina AJAX

Programacin Web en Servidor

AJAX Prctica 3

Ejemplo

Prcticas

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 descripcin Cada tarea tiene 5 niveles de prioridad En el listado de tareas se muestra slo el nombre y, al seleccionar una tarea, se muestran sus detalles Es posible aadir/borrar tareas

Oscar Cubo Medina AJAX

Programacin Web en Servidor