Clase 5 AJAX - Desarrollo de aplicaciones móviles
-
Upload
christian-cabrera -
Category
Education
-
view
1.067 -
download
0
description
Transcript of Clase 5 AJAX - Desarrollo de aplicaciones móviles
![Page 1: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/1.jpg)
Desarrollo de Aplicaciones para Móviles
AJAX
![Page 2: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/2.jpg)
¿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.
![Page 3: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/3.jpg)
¿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.
![Page 4: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/4.jpg)
¿Qué es AJAX?
Estas aplicaciones se ejecutan en el navegador (cliente)
de los usuarios.
![Page 5: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/5.jpg)
Tecnologías incluidas en Ajax
Ajax es una combinación de tecnologías existentes:
• XHTML (o HTML)
• DOM
• XMLHttpRequest
• XML
![Page 6: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/6.jpg)
Tecnologías incluidas en Ajax
XHTML o HTML y CSS
Para crear una presentación basada en estándares
![Page 7: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/7.jpg)
Tecnologías incluidas en Ajax
DOM - Document Object Model
Para la interacción y manipulación dinámica de la presentación.
![Page 8: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/8.jpg)
Tecnologías incluidas en Ajax
XMLHttpRequest
Para intercambiar datos de forma asíncrona con el servidor web.
![Page 9: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/9.jpg)
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
![Page 10: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/10.jpg)
Tecnologías incluidas en Ajax
JavaScript
Para unir todas las demás tecnologías.
![Page 11: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/11.jpg)
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.
![Page 12: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/12.jpg)
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.
![Page 13: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/13.jpg)
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
![Page 14: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/14.jpg)
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.
![Page 15: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/15.jpg)
Estructura de la aplicación
![Page 16: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/16.jpg)
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.
![Page 17: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/17.jpg)
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.
![Page 18: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/18.jpg)
Estructura de la aplicación
![Page 19: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/19.jpg)
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?
![Page 20: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/20.jpg)
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.
![Page 21: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/21.jpg)
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.
![Page 22: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/22.jpg)
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)
![Page 23: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/23.jpg)
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.
![Page 24: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/24.jpg)
Estructura de la aplicación
¿Cómo generamos o actualizamos una aplicación AJAX?
![Page 25: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/25.jpg)
Estructura de la aplicación
![Page 26: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/26.jpg)
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
![Page 27: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/27.jpg)
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
![Page 28: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/28.jpg)
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.
![Page 29: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/29.jpg)
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..
![Page 30: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/30.jpg)
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
![Page 31: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/31.jpg)
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>
![Page 32: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/32.jpg)
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
![Page 33: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/33.jpg)
Estructura de la aplicación
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
![Page 34: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/34.jpg)
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 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
![Page 35: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/35.jpg)
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
![Page 36: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/36.jpg)
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
![Page 37: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/37.jpg)
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 .
![Page 38: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/38.jpg)
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); } } }
![Page 39: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/39.jpg)
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
![Page 40: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/40.jpg)
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
![Page 41: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/41.jpg)
Indicador de progreso
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.
![Page 42: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/42.jpg)
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/
![Page 43: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/43.jpg)
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
![Page 44: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/44.jpg)
Botones de retroceso
Otro ejemplo es con-botones.htm que lo pueden encontrar dentro de la
carpeta botón-retroceso.
![Page 45: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/45.jpg)
FEEDBACK
¿Alguna duda?
¿Preguntas?
![Page 46: Clase 5 AJAX - Desarrollo de aplicaciones móviles](https://reader035.fdocument.pub/reader035/viewer/2022070318/557b01a5d8b42a79308b4d98/html5/thumbnails/46.jpg)
La próxima clase vamos a ver:
Diseño de interacción - Android
• Convenciones de interacción de Android
• La biblioteca jQTouch