clase 5 ajax - desarrollo de aplicaciones móviles

Desarrollo de Aplicaciones para Móviles

AJAX

¿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.

¿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.

¿Qué es AJAX?

Estas aplicaciones se ejecutan en el navegador (cliente)

de los usuarios.

Tecnologías incluidas en Ajax

Ajax es una combinación de tecnologías existentes:

• XHTML (o HTML)

• DOM

• XMLHttpRequest

• XML


XHTML o HTML y CSS

Para crear una presentación basada en estándares


DOM - Document Object Model

Para la interacción y manipulación dinámica de la presentación.


XMLHttpRequest

Para intercambiar datos de forma asíncrona con el servidor web.


XML

Formato usado para la transferencia de datos solicitados al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano,etc


JavaScript

Para unir todas las demás tecnologías.


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

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.

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

http://www.gmail.com/

http://mail.yahoo.com/

http://mail.yahoo.com/

http://www.hotmail.com/



http://maps.google.com/

http://maps.yahoo.com/

http://maps.live.com/

http://docs.google.com/



http://www.zimbra.com/

http://www.zoho.com/

http://www.netvibes.com/

http://www.digg.com/

http://www.meebo.com/

http://www.30boxes.com/

http://www.30boxes.com/

http://www.flickr.com/

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.


• 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.


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.


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?


• 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.


• 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.


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


• 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.


¿Cómo generamos o actualizamos una aplicación AJAX?


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


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


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.


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


5) Procesados los datos devueltos, se envían a la página web que se actualizara con esta nueva informació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>

Estructura de la aplicación <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>

Lo que hace es:

• Instanciar el objeto ajax• El método open contrario a lo que parece

no hace mucho lo único que hace es preparar la petición.

• La petición que consiste en traer el contenido de un fichero de texto desde el servidor ajax

• El fichero se llama passwords.txt • El envió de la petición es realizado con

send • El resultado de la petición lo podemos

acceder con la propiedad responseText• Imprimir el resultado o en este caso

mostrarlo en una ventana del tipo alert() de javascript


new XMLHttpRequest(); crea una instancia XMLHTTPRequest

Propiedades del objeto XMLHttpRequest

readystate:0 Sin estado1 configuramos la petición con open solamente2 petición enviada pero sin respuesta3 el servidor responde a la petición4 petición completada


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 correctamente404 recurso no encontrado500 error del servidor403 sin permiso en el servidor405 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


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


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


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 .


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

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


Indicadores simples

Brindan una pista visual sobre que una petición está siendo llevada a cabo. Se pueden mostrar como texto simple, o como una imagen, usualmente animada:

Texto simple: Mostrar un mensaje significativo del tipo: “Enviando e-mail”.

Imagen animada: Animaciones

rotativas.

Indicadores de progreso

Si una operación necesita más tiempo para ejecutarse deberías utilizar indicadores de progreso.

Este tipo de indicadores proveen una información real acerca del estado de progreso, usualmente mostrando cuánto tiempo ha pasado y cuánto queda para que termine la petición.

Los indicadores de progreso también pueden mostrar un mensaje de estado explicando qué está pasando en el momento preciso.


• 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/

http://mail.google.com/

http://mail.google.com/

http://preloaders.net/




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

Botones de retroceso

Otro ejemplo es con-botones.htm que lo pueden encontrar dentro de la

carpeta botón-retroceso.

FEEDBACK

¿Alguna duda?

¿Preguntas?

La próxima clase vamos a ver:

Diseño de interacción - Android

• Convenciones de interacción de Android

• La biblioteca jQTouch

clase 5 ajax - desarrollo de aplicaciones móviles

Education