PDF de programación - AJAX

Programación en Internet 2009-2010

Departamento de Lenguajes y
Sistemas Informáticos

AJAXAJAX

Programación en Internet

Curso 2009-2010

Programación en Internet – Curso 2009-2010

Índice

• Introducción
• Definición y conceptos
• Definición y conceptos
• Como funciona
• Ventajas y desventajas
• El objeto XMLHttpRequest
• Ciclo de vida de una transferencia con

XMLHttpRequest

• Ejemplo
• Bibliografía
• Ejercicios

DLSI - Universidad de Alicante

1

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Introducción

• Arquitectura cliente-servidor

– El cliente solicita un servicio y el servidor lo provee.
El cliente solicita un servicio y el servidor lo provee
– La parte de cliente solo tiene la lógica de presentación y en algunos

casos un mínimo de lógica de negocio.

• Aplicaciones en entorno web:

– Cada interacción del usuario genera una transacción contra el

servidor.

,

g

g

– En algunos casos, según las carácterísticas de la aplicación, el

,
interface, etc. una pantalla HTML puede generar demasiadas
peticiones.
– Problemas:

p

• Esperas del cliente
• Errores en la transmisión

Programación en Internet – Curso 2009-2010

Introducción

• ¿Qué aporta AJAX?

– Interacción diferente con el servidor:

• Anticipo de transferencias con el servidor para disponer de los

datos más rápidamente. (interacción en background)

• Permitir al usuario poder hacer otras cosas en el cliente

mientras una transferencia está en curso (interacción
asíncrona)

• La aplicación web se apoya más en el cliente, al cual se le dota

• Se consigue una interacción en el cliente similar a las
a a as

de más lógica de negocio.
Se co s gue u a te acc ó e e c e te s
aplicaciones autónomas.

– Nueva filosofía:

• ¿Y el XML?

el cliente.

– Es el formato en el que se transmiten los datos el servidor y

• Usado en: Google Maps, Gmail, etc.

DLSI - Universidad de Alicante

2

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Definición y conceptos

• Asynchronous Javascript And XML

– XML y JavaScript asíncronos

• No es una nueva tecnología,

– sino un conjunto de tecnologías, el uso de las

cuales permite una nueva filosofía de desarrollo
de aplicaciones web.

• Combinación de HTML/XHTML CSS
• Combinación de HTML/XHTML, CSS,
Javascript, DOM, XML, XSLT, HTTP.
– Todas ellas son estándares abiertos, tecnologías
implantadas, difundidas y conocidas en Internet.

Programación en Internet – Curso 2009-2010

Definición y conceptos

• La filosofía que se presenta con AJAX es:

– Cargar y renderizar una página para luego

mantenerse en esa misma página mientras scripts
y rutinas van al servidor buscando, en
background, los datos que son usados para
actualizar la página solo re-dibujando la página y
mostrando u ocultando porciones de la misma.

DLSI - Universidad de Alicante

3

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Definición y conceptos

• Tecnologías usadas con Ajax:

– HTML/XHTML: Presentación del contenido
– DOM: Interacción en el cliente.
– JavaScript: Lenguaje empleado para programar el

motor Ajax.
• Recoger la interacción del usuario.
• Para realizar la comunicación con el servidor.
• Para cambiar el contenido de la pantalla del cliente.

• Se aporta un nuevo enfoque al desarrollo de
• Se aporta un nuevo enfoque al desarrollo de

aplicaciones web.
– Funcionamiento similar a las aplicaciones autónomas.
– Cambio del concepto de programación clásico.
– Reducción del tráfico que generan las aplicaciones web

en cuanto al número y tamañode las transacciones.

Programación en Internet – Curso 2009-2010

Como funciona

• Se introduce una nueva capa entre en cliente y el

servidor, llamada “Motor Ajax”
servidor, llamada Motor Ajax
– Se usa un objeto del DOM llamado XMLHttpRequest
– Por medio de este objeto se realiza la comunicación con el

– Permite obtener información del servidor y actualizar la

• La respuesta que se obtiene del servidor puede estar

servidor

interfaz de usuario

en varios formatos:
en varios formatos:
– Texto plano
– HTML
– XML
– JSON
– …

DLSI - Universidad de Alicante

4

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Como funciona

Programación en Internet – Curso 2009-2010

Como funciona

• La mayor parte del tráfico
se da al iniciar la
comunicación
comunicación
•Durante la interacción del
usuario se envía la mínima
cantidad de información posible
para agilizar la aplicación.
•La página no espera la
La página no espera la
respuesta del servidor.

•Se generan transacciones
asíncronas mientras la
aplicación continua
funcionando.

DLSI - Universidad de Alicante

5

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Ventajas

• Transacciones asíncronas, el usuario
no tiene que esperar después de una
petición.

é d

d

ti

• Menor cantidad de información.
• Tecnologías basadas en estándares

abiertos.

• Significa una aproximación a las

