PDF de programación - XMLHttpRequest / AJAX

XMLHttpRequest / AJAX

XMLHttpRequest / AJAX

Jorge Bastida Pérez

[email protected]
[email protected]

Documento Bajo Licencia Creative Commons

1 / 20

XMLHttpRequest / AJAX

Índice

0. Licencia
1. Presentación

1.1 Breve Historia
1.2 ¿Qué es AJAX?

1.2.1 Comunicación síncrona vs. Asíncrona
1.2.2 La "magia".

1.3 Ejemplos prácticos en producción

1.3.1 Flickr Yahoo!
1.3.2 Google Suggest
1.3.3 Google Maps
1.3.4 Etc...

2. Teoría

2.1 ¿ Para qué nos sirve AJAX ?
2.2 Ventajas / Desventajas
2.3 Diferencias en el desarrollo "PRE"ajax / "POST"ajax.
2.4 El cambio "radical" que supone la comunicación Asíncrona.
2.5 Alternativas a Ajax.

3. Práctica / teoría

3.1 DOM
3.2 Programación con Frameworks de AJAX

4. Práctica

4.1 Conocimientos Básicos

4.1.1 CSS
4.1.2 JavaScript

4.2 Primeros pasos
4.3 Copiando Flickr
4.4 Copiando Google Suggest
4.5 Copiando Google Maps
4.6 Copiando aplicaciones de escritorio.

4.6.1 Crear / Destruir objetos.

4.7 Pegaso puede con todo.

4.7.1 Integración de xajax en pegaso

4.8 Abre tu mente

4.8.1 Que hacer / Que NO hacer con ajax.
4.8.2 Límites de Ajax

2 / 20

XMLHttpRequest / AJAX

0. Licencia
Usted es libre de:

● copiar, distribuir y comunicar públicamente la obra
● hacer obras derivadas
● hacer un uso comercial de esta obra

Bajo las condiciones siguientes:

Reconocimiento. Debe reconocer los créditos de la obra de
la manera especificada por el autor o el licenciador.

Compartir bajo la misma licencia. Si altera o transforma
esta obra, o genera una obra derivada, sólo puede distribuir
la obra generada bajo una licencia idéntica a ésta.

● Al reutilizar o distribuir la obra, tiene que dejar bien claro los términos de la licencia de

esta obra.

● Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los

derechos de autor

Los derechos derivados de usos legítimos u otras limitaciones reconocidas por ley no

se ven afectados por lo anterior.

Esto es un resumen legible por humanos del texto legal (la licencia completa) disponible en los

idiomas siguientes:

Catalán Castellano Gallego

3 / 20

XMLHttpRequest / AJAX

1.Presentación

1.1 Breve Historia

Desde hace un tiempo la palabra AJAX es la palabra de moda en el mundo del
desarrollo de aplicaciones web.

El termino “Ajax” fue acuñado por Jesse James Garret1 en su articulo “Ajax: A New
Approach to Web Applications”, el cual recomiendo su lectura y que a lo largo de esta
presentación citaré numerosas veces.
A modo de introducción paso a citar unas líneas brevemente.

“Dejando de lado esto, los diseñadores de interacción Web no pueden evitar sentirse envidiosos de nuestros
colegas que crean software de escritorio. Las aplicaciones de escritorio tienen una riqueza y respuesta que
parecía fuera del alcance en Internet. La misma simplicidad que ha permitido la rápida proliferación de la Web
también crea una brecha entre las experiencias que podemos proveer y las experiencias que los usuarios
pueden lograr de las aplicaciones de escritorio.”

1.2 ¿Qué es Ajax ?

Mucha gente me lapidaría por esto, pero ajax en sí no es nada, incluso emplear el
termino ajax para definir el uso de XMLHttprequest2 puede llegar a tratarse de una
tautología.

Ajax no es una tecnología , no es un nuevo lenguaje de programación ni nada similar,
Ajax es realmente el cúmulo de muchas tecnologías que por méritos propios han
llegado a donde están.

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 (DOM3) para visualizar dinámicamente e interactuar con

la información presentada

● XML, XSLT para intercambiar y manipular datos
● XMLHttpRequest para recuperar datos asíncronamente
● Javascript como nexo de unión de todas estas tecnologías

● No requiere plugins o capacidades específicas de ciertos navegadores.

1 Jesse James Garrett(wikipedia.org) is an information architect and founder of Adaptive Path, an information architecture and user

experience firm. His work is widely known among information architects, who commonly refer to him simply as jjg

2 XMLHttprequest (wikipedia.org) The object was originally invented by Microsoft, used since Internet Explorer 5.0 as an ActiveX

object, which is hence accessible via JavaScript, VBScript, or other scripting languages supported by the browser. Mozilla contributors
then implemented a compatible native version in Mozilla 1.0. This was later followed by Apple since Safari 1.2 and Opera Software
since Opera 8.0.

3 DOM (wikipedia.org) Document Object Model (DOM) is a form of representation of structured documents as an object-oriented
model. DOM is the official World Wide Web Consortium (W3C) standard for representing structured documents in a platform- and
language-neutral manner. The DOM is also the basis for a wide range of application programming interfaces, some of which are
standardized by the W3C.

