AJAX - Asynchronous JavaScript and XML

AJAX Ejemplo Prácticas 

AJAX 

Asynchronous JavaScript and XML 

Oscar Cubo Medina 

Programación Web en Servidor 

INEM 2006/2007 

Oscar Cubo Medina 


Programación Web en Servidor


Contenidos 

1 Tecnología AJAX 

Introducción 

Objeto XMLHttpRequest 

Simple AJAX Code-Kit 

Lectura adicional 

2 Ejemplo práctico 

Pasos 

Requisitos 

Diseño de la solución 

Interfaz HTML 

AJAX cliente 

AJAX Servidor 

3 Prácticas 

Práctica 1 

Práctica 2 

Práctica 3 






Introducción 

Objeto XMLHttpRequest 


Lectura adicional 


3 Prácticas 





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 2005 1 

• Muy vinculado a la Web 2.0 

• GMail 

• Live mail 

• Blinklist 

• ... 

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



AJAX


Introducción 

Posibles usos 

¿Cuándo se utiliza 

Cuando es necesario actualizar una parte de la página sin 

tener que recargarla completamente. 





Introducción 

Posibles usos 




• Carga de detalles de un elemento en un listado 





Introducción 

Posibles usos 





• Ejecución de múltiples acciones (dar de alta + asociar) 





Introducción 

Posibles usos 






• Generación de listas ordenadas 





Introducción 

Posibles usos 







• Votación + actualización de resultados 





Introducción 

Posibles usos 







• Votación + actualización de resultados 

• ¿... 





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 funcionalidades 

del 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 





XMLHttpRequest 

El objeto XMLHttpRequest 

• Permite realizar peticiones Web desde javascript 

• Incluido originalmente sólo en IE 

• Actualmente soportado en la API de javascript 






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ón 

Es necesario especificar la codificación de todas las 

transferencias: 

header(’Content-Type: application/xhtml+xml; 

charset=ISO-8859-1’); 

Si no se indica nada se considera UTF-8. 






Funciones I 

Open 

• Permite abrir un canal de 

comunicación con el 

servidor 

open ( 

método, 

url, 

[asincrono], 

[usuario], 

[clave] 

) 

Send 

• Envía datos a través de 

una conexión ya 

establecida 

send (datos) 






Funciones II 

Abort 

• Permite cancelar una 

petición en curso 

abort () 






Propiedades I 

Respuesta 

responseText Texto devuelto por el servidor 

responseXML Equivalente a la anterior pero con formato DOM 

Control de operación 

status Código de respuesta del servidor (código HTML) 

statusText Texto asociado al código de respuesta 






Propiedades II 

Estado de la petición 

readyState Estado de la petición 

onreadystatechange Función que se ejecuta al finalizar una 

petició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) 






Funcionamiento 







new XmlHttpRequest 

0 








0 1 

Open 








0 Open 

1 Send 

2 








0 1 

Open 

Send 

2 

Petición 








Respuesta 

0 1 2 3 

Open 

Send 

Petición 








Respuesta 

0 1 2 3 4 

Open 

Send 

Petición 








onreadystatechange 

Respuesta 

0 1 2 3 4 

Open 

Send 

Petición 






Esquema de uso I 

Creación del objeto 

// ¿ Existe en la API 

if (window.XMLHttpRequest) { 

// Usar API 

http = new XMLHttpRequest(); 

} else { 

// Usar ActiveX (IE



Esquema de uso II 

Petición de información 

// Función de finalización 

http.onreadystatechange = fn; 

// Abrir la conexión 

http.open("GET", "http://url/", true); 

// Enviar la petición 

http.send(null); 






Esquema de uso III 

Callback de recepción 

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 

} 





SACK 

SACK 


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





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 





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. 





Referencias 

SACK (Simple Ajax Code-Kit) 

Gregory Wild-Smith. 

Twilightuniverse - simple ajax code kit, 2007. 

URL 

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





Referencias 

Tutoriales 

José Manuel Alarcón. 

Ajax – ¡hagamos un ejemplo!, 2007. 

URL http://geeks.ms/search/SearchResults.aspxq= 

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. 







Pasos 

Requisitos 

Diseño de la solución 

Interfaz HTML 

AJAX cliente 

AJAX Servidor 

3 Prácticas 





Pasos 

Pasos a cumplimentar 

Diseño 

1 Definir requisitos 

2 Estructura de directorios 

3 Estructura de la interfaz 

4 Identificar las operaciones AJAX 





Pasos 

Pasos a cumplimentar 

Diseño 

1 Definir requisitos 

2 Estructura de directorios 

3 Estructura de la interfaz 

4 Identificar las operaciones AJAX 

Ciclo de implementación 

1 Crear la estructura de interfaz 

2 Crear el objeto AJAX (sin operaciones) 

3 Implementar cada operación por separado 

4 Pruebas 





Requisitos 

Operaciones matemáticas 

Sumatorio, 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 + 1 

Factorial Producto de los valores de 1 a x 

x! = x · (x − 1)! = x · (x − 1) · (x − 2) · . . . · 2 · 1 

Fibonacci 2 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 real TM 

2 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 

• ... 





Diseño 

Estructura de la interfaz 

#sumatorio 

#factorial 

#fibonacci 





Diseño 

Identificar las operaciones AJAX 

• 3 controles a actualizar 

• sumatorio 

• factorial 

• fibonacci 

• 4 operaciones diferentes 

• Calcular sumatorio 

• Calcular factorial 

• Calcular fibonacci 

• Calcular todos 





HTML (index.php) 

Interfaz HTML I 

Tipo de documento 

 






Interfaz HTML II 

Cabecera del documento 

 

 

AJAX - Operaciones matemáticas 

 

 

 

 






Interfaz HTML III 

Estructura del documento 

 

 

Cabecera 

 

Izquierda 

Derecha 

 

Pie 

 

 






Interfaz HTML IV 

Esquema de enlace AJAX 

Operación(1) 






Interfaz HTML V 

Generación de enlaces 

for($i=0; $i


AJAX cliente (ajax.js) 

Código 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 función por cada operación diferente 

this.Sumatorio = function(x) { ... } 

this.Factorial = function(x) { ... } 

this.Fibonacci = function(x) { ... } 

this.Todos = function(x) { ... } 

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

} 






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






Código AJAX en servidor II 

Sumatorio / Factorial 

function sumatorio($x) { 

$suma = 0; 

for($i=1; $i



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







3 Prácticas 

Práctica 1 

Práctica 2 

Práctica 3 





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 cada 

candidato 

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

• Se necesita actualizar la clasificación en tiempo real TM 





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 5 

candidaturas 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 real TM 





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 - Asynchronous JavaScript and XML

Create successful ePaper yourself

Delete template?

Save as template?