AJAX - Asynchronous JavaScript and XMLlaurel.datsi.fi.upm.es/_media/docencia/cursos/pws/ajax.pdf · Simple AJAX Code-Kit Lectura adicional 2 Ejemplo práctico Pasos Requisitos Diseño

AJAX Ejemplo Prácticas

AJAXAsynchronous JavaScript and XML

Oscar Cubo Medina <[email protected]>

Programación Web en Servidor

INEM 2006/2007

Oscar Cubo Medina Programación Web en Servidor

AJAX


Contenidos

1 Tecnología AJAXIntroducciónObjeto XMLHttpRequestSimple AJAX Code-KitLectura adicional

2 Ejemplo prácticoPasosRequisitos

Diseño de la soluciónInterfaz HTMLAJAX clienteAJAX Servidor

3 PrácticasPráctica 1Práctica 2Práctica 3


AJAX


1 Tecnología AJAXIntroducciónObjeto XMLHttpRequestSimple AJAX Code-KitLectura adicional

2 Ejemplo práctico

3 Prácticas


AJAX


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


Introducción

Posibles usos

¿Cuándo se utiliza?Cuando es necesario actualizar una parte de la página sintener 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• ¿...?


AJAX


Introducción

Posibles usos


• 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• ¿...?


AJAX


Introducción

Posibles usos


• 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• ¿...?


AJAX


Introducción

Posibles usos


• 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• ¿...?


AJAX


Introducción

Posibles usos


• 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

• ¿...?


AJAX


Introducción

Posibles usos


• 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• ¿...?


AJAX


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 funcionalidadesdel navegador

• Historial• Favoritos o bookmarks

• Más peticiones al servidor• Latencia de la red


AJAX


Introducción

Fundamentos

• Uso combinado de un conjunto de técnicas ya existentes

• (X)HTML• CSS• Javascript

• DHTML• DOM• Objeto XMLHttpRequest


AJAX


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ónEs necesario especificar la codificación de todas lastransferencias:

header(’Content-Type: application/xhtml+xml;charset=ISO-8859-1’);

Si no se indica nada se considera UTF-8.


AJAX


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ónEs necesario especificar la codificación de todas lastransferencias:

header(’Content-Type: application/xhtml+xml;charset=ISO-8859-1’);

Si no se indica nada se considera UTF-8.


AJAX


XMLHttpRequest

Funciones I

Open• Permite abrir un canal de

comunicación con elservidor

open (método,url,[asincrono],[usuario],[clave]

)

Send• Envía datos a través de

una conexión yaestablecida

send (datos)


AJAX


XMLHttpRequest

Funciones II

Abort• Permite cancelar una

petición en cursoabort ()


AJAX


XMLHttpRequest

Propiedades I

RespuestaresponseText Texto devuelto por el servidorresponseXML Equivalente a la anterior pero con formato DOM

Control de operaciónstatus Código de respuesta del servidor (código HTML)

statusText Texto asociado al código de respuesta


AJAX


XMLHttpRequest

Propiedades II

Estado de la peticiónreadyState Estado de la petición

onreadystatechange Función que se ejecuta al finalizar unapetició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)


AJAX


XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

new XmlHttpRequest

Open0 1

new XmlHttpRequest

Open Send0 1 2

new XmlHttpRequest

Open SendPetición

0 1 2

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3 4

new XmlHttpRequest

Open Send

onreadystatechange

PeticiónRespuesta0 1 2 3 4


AJAX


XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

new XmlHttpRequest

Open0 1

new XmlHttpRequest

Open Send0 1 2

new XmlHttpRequest

Open SendPetición

0 1 2

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3 4

new XmlHttpRequest

Open Send

onreadystatechange



AJAX


XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

new XmlHttpRequest

Open0 1

new XmlHttpRequest

Open Send0 1 2

new XmlHttpRequest

Open SendPetición

0 1 2

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3 4

new XmlHttpRequest

Open Send

onreadystatechange



AJAX


XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

new XmlHttpRequest

Open0 1

new XmlHttpRequest

Open Send0 1 2

new XmlHttpRequest

Open SendPetición

0 1 2

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3 4

new XmlHttpRequest

Open Send

onreadystatechange



AJAX


XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

new XmlHttpRequest

Open0 1

new XmlHttpRequest

Open Send0 1 2

new XmlHttpRequest

Open SendPetición

0 1 2

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3 4

new XmlHttpRequest

Open Send

onreadystatechange



AJAX


XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

new XmlHttpRequest

Open0 1

new XmlHttpRequest

Open Send0 1 2

new XmlHttpRequest

Open SendPetición

0 1 2

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3 4

new XmlHttpRequest

Open Send

onreadystatechange



AJAX


XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

new XmlHttpRequest

Open0 1

new XmlHttpRequest

Open Send0 1 2

new XmlHttpRequest

Open SendPetición

0 1 2

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3 4

new XmlHttpRequest

Open Send

onreadystatechange



AJAX


XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

new XmlHttpRequest

Open0 1

new XmlHttpRequest

Open Send0 1 2

new XmlHttpRequest

Open SendPetición

0 1 2

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3

new XmlHttpRequest

Open SendPetición

Respuesta0 1 2 3 4

new XmlHttpRequest

Open Send

onreadystatechange



AJAX


XMLHttpRequest

Esquema de uso I

Creación del objeto

// ¿ Existe en la API ?if (window.XMLHttpRequest) {

// Usar APIhttp = new XMLHttpRequest();

} else {// Usar ActiveX (IE<7)http = new ActiveXObject ("Microsoft.XMLHTTP");

} // if


AJAX


XMLHttpRequest

Esquema de uso II

Petición de información

// Función de finalizaciónhttp.onreadystatechange = fn;

