PDF de programación - AJAX - Asynchronous JavaScript and XML

AJAX

Ejemplo

Prácticas

AJAX

Asynchronous JavaScript and XML

Oscar Cubo Medina <ocubo@fi.upm.es>

Programación Web en Servidor

INEM 2006/2007

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

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

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

1 Tecnología AJAX

Introducción
Objeto XMLHttpRequest
Simple AJAX Code-Kit
Lectura adicional

2 Ejemplo práctico

3 Prácticas

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

Introducción

Érase una vez...

Ejemplo

Prácticas

• 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

AJAX

Programación Web en Servidor

AJAX

Introducción

Posibles usos

Ejemplo

Prácticas

¿Cuándo se utiliza?
Cuando es necesario actualizar una parte de la página sin
tener que recargarla completamente.

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

Introducción

Posibles usos

Ejemplo

Prácticas

¿Cuándo se utiliza?
Cuando es necesario actualizar una parte de la página sin
tener que recargarla completamente.

• Carga de detalles de un elemento en un listado

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

Introducción

Posibles usos

Ejemplo

Prácticas

¿Cuándo se utiliza?
Cuando es necesario actualizar una parte de la página sin
tener que recargarla completamente.

• Carga de detalles de un elemento en un listado
• Ejecución de múltiples acciones (dar de alta + asociar)

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

Introducción

Posibles usos

Ejemplo

Prácticas

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

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

Introducción

Posibles usos

Ejemplo

Prácticas

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

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

Introducción

Posibles usos

Ejemplo

Prácticas

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

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

Introducción

Ejemplo

Prácticas

Ventajas e inconvenientes

• Mejor experiencia de

usuario

• Recuperación asíncrona
• Interfaz de escritorio en

Ventajas

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

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

Introducción

Fundamentos

Ejemplo

Prácticas

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

• (X)HTML
• CSS
• Javascript

• DHTML
• DOM
• Objeto XMLHttpRequest

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

XMLHttpRequest

Ejemplo

Prácticas

El objeto XMLHttpRequest

• Permite realizar peticiones Web desde javascript

• Incluido originalmente sólo en IE
• Actualmente soportado en la API de javascript

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

XMLHttpRequest

Ejemplo

Prácticas

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.

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

XMLHttpRequest

Funciones I

Open
• Permite abrir un canal de

comunicación con el
servidor

Send
• Envía datos a través de

una conexión ya
establecida

Oscar Cubo Medina

AJAX

Ejemplo

Prácticas

open (

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

)

send (datos)

Programación Web en Servidor

AJAX

XMLHttpRequest

Funciones II

Ejemplo

Prácticas

Abort
• Permite cancelar una

petición en curso

abort ()

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

XMLHttpRequest

Propiedades I

Ejemplo

Prácticas

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

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

XMLHttpRequest

Propiedades II

Ejemplo

Prácticas

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
1
2
3
4

Sin inicializar
Abierta conexión
Enviada petición
Recibiendo datos
Cargado

(uninitialized)

(opened)

(sent)

(receiving)
(loaded)

Oscar Cubo Medina

AJAX

Programación Web en Servidor

AJAX

XMLHttpRequest

Funcionamiento

Ejemplo

Prácticas

Oscar Cubo Medina

AJAX

Programación Web en Servidor

new XmlHttpRequest0new XmlHttpRequestOpen01new XmlHttpRequestOpenSend012new XmlHttpRequestOpenSendPetición012new XmlHttpRequestOpenSendPeticiónRespuesta0123new XmlHttpRequestOpenSendPeticiónRespuesta01234new XmlHttpRequestOpenSendonreadystatechangePeticiónRespuesta01234 AJAX

XMLHttpRequest

Funcionamiento

Ejemplo

Prácticas

Oscar Cubo Medina

AJAX

Programación Web en Servidor

