Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones. Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model 1 (DOM). Estas aplicaciones se ejecutan en el navegador (cliente) de los usuarios.

1. Desarrollo de Aplicaciones
para Móviles
AJAX

2. ¿Qué es AJAX?
Ajax, acrónimo de Asynchronous JavaScript And XML
(JavaScript asíncrono y XML), es una técnica de
desarrollo web para crear aplicaciones.

3. ¿Qué es AJAX?
Ajax es una tecnología asíncrona, en el sentido de
que los datos adicionales se solicitan al servidor y se
cargan en segundo plano sin interferir con la
visualización ni el comportamiento de la página.

4. ¿Qué es AJAX?
Estas aplicaciones se ejecutan en el navegador (cliente)
de los usuarios.

5. Tecnologías incluidas en Ajax
Ajax es una combinación de
tecnologías existentes:
• XHTML (o HTML)
• DOM
• XMLHttpRequest
• XML

6. Tecnologías incluidas en Ajax
XHTML o HTML y CSS
Para crear una presentación basada en estándares

7. Tecnologías incluidas en Ajax
DOM - Document Object Model
Para la interacción y manipulación dinámica de la presentación.

8. Tecnologías incluidas en Ajax
XMLHttpRequest
Para intercambiar datos de forma asíncrona con el servidor web.

9. Tecnologías incluidas en Ajax
XML
Formato usado para la transferencia de datos solicitados al servidor,
aunque cualquier formato puede funcionar, incluyendo HTML
preformateado, texto plano,etc

10. Tecnologías incluidas en Ajax
JavaScript
Para unir todas las demás tecnologías.

11. Tecnologías incluidas en Ajax
Ajax no constituye una tecnología en sí, sino que es un
término que engloba a un grupo de estas que trabajan
conjuntamente.

12. Navegadores que permiten Ajax
Algunos de los navegadores que permiten AJAX son:
• Navegadores basados en Gecko como Mozilla, Mozilla Firefox versión 7.1 y
superiores
• Navegadores basados en WebKit como Google Chrome de Google o Safari de
Apple.
• Microsoft Internet Explorer para Windows versión 5.0 y superiores, y los
navegadores basados en él
• Opera versión 8.0 y superiores, incluyendo Opera Mobile Browser versión 8.0 y
superiores.

