AJAX - Asynchronous JavaScript and XML
AJAX - Asynchronous JavaScript and XML
AJAX - Asynchronous JavaScript and XML
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>AJAX</strong><br />
<strong>Asynchronous</strong> <strong>JavaScript</strong> <strong>and</strong> <strong>XML</strong><br />
Oscar Cubo Medina <br />
Programación Web en Servidor<br />
INEM 2006/2007<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Contenidos<br />
1 Tecnología <strong>AJAX</strong><br />
Introducción<br />
Objeto <strong>XML</strong>HttpRequest<br />
Simple <strong>AJAX</strong> Code-Kit<br />
Lectura adicional<br />
2 Ejemplo práctico<br />
Pasos<br />
Requisitos<br />
Diseño de la solución<br />
Interfaz HTML<br />
<strong>AJAX</strong> cliente<br />
<strong>AJAX</strong> Servidor<br />
3 Prácticas<br />
Práctica 1<br />
Práctica 2<br />
Práctica 3<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
1 Tecnología <strong>AJAX</strong><br />
Introducción<br />
Objeto <strong>XML</strong>HttpRequest<br />
Simple <strong>AJAX</strong> Code-Kit<br />
Lectura adicional<br />
2 Ejemplo práctico<br />
3 Prácticas<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Introducción<br />
Érase una vez...<br />
• <strong>AJAX</strong> surge por una necesidad:<br />
• Outlook Web Access (MS Exchange Server 2000)<br />
• Solución: Remote Scripting (1998)<br />
• Inclusión de un control ActiveX en IE [Hopmann(2007)]<br />
• Biblioteca MS<strong>XML</strong><br />
• El término lo acuña Jesse James Garrett en 2005 1<br />
• Muy vinculado a la Web 2.0<br />
• GMail<br />
• Live mail<br />
• Blinklist<br />
• ...<br />
1 Ajax: A New Approach to Web Applications [Garrett(2005)]<br />
Oscar Cubo Medina<br />
Programación Web en Servidor<br />
<strong>AJAX</strong>
<strong>AJAX</strong> Ejemplo Prácticas<br />
Introducción<br />
Posibles usos<br />
¿Cuándo se utiliza<br />
Cu<strong>and</strong>o es necesario actualizar una parte de la página sin<br />
tener que recargarla completamente.<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Introducción<br />
Posibles usos<br />
¿Cuándo se utiliza<br />
Cu<strong>and</strong>o es necesario actualizar una parte de la página sin<br />
tener que recargarla completamente.<br />
• Carga de detalles de un elemento en un listado<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Introducción<br />
Posibles usos<br />
¿Cuándo se utiliza<br />
Cu<strong>and</strong>o es necesario actualizar una parte de la página sin<br />
tener que recargarla completamente.<br />
• Carga de detalles de un elemento en un listado<br />
• Ejecución de múltiples acciones (dar de alta + asociar)<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Introducción<br />
Posibles usos<br />
¿Cuándo se utiliza<br />
Cu<strong>and</strong>o es necesario actualizar una parte de la página sin<br />
tener que recargarla completamente.<br />
• Carga de detalles de un elemento en un listado<br />
• Ejecución de múltiples acciones (dar de alta + asociar)<br />
• Generación de listas ordenadas<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Introducción<br />
Posibles usos<br />
¿Cuándo se utiliza<br />
Cu<strong>and</strong>o es necesario actualizar una parte de la página sin<br />
tener que recargarla completamente.<br />
• Carga de detalles de un elemento en un listado<br />
• Ejecución de múltiples acciones (dar de alta + asociar)<br />
• Generación de listas ordenadas<br />
• Votación + actualización de resultados<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Introducción<br />
Posibles usos<br />
¿Cuándo se utiliza<br />
Cu<strong>and</strong>o es necesario actualizar una parte de la página sin<br />
tener que recargarla completamente.<br />
• Carga de detalles de un elemento en un listado<br />
• Ejecución de múltiples acciones (dar de alta + asociar)<br />
• Generación de listas ordenadas<br />
• Votación + actualización de resultados<br />
• ¿...<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Introducción<br />
Ventajas e inconvenientes<br />
Ventajas<br />
• Mejor experiencia de<br />
usuario<br />
• Recuperación asíncrona<br />
• Interfaz de escritorio en<br />
la web<br />
• Menos ancho de b<strong>and</strong>a<br />
• Menos proceso en el<br />
servidor<br />
• No precisa plugins<br />
Inconvenientes<br />
• Problemas de<br />
accesibilidad,<br />
compatibilidad,<br />
seguridad...<br />
• Pérdida de funcionalidades<br />
del navegador<br />
• Historial<br />
• Favoritos o bookmarks<br />
• Más peticiones al servidor<br />
• Latencia de la red<br />
Oscar Cubo Medina<br />
Programación Web en Servidor<br />
<strong>AJAX</strong>
<strong>AJAX</strong> Ejemplo Prácticas<br />
Introducción<br />
Fundamentos<br />
• Uso combinado de un conjunto de técnicas ya existentes<br />
• (X)HTML<br />
• CSS<br />
• Javascript<br />
• DHTML<br />
• DOM<br />
• Objeto <strong>XML</strong>HttpRequest<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
El objeto <strong>XML</strong>HttpRequest<br />
• Permite realizar peticiones Web desde javascript<br />
• Incluido originalmente sólo en IE<br />
• Actualmente soportado en la API de javascript<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
El objeto <strong>XML</strong>HttpRequest<br />
• Permite realizar peticiones Web desde javascript<br />
• Incluido originalmente sólo en IE<br />
• Actualmente soportado en la API de javascript<br />
Problemas con codificación<br />
Es necesario especificar la codificación de todas las<br />
transferencias:<br />
header(’Content-Type: application/xhtml+xml;<br />
charset=ISO-8859-1’);<br />
Si no se indica nada se considera UTF-8.<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Funciones I<br />
Open<br />
• Permite abrir un canal de<br />
comunicación con el<br />
servidor<br />
open (<br />
método,<br />
url,<br />
[asincrono],<br />
[usuario],<br />
[clave]<br />
)<br />
Send<br />
• Envía datos a través de<br />
una conexión ya<br />
establecida<br />
send (datos)<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Funciones II<br />
Abort<br />
• Permite cancelar una<br />
petición en curso<br />
abort ()<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Propiedades I<br />
Respuesta<br />
responseText Texto devuelto por el servidor<br />
response<strong>XML</strong> Equivalente a la anterior pero con formato DOM<br />
Control de operación<br />
status Código de respuesta del servidor (código HTML)<br />
statusText Texto asociado al código de respuesta<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Propiedades II<br />
Estado de la petición<br />
readyState Estado de la petición<br />
onreadystatechange Función que se ejecuta al finalizar una<br />
petición asíncrona<br />
Código<br />
Significado<br />
0 Sin inicializar (uninitialized)<br />
1 Abierta conexión (opened)<br />
2 Enviada petición (sent)<br />
3 Recibiendo datos (receiving)<br />
4 Cargado (loaded)<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Funcionamiento<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Funcionamiento<br />
new XmlHttpRequest<br />
0<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Funcionamiento<br />
new XmlHttpRequest<br />
0 1<br />
Open<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Funcionamiento<br />
new XmlHttpRequest<br />
0 Open<br />
1 Send<br />
2<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Funcionamiento<br />
new XmlHttpRequest<br />
0 1<br />
Open<br />
Send<br />
2<br />
Petición<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Funcionamiento<br />
new XmlHttpRequest<br />
Respuesta<br />
0 1 2 3<br />
Open<br />
Send<br />
Petición<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Funcionamiento<br />
new XmlHttpRequest<br />
Respuesta<br />
0 1 2 3 4<br />
Open<br />
Send<br />
Petición<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Funcionamiento<br />
new XmlHttpRequest<br />
onreadystatechange<br />
Respuesta<br />
0 1 2 3 4<br />
Open<br />
Send<br />
Petición<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Esquema de uso I<br />
Creación del objeto<br />
// ¿ Existe en la API <br />
if (window.<strong>XML</strong>HttpRequest) {<br />
// Usar API<br />
http = new <strong>XML</strong>HttpRequest();<br />
} else {<br />
// Usar ActiveX (IE
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Esquema de uso II<br />
Petición de información<br />
// Función de finalización<br />
http.onreadystatechange = fn;<br />
// Abrir la conexión<br />
http.open("GET", "http://url/", true);<br />
// Enviar la petición<br />
http.send(null);<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>XML</strong>HttpRequest<br />
Esquema de uso III<br />
Callback de recepción<br />
function fn() {<br />
// Se comprueba el fin de la carga<br />
if ( http.readyState == 4 ) {<br />
if (http.status == 200) { // OK<br />
// Proceso de datos<br />
// Mostrar resultado<br />
} else {<br />
alert(http.statusText); // Error<br />
} // if<br />
} // if<br />
}<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
SACK<br />
SACK<br />
Simple <strong>AJAX</strong> Code-Kit<br />
• <strong>AJAX</strong> simplificado<br />
• Recubre objeto <strong>XML</strong>HttpRequest<br />
• Control automático y transparente<br />
• Enteramente javascript<br />
• Poco peso<br />
«SACK is exactly what it says it is: A simple set of<br />
code to allow you to put <strong>AJAX</strong> into your webpages<br />
with none of the fuss or overhead of other packages.<br />
Just <strong>AJAX</strong>, just simple.»<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
SACK<br />
Esquema de uso<br />
Petición <strong>AJAX</strong> con SACK<br />
document.getElementById(’id’).innerHTML =<br />
"Actualiz<strong>and</strong>o";<br />
ajax = new sack();<br />
ajax.reset();<br />
ajax.element = ’id’;<br />
ajax.requestFile = ’http://url/fichero’;<br />
ajax.method = ’POST’;<br />
ajax.setVar(’id’, ’productos’);<br />
ajax.run<strong>AJAX</strong>(); // Ejecutar la petición<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Referencias<br />
<strong>AJAX</strong> (<strong>Asynchronous</strong> <strong>JavaScript</strong> <strong>and</strong> <strong>XML</strong>)<br />
Mariano Amartino.<br />
<strong>AJAX</strong> un nuevo acercamiento a aplicaciones web, 2005.<br />
URL http://www.uberbin.net/archivos/internet/<br />
ajax-un-nuevo-acercamiento-a-aplicaciones-web.php.<br />
Jesse James Garrett.<br />
Ajax: A new approach to web applications, 2005.<br />
URL http://www.adaptivepath.com/publications/essays/<br />
archives/000385.php.<br />
Alex Hopmann.<br />
The story of <strong>XML</strong>HTTP, 2007.<br />
URL http://www.alexhopmann.com/xmlhttp.htm.<br />
Wikipedia.<br />
<strong>AJAX</strong> — Wikipedia, La enciclopedia libre, 2007.<br />
URL http://es.wikipedia.org/wiki/<strong>AJAX</strong>.<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Referencias<br />
SACK (Simple Ajax Code-Kit)<br />
Gregory Wild-Smith.<br />
Twilightuniverse - simple ajax code kit, 2007.<br />
URL<br />
http://www.twilightuniverse.com/resources/code/sack/.<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Referencias<br />
Tutoriales<br />
José Manuel Alarcón.<br />
Ajax – ¡hagamos un ejemplo!, 2007.<br />
URL http://geeks.ms/search/SearchResults.aspxq=<br />
ajax&u=2121&o=DateAscending.<br />
AsH.<br />
Ajax tutorials, 2007.<br />
URL http://vyk1.spaces.live.com/Blog/cns!<br />
EBE3A761F939F926!1051.entry.<br />
Oscar Cubo Medina.<br />
Tutorial de ajax, 2007.<br />
URL http:<br />
//laurel.datsi.fi.upm.es/~ocubo/labs/tutoriales/ajax.<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
1 Tecnología <strong>AJAX</strong><br />
2 Ejemplo práctico<br />
Pasos<br />
Requisitos<br />
Diseño de la solución<br />
Interfaz HTML<br />
<strong>AJAX</strong> cliente<br />
<strong>AJAX</strong> Servidor<br />
3 Prácticas<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Pasos<br />
Pasos a cumplimentar<br />
Diseño<br />
1 Definir requisitos<br />
2 Estructura de directorios<br />
3 Estructura de la interfaz<br />
4 Identificar las operaciones <strong>AJAX</strong><br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Pasos<br />
Pasos a cumplimentar<br />
Diseño<br />
1 Definir requisitos<br />
2 Estructura de directorios<br />
3 Estructura de la interfaz<br />
4 Identificar las operaciones <strong>AJAX</strong><br />
Ciclo de implementación<br />
1 Crear la estructura de interfaz<br />
2 Crear el objeto <strong>AJAX</strong> (sin operaciones)<br />
3 Implementar cada operación por separado<br />
4 Pruebas<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Requisitos<br />
Operaciones matemáticas<br />
Sumatorio, factorial y fibonacci<br />
• Aplicación que calcule operaciones matemáticas.<br />
Sumatorio Suma de los valores de 1 a x<br />
∑ x = x + (x − 1) + (x − 2) + · · · + 2 + 1<br />
Factorial Producto de los valores de 1 a x<br />
x! = x · (x − 1)! = x · (x − 1) · (x − 2) · . . . · 2 · 1<br />
Fibonacci 2 Es la serie matemática<br />
1, 1, 2, 3, 5, 8, 13, 21, · · ·<br />
F (x) = F (x − 1) + F (x − 2)<br />
• Actualización en tiempo real TM<br />
2 http://es.wikipedia.org/wiki/Sucesión_de_Fibonacci<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Diseño<br />
Estructura de directorios<br />
• Proyecto<br />
• index.php<br />
• ajax.php<br />
• lib / includes<br />
• operaciones.php<br />
• ...<br />
• scripts<br />
• tw-sack.js<br />
• ajax.js<br />
• ...<br />
• tpl<br />
• style.css<br />
• img1.jpg<br />
• img2.png<br />
• ...<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Diseño<br />
Estructura de la interfaz<br />
#sumatorio<br />
#factorial<br />
#fibonacci<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Diseño<br />
Identificar las operaciones <strong>AJAX</strong><br />
• 3 controles a actualizar<br />
• sumatorio<br />
• factorial<br />
• fibonacci<br />
• 4 operaciones diferentes<br />
• Calcular sumatorio<br />
• Calcular factorial<br />
• Calcular fibonacci<br />
• Calcular todos<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
HTML (index.php)<br />
Interfaz HTML I<br />
Tipo de documento<br />
<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
HTML (index.php)<br />
Interfaz HTML II<br />
Cabecera del documento<br />
<br />
<br />
<strong>AJAX</strong> - Operaciones matemáticas<br />
<br />
<br />
<br />
<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
HTML (index.php)<br />
Interfaz HTML III<br />
Estructura del documento<br />
<br />
<br />
Cabecera<br />
<br />
Izquierda<br />
Derecha<br />
<br />
Pie<br />
<br />
<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
HTML (index.php)<br />
Interfaz HTML IV<br />
Esquema de enlace <strong>AJAX</strong><br />
Operación(1)<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
HTML (index.php)<br />
Interfaz HTML V<br />
Generación de enlaces<br />
for($i=0; $i
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>AJAX</strong> cliente (ajax.js)<br />
Código <strong>AJAX</strong> en cliente I<br />
Estructura de la clase<br />
function Ajax(file, txt) {<br />
// 1 objeto por cada id a actualizar<br />
this.vSumatorio = new sack();<br />
this.vFactorial = new sack();<br />
this.vFibonacci = new sack();<br />
// 1 función por cada operación diferente<br />
this.Sumatorio = function(x) { ... }<br />
this.Factorial = function(x) { ... }<br />
this.Fibonacci = function(x) { ... }<br />
this.Todos = function(x) { ... }<br />
} // Ajax<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>AJAX</strong> cliente (ajax.js)<br />
Código <strong>AJAX</strong> en cliente II<br />
Ejemplo de método<br />
this.Sumatorio = function(x) {<br />
this.vSumatorio.reset();<br />
this.vSumatorio.element = ’sumatorio’;<br />
document.getElementById(’id’).innerHTML = txt;<br />
this.vSumatorio.requestFile = file;<br />
this.vSumatorio.method = ’POST’;<br />
this.vSumatorio.setVar(’ajax’, ’sumatorio’);<br />
this.vSumatorio.setVar(’x’, x);<br />
this.vSumatorio.run<strong>AJAX</strong>();<br />
}<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>AJAX</strong> cliente (ajax.js)<br />
Código <strong>AJAX</strong> en cliente III<br />
Operación múltiple<br />
this.Todos = function(x) {<br />
this.Sumatorio(x);<br />
this.Factorial(x);<br />
this.Fibonacci(x);<br />
}<br />
Crear la clase<br />
var ajax = new Ajax(’ajax.php’, ’Calcul<strong>and</strong>o...’);<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>AJAX</strong> servidor (ajax.php)<br />
Código <strong>AJAX</strong> en servidor I<br />
Selección de operación<br />
switch($_POST[’ajax’]) {<br />
case ’sumatorio’:<br />
...<br />
case ’factorial’:<br />
...<br />
case ’fibonacci’:<br />
...<br />
default:<br />
// Error "Operación desconocida";<br />
} // switch<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>AJAX</strong> servidor (ajax.php)<br />
Código <strong>AJAX</strong> en servidor II<br />
Sumatorio / Factorial<br />
function sumatorio($x) {<br />
$suma = 0;<br />
for($i=1; $i
<strong>AJAX</strong> Ejemplo Prácticas<br />
<strong>AJAX</strong> servidor (ajax.php)<br />
Código <strong>AJAX</strong> en servidor III<br />
Fibonacci<br />
function fibonacci($x) {<br />
if ($x < 2) return 1;<br />
}<br />
return ( fibonacci($x-1) + fibonacci($x-2) );<br />
$res = fibonacci($_POST[’x’]);<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
1 Tecnología <strong>AJAX</strong><br />
2 Ejemplo práctico<br />
3 Prácticas<br />
Práctica 1<br />
Práctica 2<br />
Práctica 3<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Práctica 1<br />
Votación básica<br />
• Sistema de votación para el premio pulitzer<br />
• Dispone de X artículos c<strong>and</strong>idatos<br />
• La votación se realiza vía Web<br />
• Cada persona puede asignar de 0 a 5 puntos a cada<br />
c<strong>and</strong>idato<br />
• El c<strong>and</strong>idato con más puntos ganará el premio ;-)<br />
• Se necesita actualizar la clasificación en tiempo real TM<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Práctica 2<br />
Vot<strong>and</strong>o en Eurovisión<br />
• Sistema de votación para eurovisión<br />
• Disponemos de X canciones c<strong>and</strong>idatas<br />
• Cada usuario puede otorgar 5,4,3,2 y 1 votos a 5<br />
c<strong>and</strong>idaturas diferentes<br />
• Cu<strong>and</strong>o se acaba la serie de 5 se inicia una nueva votación<br />
• Gana el que más votos tenga<br />
• La clasificación debe actualizarse en tiempo real TM<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor
<strong>AJAX</strong> Ejemplo Prácticas<br />
Práctica 3<br />
Lista TO-DO<br />
• Gestor de tareas a realizar<br />
• Dispone de un listado de tareas ordenado por prioridad.<br />
• Cada tarea se compone de un nombre y una descripción<br />
• Cada tarea tiene 5 niveles de prioridad<br />
• En el listado de tareas se muestra sólo el nombre y, al<br />
seleccionar una tarea, se muestran sus detalles<br />
• Es posible añadir/borrar tareas<br />
Oscar Cubo Medina<br />
<strong>AJAX</strong><br />
Programación Web en Servidor