4 / 20

XMLHttpRequest / AJAX

1.2 Comunicación síncrona vs. Asíncrona

En el desarrollo clásico tanto de aplicaciones como sitios web la comunicación con el
usuario es síncrona respecto de las interacciones del usuario, es decir:

1. El usuario realiza una petición al servidor.
2. El servidor envía la página solicitada.
3. El usuario comienza a “leer” la página.
4. Llega un momento dado en el cual el usuario desea cambiar de página y mediante

formularios o links realiza una petición al servidor volviendo al paso número 1.

En cambio la comunicación asíncrona no implica sincronismo ante los eventos del
usuario, sino que ante cualquier evento del usuario nosotros podemos proceder en
consecuencia, es decir:

1. El usuario realiza una petición al servidor
2. El servidor envía la página solicitada
3. El usuario comienza a “leer” la página
4. Llega un momento dado en el cual el usuario quiere cambiar de página o alterar la
información que contiene la misma. En ese momento dado la aplicación teniendo
definidos los eventos posibles actúa en consecuencia a la interacción que haya podido
suceder. Entonces podremos cambiar al usuario de página, o por el contrario modificar
la misma para satisfacer al usuario. Estos cambios no implican cambiar de página.

El articulo de Jesse James incluye varias imágenes que hace más fácil la comprensión
de esta comunicación asíncrona.(página siguiente)

¿Por qué la interacción del usuario
vez que se necesita algo del servidor?

con una aplicación web se interrumpe cada

5 / 20

XMLHttpRequest / AJAX

Es por esto que una aplicación ajax termina con la idea “arrancar-frenar-arrancar-
frenar”. Cada interacción de un usuario generaría un requerimiento HTTP para poder
mostrar la nueva información, pero mediante ajax las peticiones al servidor pueden
denegarse al “motor ajax” que es quien procesaría las peticiones contra el servidor,
permitiendo o no al usuario interactuar con la página mientras el servidor está
procesando la información, evitando de este modo los tiempo de carga en los cuales el
usuario ve como su reloj de arena da vueltas mientas su navegador trata de componer
la nueva página mientras recibe la información del servidor.

6 / 20

1.2.2 La “magia”

XMLHttpRequest / AJAX

¿Que es “la magia”?, La magia de ajax consiste en la posibilidad de poder
ante cualquier evento o la negación del mismo ejecutar código ( en este ejemplo php )
pudiendo alterar la estructura (DOM) de la página.

En palabras llanas y para que os hagáis una idea más “visual”...
Podemos ejecutar código php ante cualquier evento que controlaremos con javascript.
Por ejemplo... pulse un botón , entre en un espacio , pase cierto tiempo etc...

Llegado a esta altura de la presentación tendréis más dudas que al principio pero
tratare de enseñaros mas visualmente y con ejemplos en producción al alcance de
millones de personas como esta palabras banales son capaces de hacer una ilusión,
realidad.

1.3 Ejemplos prácticos en producción

1.3.1 Flickr Yahoo

Flickr es un espacio gratuito donde todo el mundo puede subir sus fotos y
exponerlas al resto del mundo. En un principio flickr utilizaba macromedia flash
para poder mostrar las fotos , hacerlas rotar , insertar comentarios sobre ellas
etc....

Desde hace ya un tiempo
incorpora ajax haciendo la
navegación mas ligera ,
accesible e intuitiva. A día de
hoy flickr cuenta con más de
un millón de miembros, los
cuales interactúan gracias a
ajax con sus imágenes en
tiempo real.
Uno de los mejores detalles
que incorpora flickr es la
posibilidad de editar el título y
descripción ( entre otros ) en
tiempo real sin necesidad de
seleccionar la foto, encaminar
al usuario a una página de
edición donde rellenará un

formulario con la nueva información.
Flickr permite pulsando en el título de la imagen convertir el mismo en un
formulario, tras editar el título y pulsar el botón de guardar todo resto de
formulario desaparece volviendo a la vista normal de la página. En ese momento
la nueva información queda guardada en la base de datos para ser consultada
por cualquier otro visitante. Este ejemplo demuestra que el peso de la aplicación
no tiene porqué ( como suponíamos) crecer sustancialmente sino al contrario,
produciéndose una reducción considerable en la información intercambiada entre
servidor y cliente.

7 / 20

XMLHttpRequest / AJAX

1.3.2 Google Suggest

Google, buscador por excelencia demostró otra vez hace más de un año el
potencial de la tecnología y de sus servidores. Google Suggest permite
comprobar
instantáneamente el
numero de resultados que una
búsqueda va a tener mientras se
está
la misma.
¿Útil?¿Pesado para el servidor? ...
si google puede, no es problema
de ajax sino de los recursos a
emplear.
Este ejemplo demuestra la utilidad
de ajax para realizar búsquedas
rápidas
(ej: Datos personales,
números de teléfono) o solucionar
problemas a la hora de auto
completar
específicos
campos
dentro de formularios.

escribiendo

En la parte práctica copiaremos el ejemplo de google para buscar páginas w