aplicaciones tradicionales en cuanto a
interactividad y velocidad de respuesta.

Programación en Internet – Curso 2009-2010

Desventajas

• Puede aumentar el número de peticiones

contra el servidor
contra el servidor.

• Existen incompatibilidades entre

navegadores.
– El objeto XMLHttpRequest no se invoca de la

misma forma en los navegadores.

• Pérdida de control de navegación.

– Los botones atrás y adelante del navegador dejan

de funcionar.

– No se puede crear un favorito (marcador) a una

página, porque siempre es la misma página.

DLSI - Universidad de Alicante

6

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

XMLHttpRequest

• Permite la comunicación asíncrona con el

servidor
servidor.

• En proceso de estandarización por el W3C:
– The XMLHttpRequest Object W3C Working Draft

15 April 2008:
• http://www.w3.org/TR/XMLHttpRequest/

Programación en Internet – Curso 2009-2010

XMLHttpRequest

• Métodos:
– abort()
abort()
– getAllResponseHeaders()
– getResponseHeader(etiqueta)
– open(metodo, url, asincrona, usuario,

password):
• Métodos: GET, POST, HEAD, POST o DELETE.
– send(contenido)
send(contenido)
– setRequestHeader(etiqueta, valor)

DLSI - Universidad de Alicante

7

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

XMLHttpRequest

• Propiedades:

– onreadystatechange: Asignación de manejador al evento

de cambio de estado.
de cambio de estado.

– readyState: Estado de la conexión

• 0: no inicializada
• 1: cargando
• 2: cargada
• 3: interactiva
4: completada
• 4: completada

– responseText: La respuesta en forma de texto plano.
– responseXML: La respuesta en formato XML.
– status: Código de respuesta del servidor.

• Códigos HTTP. 200: Transacción completada con éxito.

– statusText: Mensaje asociado a la respuesta.

Programación en Internet – Curso 2009-2010

Ciclo de vida de una transferencia

con XMLHttpRequest

• Se crea el objeto XMLHttpRequest
• Se le asigna un manejador del evento de cambio
• Se le asigna un manejador del evento de cambio

• Se invoca la petición en función de la interacción

• Al recibir un cambio de estado, se gestiona la

• Si la respuesta es correcta, se obtienen los datos

y se muestran al cliente.

de estado

del usuario

respuesta.

p

• Se debe vincular a algún objeto de la página, la invocación
de la petición al servidor, ya sea mediante un click, un link o
cualquier otro evento.

DLSI - Universidad de Alicante

8

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Creación del objeto XMLHttpRequest

• Segun el navegador se crea de dos formas:

– Internet Explorer:

peticion = new ActiveXObject("Microsoft.XMLHTTP");

– Otros navegadores:

peticion = new XMLHttpRequest();

• Código fuente independiente del navegador

if (window.XMLHttpRequest)

peticion = new XMLHttpRequest();

else if(window.ActiveXObject)

peticion = new ActiveXObject("Microsoft.XMLHTTP");

else {

}

alert("Su navegador no soporta AJAX");
return;

Programación en Internet – Curso 2009-2010

Creación del objeto XMLHttpRequest

• Otra forma, mediante excepciones:
try {
try {

peticion = new ActiveXObject("Msxml2.XMLHTTP");

peticion = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

try {

} catch (ee) {

try {

} catch(eee) {

}

}

}

peticion = new XMLHttpRequest();
peticion = new XMLHttpRequest();

alert("Su navegador no soporta AJAX");
return;

DLSI - Universidad de Alicante

9

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Asignar un manejador
• Se debe asignar una función que se

invoque cuando cambie el estado del objeto
XMLHttpRequest, es decir, cuando el
servidor responda a nuestra petición:

peticion.onreadystatechange = nombreDeLaFuncion;

Sin paréntesis, solo el nombre.

Programación en Internet – Curso 2009-2010

Invocar la petición

• Se debe especificar el tipo de petición, la URL que
deseamos invocar y si la transacción es asíncrona
deseamos invocar y si la transacción es asíncrona
o no.
– Si no es asíncrona, el navegador se bloquea hasta la

– La URL tiene que ser del mismo dominio que la página

peticion.open('GET','http://www.ua.es/ajax.php', true);
peticion.open( GET , http://www.ua.es/ajax.php , true);
• Despues se envia la transacción con la función

respuesta.

actual

send:

peticion.send(parámetros de la petición o null);

DLSI - Universidad de Alicante

10

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Gestión de la respuesta
• El manejador se invoca al recibir un cambio de

estado de la transacción.
estado de la transacción.

• 0: no inicializada
• 1: cargando
• 2: cargada
• 3: interactiva
• 4: completada

• Fragmento de código del manejador:
if (
4) { //fi
if (peticion.readyState == 4) { //fin

i i

d

if (peticion.status==200) { // todo OK

//procesaríamos la petición

}

} else {

}

// Todavía no está...

Programación en Internet