13. Aplicaciones basadas en AJAX
• Gestores de correo electrónico: Gmail, Yahoo Mail, Windows Live Mail.
• Cartografía: Google Maps, Yahoo Maps, Windows Live Local.
• Aplicaciones web y productividad: Google Docs, Zimbra, Zoho.
• Otras: Netvibes [metapágina], Digg [noticias], Meebo [mensajería], 30
Boxes [calendario], Flickr [fotografía

14. Estructura de la aplicación
• El núcleo de una aplicación AJAX esta compuesta de por componentes
de Javascript, componentes de XML y un lenguaje del lado del servidor
(http).
• Para entender que hace una aplicación AJAX, lo vamos a comparar con
una aplicación tradicional de comunicación entre el navegador y el
servidor que nos sirve la información.

15. Estructura de la aplicación

16. Estructura de la aplicación
• Cada pagina individual que puede contener textos, imágenes, formularios,
representa un todo y deber cargarse y recargarse en su totalidad.
• Ej Formulario: podemos completar datos, borrar, corregir pero hasta
tanto no presionemos el botón ‘enviar’ la información no viaja al servidor.
Al presionar el botón ‘enviar’ debemos esperar hasta poder ver la página
actualizada.

17. Estructura de la aplicación
Inconvenientes de este tipo de `conversación’:
– Retrasos significativos al volver a cargar la página.
– Interrupción del flujo de la información para el usuario.
– Para poder ver la información actualizada, es necesario enviar toda la
información de la página al servidor, y el servidor, nos debe devolver la
información completa nuevamente.

18. Estructura de la aplicación

19. Estructura de la aplicación
AJAX, hace uso de las páginas de manear interactiva.
Responde a las tareas que lleve a cabo el usuario sin interrupción y
llevando a cabo los procesos en segundo plano mientras que el usuario
puede seguir usando la aplicación sin problemas.
¿Cómo lo hace?

20. Estructura de la aplicación
• Crea capa de procesamiento entre la página web del usuario y el
servidor, llamada Motor AJAX.
• Interceptar las peticiones del usuario y en un segundo plano maneja las
comunicaciones con el servidor asincrónicamente.
• Tanto las peticiones como las respuestas del servidor no necesitan
coincidir con las acciones que lleve a cabo el usuario, pueden pasar en
cualquier momento sin que el usuario tenga que estar esperando la
respuesta para seguir usando la aplicación.

21. Estructura de la aplicación
• El navegador le permite al usuario seguir trabajando, mientras que en
segundo plano AJAX lleva a cabo la petición.
• AJAX usa XMLHttpRequest para llevar a cabo las peticiones y para que el
motor AJAX en segundo plano siga la pista de lo que esta ocurriendo y
sepa en que momento el servidor esta preparado para devolver la
información al navegador.

22. Estructura de la aplicación
• Dentro de la aplicación AJAX, tenemos tres elementos:
– Motor AJAX
– El objeto XMLHTTPRequest
– Procesamiento de los datos dentro del servidor (la comunicación le llega
desde xmlhttpRequest como otra httprequest más)

23. Estructura de la aplicación
• Las aplicaciones AJAX no tienen en cuenta el lenguaje o SO que existen
en el servidor.
• La única condición, es que el motor AJAX del lado del cliente, reciba del
servidor, una respuesta bien formateada, si es así. AJAX funcionara con
cualquier lenguaje del lado del servidor.
• AJAX tiene sentido para aplicaciones web que usan scrip del lado del
servidor para su funcionamiento.

24. Estructura de la aplicación
¿Cómo generamos o actualizamos una aplicación
AJAX?

25. Estructura de la aplicación

26. Estructura de la aplicación
1) Decidir que evento o que
acciones del usuario serán las
responsables de que se lleve a
cabo el envió de una petición
http asincrónica.
Ej. Podemos decidir que cuando se lleve a
cabo el evento onMouseOver sobre una
imagen, de cómo resultado una petición
al servidor para recuperar información
sobre lo que contiene la imagen

27. Estructura de la aplicación
2) El gestor de eventos, crea una
petición al servidor, que el motor
AJAX envía mediante
XMLHTTPRequest de modo
asincrónico

28. Estructura de la aplicación
3) Una vez hecha la petición, es
necesario crear una serie de
rutinas con código javascript,
para monitorear el progreso en
esa petición, hasta que el
servidor nos diga que la petición,
se completo satisfactoriamente.

29. Estructura de la aplicación
4) Nuevamente necesitamos una
serie de rutinas javascript para
recuperar la información que nos
devuelve el servidor y procesar
los dicha información..

30. Estructura de la aplicación
5) Procesados los datos devueltos,
se envían a la página web que se
actualizara con esta nueva
información

31. Estructura de la aplicación
Veamos el codigo:
<html>
<head>
<title>Hola Mundo con AJAX</title></head>
<body>
Este primer ejemplo en ajax<br>
obtiene un fichero del servidor web llamado passwords.txt y el contenido obtenido lo muestra
con un alert en esta página web.<br>
<script type="text/javascript">
objetoAjax = new XMLHttpRequest();
// Realizar peticion HTTP
objetoAjax.open('GET', 'passwords.txt', false);
objetoAjax.send(null);
alert(objetoAjax.responseText);
</script>
</body>
</html>

32. Estructura de la aplicación
<html> Lo que hace es:
<head>
<title>Hola Mundo con AJAX</title></head> • Instanciar el objeto ajax
<body> • El método open contrario a lo que parece
Este primer ejemplo en ajax<br> no hace mucho lo único que hace es
preparar la petición.
obtiene un fichero del servidor web llamado
• La petición que consiste en traer el
passwords.txt y el contenido obtenido lo
contenido de un fichero de texto desde el
muestra con un alert en esta página web.<br> servidor ajax
<script type="text/javascript"> • El fichero se llama passwords.txt
objetoAjax = new XMLHttpRequest(); • El envió de la petición es realizado con
// Realizar peticion HTTP send
objetoAjax.open('GET', 'passwords.txt', false); • El resultado de la petición lo podemos
objetoAjax.send(null); acceder con la propiedad responseText
• Imprimir el resultado o en este caso
alert(objetoAjax.responseText);
mostrarlo en una ventana del tipo alert()
</script> de javascript
</body>
</html>

33. Estructura de la aplicación
new XMLHttpRequest(); crea una instancia XMLHTTPRequest
Propiedades del objeto XMLHttpRequest
readystate:
0 Sin estado
1 configuramos la petición con open solamente
2 petición enviada pero sin respuesta
3 el servidor responde a la petición
4 petición completada

34. Estructura de la aplicación
new XMLHttpRequest(); crea una instancia XMLHTTPRequest
status:
Esta propiedad nos muestra los códigos del servidor a la petición ajax.
200 petición procesada correctamente
404 recurso no encontrado
500 error del servidor
403 sin permiso en el servidor
405 problemas con el método
Existen varios estados mas pero esto es en función del servidor pero a manera de
ilustración tenemos los anteriores

35. Estructura de la aplicación
objetoAjax.open('GET', 'passwords.txt', false);
Este método configura la petición para su envió de momento no hace nada
y tenemos como parámetros:
tipo envió: GET o POST
url: dirección de envió, ejemplo http://localhost/passwords.txt ó passwords.txt
asíncrono: true ó false para una app síncrona (como esto es ajax es raro que tengamos
peticiones del tipo síncrono)
Adicionalmente el user y pass del servidor

36. Estructura de la aplicación
objetoAjax.send(null);
Este método envía la petición configurada con open.
El parámetro que utiliza es opcional.
Si utilizamos el tipo de datos POST: incluiremos información adicional.
Si utilizamos el tipo de datos GET: será solo null

37. Estructura de la aplicación
alert(objetoAjax.responseText);
Contiene en formato de texto la petición solicitada al servidor.
Los valores status = 200 y readystate = 4 indican que la petición se proceso de
manera correcta en el servidor y se encuentra finalizada .

38. Estructura de la aplicación
alert(objetoAjax.responseText);
Contiene en formato de texto la petición solicitada al servidor.
Los valores status = 200 y readystate = 4 indican que la petición se proceso de
manera correcta en el servidor y se encuentra finalizada .
Así quedaría la validación:
function mostrar() {
if(objetoAjax.readyState == 4) {
if(objetoAjax.status == 200) {
//alert(objetoAjax.responseText);
document.write(objetoAjax.responseText);
}
}
}

39. Indicador de progreso
Los indicadores Ajax son herramientas que ayudan a los usuarios a entender qué
está sucediendo en el sistema y cuáles son las respuesta de éste.
Los indicadores deberían mostrarse ni bien comienza el requerimiento y ocultarse
cuando termina

40. Indicador de progreso
Los indicadores Ajax son herramientas que ayudan a los usuarios a entender qué
está sucediendo en el sistema y cuáles son las respuesta de éste.
Los indicadores deberían mostrarse ni bien comienza el requerimiento y ocultarse
cuando termina

41. Indicador de progreso
Indicadores simples Indicadores de progreso
Brindan una pista visual sobre que Si una operación necesita más tiempo
una petición está siendo llevada a para ejecutarse deberías utilizar
cabo. Se pueden mostrar como texto indicadores de progreso.
simple, o como una imagen,
usualmente animada: Este tipo de indicadores proveen una
información real acerca del estado de
Texto simple: Mostrar un mensaje progreso, usualmente mostrando cuánto
significativo del tipo: “Enviando e- tiempo ha pasado y cuánto queda para
mail”. que termine la petición.
Imagen animada: Animaciones Los indicadores de progreso también
rotativas. pueden mostrar un mensaje de estado
explicando qué está pasando en el
momento preciso.

42. Indicador de progreso
• Cualquiera sea la opción que selecciones, debes asegurarte que el
indicador sea claramente visible.
• Dependiendo del propósito, los indicadores pueden ser colocados dentro
del mismo contexto que el elemento que comenzó la petición o pueden
mostrarse en una única posición para todas las peticiones.
• Ej: Google Mail ha centralizado los indicadores Ajax en la parte superior de
la ventana que se revela ante cualquier petición Ajax.
Visita: http://preloaders.net/

43. Botones de retroceso
• Utilizando la etiqueta anclaje <a>
y el nombre del parámetro con
un hash en la url, se obtiene la
funcionalidad del retroceso.
• En las pruebas realizadas, el
código funciona con el botón de
atrás, adelante y el botón de
actualización

44. Botones de retroceso
Otro ejemplo es con-botones.htm que lo pueden encontrar dentro de la
carpeta botón-retroceso.

45. FEEDBACK
¿Alguna duda?
¿Preguntas?

46. La próxima clase vamos a ver:
Diseño de interacción - Android
• Convenciones de interacción de Android
• La biblioteca jQTouch