PDF de programación - AJAX: Asynchronous JavaScript and XML (AJAX)

Universidad de Deusto
. . . .

ESIDE

AJAX: Asynchronous
JavaScript and XML (AJAX)

Dr. Diego Lz. de Ipiña Gz. de Artaza

http://paginaspersonales.deusto.es/dipina

[email protected]

Universidad de Deusto
. . . .

ESIDE

Contenidos

Introducción a AJAX
Análisis de sus componentes:

XHTML y CSS
JavaScript
DOM y XSLT

Hola mundo en AJAX
Frameworks AJAX
Ejemplos avanzados
Conclusión

1

Universidad de Deusto
. . . .

ESIDE

Concepto AJAX

AJAX (Asynchronous Javascript and XML) es una técnica de

desarrollo web que genera aplicaciones web interactivas
combinando:
XHTML y CSS para la presentación de información
Document Object Model (DOM) para visualizar dinámicamente e

interactuar con la información presentada

XML, XSLT para intercambiar y manipular datos

JSON y JSON-RPC pueden ser alternativas a XML/XSLT

XMLHttpRequest para recuperar datos asíncronamente
Javascript como nexo de unión de todas estas tecnologías



AJAX es un patrón de diseño que propone un nuevo modelo

de interacción Web combinando las tecnologías anteriores

Los navegadores que soportan las tecnologías mencionadas son

las plataformas en las que se ejecutan las aplicaciones AJAX
(Firefox, Iexplorer, Opera, Konqueror y Safari)

Universidad de Deusto
. . . .

ESIDE

¿Por qué AJAX?

Las aplicaciones web proliferan debido a su simplicidad,

pero:
Ofrecen una menor interactividad y usabilidad en comparación

con las aplicaciones desktop.

La interacción del usuario con una aplicación web se interrumpe

cada vez que se necesita algo del servidor

Varias tecnologías han sido diseñadas para resolver este

problema:
Java Applets, FLASH

¡AJAX es una nueva solución!

Término acuñado por Jesse James Garrett en

http://www.adaptivepath.com/publications/essays/archives/0003
85.php

No requiere plugins o capacidades específicas de ciertos

navegadores.

¿En competición con Smart Clients de MicroSoft?

2

Universidad de Deusto
. . . .

ESIDE

DTML y AJAX, ¿lo mismo?

DTML (Dynamic HTML) técnica de desarrollo

de webs interactivas combinando HTML,
client-side scripting con JavaScript y el
lenguaje de definición de estilos (CSS)
Realmente AJAX es un refinamiento de DTML

Al igual que en AJAX el principal problema de

DTML es el diferente soporte de estas
tecnologías en los navegadores y los
diferentes tamaños de pantalla de usuarios
El mismo DOM (Document Object Model) es

soportado por las últimas versiones de los
navegadores

Universidad de Deusto
. . . .

ESIDE

Características AJAX

Las aplicaciones son más interactivas, responden a las

interacciones del usuario más rápidamente, al estilo desktop
Estas aplicaciones tienen un lookandfeelmuy similar a las

aplicaciones de sobremesa tradicionales sin depender de plug-
ins o características específicas de los navegadores

Se reduce el tamaño de la información intercambiada

Muchas micro-peticiones, pero el flujo de datos global es inferior

Se libera de procesamiento a la parte servidora (se realiza en la

parte cliente)

completa

AJAX actualiza porciones de la página en vez de la página

Es necesario asegurarse que una aplicación AJAX funciona en

todo navegador, lo mismo que en DHTML

3

Universidad de Deusto
. . . .

ESIDE AJAX vs. Aplicaciones Web

Tradicionales

Las aplicaciones web tradicionales:

Requieren que el usuario rellene formularios y haga un POST

de los mismos a un servidor web

El servidor web procesa los datos enviados y genera un nueva

página web en consecuencia

Mientras el servidor realiza cierto procesamiento – recupera

datos, realiza cálculos – para generar una página, el usuario ha
de esperar

Aparte de los datos de la aplicación la información de

formateo en XHTML debe ser transmitida

En ocasiones el HTML de una página a la siguiente varía muy

ligeramente.

AJAX solamente envía peticiones a los servidores vía

HTTP y procesa la información recuperada
(únicamente la necesitada) mediante JavaScript

Universidad de Deusto
. . . .

ESIDE AJAX vs. Aplicaciones Web

Tradicionales

Navegador Cliente

Interfaz de Usuario

Petición HTTP

Transporte http(s)

Datos HTML + CSS

Navegador Cliente

Interfaz de Usuario

Llamada JavaScript

Datos HTML+CSS

Módulo (Motor) Ajax

Petición HTTP

Transporte http(s)

Datos XML

Servidor Web

Servidor Web y XML

RDBMS, ERP, CRM
Sistema Servidor
Modelo clásico de