new XmlHttpRequest0new XmlHttpRequestOpen01new XmlHttpRequestOpenSend012new XmlHttpRequestOpenSendPetición012new XmlHttpRequestOpenSendPeticiónRespuesta0123new XmlHttpRequestOpenSendPeticiónRespuesta01234new XmlHttpRequestOpenSendonreadystatechangePeticiónRespuesta01234 AJAX

XMLHttpRequest

Funcionamiento

Ejemplo

Prácticas

Oscar Cubo Medina

AJAX

Programación Web en Servidor

new XmlHttpRequest0new XmlHttpRequestOpen01new XmlHttpRequestOpenSend012new XmlHttpRequestOpenSendPetición012new XmlHttpRequestOpenSendPeticiónRespuesta0123new XmlHttpRequestOpenSendPeticiónRespuesta01234new XmlHttpRequestOpenSendonreadystatechangePeticiónRespuesta01234 AJAX

XMLHttpRequest

Funcionamiento

Ejemplo

Prácticas

Oscar Cubo Medina

AJAX

Programación Web en Servidor

new XmlHttpRequest0new XmlHttpRequestOpen01new XmlHttpRequestOpenSend012new XmlHttpRequestOpenSendPetición012new XmlHttpRequestOpenSendPeticiónRespuesta0123new XmlHttpRequestOpenSendPeticiónRespuesta01234new XmlHttpRequestOpenSendonreadystatechangePeticiónRespuesta01234 AJAX

XMLHttpRequest

Funcionamiento

Ejemplo

Prácticas

Oscar Cubo Medina

AJAX

Programación Web en Servidor

new XmlHttpRequest0new XmlHttpRequestOpen01new XmlHttpRequestOpenSend012new XmlHttpRequestOpenSendPetición012new XmlHttpRequestOpenSendPeticiónRespuesta0123new XmlHttpRequestOpenSendPeticiónRespuesta01234new XmlHttpRequestOpenSendonreadystatechangePeticiónRespuesta01234 AJAX

XMLHttpRequest

Funcionamiento

Ejemplo

Prácticas

Oscar Cubo Medina

AJAX

Programación Web en Servidor

new XmlHttpRequest0new XmlHttpRequestOpen01new XmlHttpRequestOpenSend012new XmlHttpRequestOpenSendPetición012new XmlHttpRequestOpenSendPeticiónRespuesta0123new XmlHttpRequestOpenSendPeticiónRespuesta01234new XmlHttpRequestOpenSendonreadystatechangePeticiónRespuesta01234 AJAX

XMLHttpRequest

Funcionamiento

Ejemplo

Prácticas

Oscar Cubo Medina

AJAX

Programación Web en Servidor

new XmlHttpRequest0new XmlHttpRequestOpen01new XmlHttpRequestOpenSend012new XmlHttpRequestOpenSendPetición012new XmlHttpRequestOpenSendPeticiónRespuesta0123new XmlHttpRequestOpenSendPeticiónRespuesta01234new XmlHttpRequestOpenSendonreadystatechangePeticiónRespuesta01234 AJAX

XMLHttpRequest

Funcionamiento

Ejemplo

Prácticas

Oscar Cubo Medina

AJAX

Programación Web en Servidor

new XmlHttpRequest0new XmlHttpRequestOpen01new XmlHttpRequestOpenSend012new XmlHttpRequestOpenSendPetición012new XmlHttpRequestOpenSendPeticiónRespuesta0123new XmlHttpRequestOpenSendPeticiónRespuesta01234new XmlHttpRequestOpenSendonreadystatechangePeticiónRespuesta01234 AJAX

XMLHttpRequest

Esquema de uso I

Ejemplo

Prácticas

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

Programación Web en Servidor

AJAX

XMLHttpRequest

Esquema de uso II

Ejemplo

Prácticas

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

Oscar Cubo Medina

AJAX

Programación Web en Servidor

Ejemplo

Prácticas

AJAX

XMLHttpRequest

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

}

Oscar Cubo