AJAX - Asynchronous JavaScript and XML

97 downloads 224 Views 1MB Size Report
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

Ejemplo

Prácticas

AJAX Asynchronous JavaScript and XML Oscar Cubo Medina Programación Web en Servidor

INEM 2006/2007

Oscar Cubo Medina AJAX

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

Contenidos

1

2

Tecnología AJAX Introducción Objeto XMLHttpRequest Simple AJAX Code-Kit Lectura adicional Ejemplo práctico Pasos Requisitos

Oscar Cubo Medina AJAX

Diseño de la solución Interfaz HTML AJAX cliente AJAX Servidor 3

Prácticas Práctica 1 Práctica 2 Práctica 3

Programación Web en Servidor

AJAX

Ejemplo

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

Prácticas

Programación Web en Servidor

AJAX

Ejemplo

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 20051 • Muy vinculado a la Web 2.0 • GMail • Live mail • Blinklist • ... 1

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

Oscar Cubo Medina AJAX

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

Introducción

Posibles usos ¿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

Ejemplo

Prácticas

Introducción

Posibles usos ¿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

Ejemplo

Prácticas

Introducción

Posibles usos ¿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

Ejemplo

Prácticas

Introducción

Posibles usos ¿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

Ejemplo

Prácticas

Introducción

Posibles usos ¿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

Ejemplo

Prácticas

Introducción

Posibles usos ¿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

Ejemplo

Prácticas

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

Oscar Cubo Medina AJAX

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

Introducción

Fundamentos

• Uso combinado de un conjunto de técnicas ya existentes • (X)HTML • CSS • Javascript

Oscar Cubo Medina AJAX

• DHTML • DOM • Objeto XMLHttpRequest

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

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

Ejemplo

Prácticas

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

Ejemplo

Prácticas

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

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

send (datos)

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

Funciones II

Abort • Permite cancelar una petición en curso

Oscar Cubo Medina AJAX

abort ()

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

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

Oscar Cubo Medina AJAX

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

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

Oscar Cubo Medina AJAX

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

(uninitialized) (opened) (sent) (receiving) (loaded)

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

Funcionamiento

Oscar Cubo Medina AJAX

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

Oscar Cubo Medina AJAX

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

Oscar Cubo Medina AJAX

Open

1

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

Funcionamiento

new XmlHttpRequest

0

Oscar Cubo Medina AJAX

Open

1

Send

2

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

Funcionamiento

new XmlHttpRequest

AJAX

1

Send

2

n tició

Oscar Cubo Medina

Open

Pe

0

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

Funcionamiento

new XmlHttpRequest

2

n tició

Send

ta es

AJAX

1

Pe

Oscar Cubo Medina

Open

u sp Re

0

3

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

Funcionamiento

new XmlHttpRequest

2

n tició

Send

ta es

AJAX

1

Pe

Oscar Cubo Medina

Open

u sp Re

0

3

4

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

Funcionamiento

new XmlHttpRequest

2

n tició

Send

ta es

AJAX

1

Pe

Oscar Cubo Medina

Open

u sp Re

0

onreadystatechange

3

4

Programación Web en Servidor

AJAX

Ejemplo

Prácticas

XMLHttpRequest

Esquema de uso I

Creación del objeto // ¿ Existe en la API ? if (window.XMLHttpRequest) { // Usar API http = new XMLHttpRequest(); } else { // Usar ActiveX (IE