// Abrir la conexiónhttp.open("GET", "http://url/", true);

// Enviar la peticiónhttp.send(null);


AJAX


XMLHttpRequest

Esquema de uso III

Callback de recepción

function fn() {// Se comprueba el fin de la cargaif ( http.readyState == 4 ) {

if (http.status == 200) { // OK// Proceso de datos// Mostrar resultado

} else {alert(http.statusText); // Error

} // if} // if

}


AJAX


SACK

SACKSimple 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 ofcode to allow you to put AJAX into your webpageswith none of the fuss or overhead of other packages.Just AJAX, just simple.»


AJAX


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


AJAX


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.


AJAX

http://www.uberbin.net/archivos/internet/ajax-un-nuevo-acercamiento-a-aplicaciones-web.php

http://www.uberbin.net/archivos/internet/ajax-un-nuevo-acercamiento-a-aplicaciones-web.php

http://www.adaptivepath.com/publications/essays/archives/000385.php

http://www.adaptivepath.com/publications/essays/archives/000385.php

http://www.alexhopmann.com/xmlhttp.htm

http://es.wikipedia.org/wiki/AJAX


Referencias

SACK (Simple Ajax Code-Kit)

Gregory Wild-Smith.Twilightuniverse - simple ajax code kit, 2007.URLhttp://www.twilightuniverse.com/resources/code/sack/.


AJAX

http://www.twilightuniverse.com/resources/code/sack/


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.


AJAX

http://geeks.ms/search/SearchResults.aspx?q=ajax&u=2121&o=DateAscending

http://geeks.ms/search/SearchResults.aspx?q=ajax&u=2121&o=DateAscending

http://vyk1.spaces.live.com/Blog/cns!EBE3A761F939F926!1051.entry

http://vyk1.spaces.live.com/Blog/cns!EBE3A761F939F926!1051.entry

http://laurel.datsi.fi.upm.es/~ocubo/labs/tutoriales/ajax

http://laurel.datsi.fi.upm.es/~ocubo/labs/tutoriales/ajax


1 Tecnología AJAX

2 Ejemplo prácticoPasosRequisitosDiseño de la soluciónInterfaz HTMLAJAX clienteAJAX Servidor

3 Prácticas


AJAX


Pasos

Pasos a cumplimentar

Diseño1 Definir requisitos2 Estructura de directorios3 Estructura de la interfaz4 Identificar las operaciones AJAX

Ciclo de implementación

1 Crear la estructura de interfaz2 Crear el objeto AJAX (sin operaciones)3 Implementar cada operación por separado4 Pruebas


AJAX


Pasos

Pasos a cumplimentar

Diseño1 Definir requisitos2 Estructura de directorios3 Estructura de la interfaz4 Identificar las operaciones AJAX

Ciclo de implementación

1 Crear la estructura de interfaz2 Crear el objeto AJAX (sin operaciones)3 Implementar cada operación por separado4 Pruebas


AJAX


Requisitos

Operaciones matemáticasSumatorio, 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 + 1Factorial Producto de los valores de 1 a x

x! = x · (x − 1)! = x · (x − 1) · (x − 2) · . . . · 2 · 1Fibonacci2 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

2http://es.wikipedia.org/wiki/Sucesión_de_Fibonacci


AJAX

http://es.wikipedia.org/wiki/Sucesi�n_de_Fibonacci


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


AJAX


Diseño

Estructura de la interfaz

#sumatorio#factorial#fibonacci


AJAX


Diseño

Identificar las operaciones AJAX

• 3 controles a actualizar• sumatorio• factorial• fibonacci

• 4 operaciones diferentes• Calcular sumatorio• Calcular factorial• Calcular fibonacci• Calcular todos


AJAX


HTML (index.php)

Interfaz HTML I

Tipo de documento

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


AJAX


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>


AJAX


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>


AJAX


HTML (index.php)

Interfaz HTML IV

Esquema de enlace AJAX

<span class="ajax"onclick="ajax.Operacion(1)">Operación(1)</span>


AJAX


HTML (index.php)

Interfaz HTML V

Generación de enlaces

for($i=0; $i<16;$i++) {echo "<tr>"

."<td><spanonclick=\"ajax.Sum($i)\">sum($i)</span></td>"

."<td><spanonclick=\"ajax.Fac($i)\">fac($i)</span></td>"

."<td><spanonclick=\"ajax.Fib($i)\">fib($i)</span></td>"

."<td><spanonclick=\"ajax.All($i)\">all($i)</span></td>"

."</tr>";} // for


AJAX


AJAX cliente (ajax.js)

Código AJAX en cliente I

Estructura de la clase

function Ajax(file, txt) {// 1 objeto por cada id a actualizarthis.vSumatorio = new sack();this.vFactorial = new sack();this.vFibonacci = new sack();// 1 función por cada operación diferentethis.Sumatorio = function(x) { ... }this.Factorial = function(x) { ... }this.Fibonacci = function(x) { ... }this.Todos = function(x) { ... }

} // Ajax


AJAX



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

}


AJAX



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


AJAX


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


AJAX



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


AJAX



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


AJAX


1 Tecnología AJAX

2 Ejemplo práctico

3 PrácticasPráctica 1Práctica 2Práctica 3


AJAX


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 cadacandidato

• El candidato con más puntos ganará el premio ;-)

• Se necesita actualizar la clasificación en tiempo realTM


AJAX


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 5candidaturas 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


AJAX


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


AJAX

Documents

AJAX - Asynchronous JavaScript and XMLlaurel.datsi.fi.upm.es/_media/docencia/cursos/pws/ajax.pdf · Simple AJAX Code-Kit Lectura adicional 2 Ejemplo práctico Pasos Requisitos Diseño