aplicación web

RDBMS, ERP, CRM
Sistema Servidor
Modelo Ajax de
aplicación web

4

Universidad de Deusto
. . . .

ESIDE AJAX vs. Aplicaciones Web

Tradicionales

Universidad de Deusto
. . . .

ESIDE AJAX vs. Aplicaciones Web

Tradicionales

5

Universidad de Deusto
. . . .

ESIDE ¿Cómo funciona una

Aplicación AJAX?

Universidad de Deusto
. . . .

ESIDE

El motor AJAX

El motor AJAX (AJAX engine) colocado entre el

usuario y el servidor web evita el ciclo start-stop-
start-stopcaracterístico de las aplicaciones web
tradicionales
No es mas que un fichero JavaScript que acompaña al HTML

Este motor es cargado al inicio de la sesión y tiene

una doble responsabilidad:
Generar la interfaz visualizada por el usuario
Comunicarse con el servidor en representación del usuario
Esta interacción ocurre de manera asíncrona evitando que

el usuario vea una página blanca o el reloj de arena (de
espera) cada vez que realice una acción.

Cada interacción del usuario revierte en una

invocación al AJAX engine que puede ser resuelta
local (validación de datos) o remotamente (objeto
XMLHttpRequest).

6

Universidad de Deusto
. . . .

ESIDE

Aplicaciones AJAX famosas

Empresas de renombre internacional están definiendo

soluciones basadas en AJAX:
Google

Orkut (https://www.orkut.com/Login.aspx) es una comunidad virtual

que conecta online a gente a través de una red de amigos.

Gmail (www.gmail.com)
Google Suggest (http://www.google.com/webhp?complete=1&hl=en)

sugiere valores de búsqueda a medida que escribes caracteres

Google Maps (http://maps.google.com/)

Yahoo!

Flickr (http://www.flickr.com/) es una aplicación para gestionar y

compartir fotos

Oddpost (http://oddpost.com/learnmore)

El equipo de webmail Oddpost actualmente están trabajando en rediseñar

Yahoo! Mail siguiendo la filosofía AJAX

En definitiva, AJAX no es solamente un buena solución técnica

sino que además tiene una gran aplicabilidad como se
demuestra por aplicaciones reales complejas.

Universidad de Deusto
. . . .

ESIDE Google Gmail

(www.gmail.com)

Gmail coloca un motor UI en la parte cliente en forma de un

módulo/fichero JavaScript

Cuando hace login en Gmail una copia de ese motor es descargado en

uno de los HTML page frames y permanece ahí por el resto de la
sesión

Este enfoque no es nuevo, fue adoptado por Oddpost


Las acciones sobre la interfaz de Gmail son ruteadas a través del motor
UI en el navegador, que realiza peticiones HTTP (con el objeto
XmlHttpRequest) al servidor de Gmail

El servidor Gmail envía información en DataPack que son

interpretados por el motor UI para actualizar dinámicamente la interfaz
DataPack es similar a Javascript Object Notation (JSON – www.json.org)

Una razón del éxito de Gmail es su mucho mayor interactividad y

usabilidad.
Otros servicios de correo como Hotmail y Yahoo! Mail siguen un enfoque

tradicional de desarrollo web y vuelven a descargar toda la interfaz
completamente después de cada acción.

7

Universidad de Deusto
. . . .

ESIDE Presentación en AJAX: XHTML

y CSS

XHTML define la estructura de un

documento

CSS proporciona el “look and feel” al

documento

Universidad de Deusto
. . . .

ESIDE

XHTML (I)

XHTML (eXtensible HyperText Mark-up Language) es

la siguiente especificación de HTML.

Es HTML basado en XML.
Los usuarios pueden añadir sus propias etiquetas al

contenido.

XHTML 1.1 está modularizado: sus etiquetas se

agrupan en módulos, de esta forma, todo el lenguaje
se encuentra descompuesto en módulos.

El significado de las etiquetas y su uso sigue el

estándar HTML 4.01.

8

Universidad de Deusto
. . . .

ESIDE

XHTML (II)

Algunos de estos módulos son:

Estructura
Texto
Hipertexto
Lista
Applet
Formularios básicos
Formularios
Imagen
Marcos
...

Además se pueden añadir nuevos módulos.

Universidad de Deusto
. . . .

ESIDE

XHTML (III)

XHTML Basic es una versión de XHTML

adecuada para terminales móviles.

Incluye los módulos:

Estructura (body, head, html, title)
Texto (abbr, acronym, address, blockquote,
br, cite, code, dfn, div, em, h1, h2, h3,
h4, h5, h6, kbd, p, pre, q, samp, span,
strong, var)

Hipertexto (a)

9

Universidad de Deusto
. . . .

ESIDE

XHTML (IV)

Inc