Tecnologia AJAX
-
Upload
javii-enriquez -
Category
Technology
-
view
92 -
download
0
Transcript of Tecnologia AJAX
![Page 1: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/1.jpg)
UNIDAD 3AJAX
Presenta:Dávila García Beatriz Ivonne – 10410169Escárcega Enriquez Jesús Javier – 10410567
Ingeniería en Sistemas Computacionales
1jueves, 8 de mayo de 2014
![Page 2: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/2.jpg)
Objetivo de la actividad.
Realizar una actividad para comprender la exposición del primer acercamiento a AJAX.
Agenda
13. Mostrar un gif animado mientras se envían y reciben los datos del servidor.
14. Paginación con AJAX.
15. Controlador de tipo select.
2jueves, 8 de mayo de 2014
![Page 3: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/3.jpg)
Mostrar un gif animado mientras se envían y reciben los datos del servidor.
Hasta ahora mientras se actualiza la páginamostramos un texto: 'Procesando...', es muy comúnutilizar un gif animado que represente taloperación.
3jueves, 8 de mayo de 2014
![Page 4: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/4.jpg)
Mostrar un gif animado mientras se envían y reciben los datos del servidor.
Haremos una serie de páginas que nos permitan enviar losdatos cargados en un formulario al servidor en formaasincrónica y mostraremos un gif animado mientras dura elenvío de datos. El formulario solicitará que ingrese el nombrey sus comentarios.
4jueves, 8 de mayo de 2014
![Page 5: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/5.jpg)
Código HTML
5jueves, 8 de mayo de 2014
![Page 6: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/6.jpg)
Código JavaScript
6jueves, 8 de mayo de 2014
![Page 7: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/7.jpg)
JavaScript
7jueves, 8 de mayo de 2014
![Page 8: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/8.jpg)
JavaScript
8jueves, 8 de mayo de 2014
![Page 9: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/9.jpg)
PHP
9jueves, 8 de mayo de 2014
![Page 10: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/10.jpg)
13. Ejemplo mostrar gif animado
10jueves, 8 de mayo de 2014
![Page 11: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/11.jpg)
14. Paginación con AJAX
Un lugar donde puede ayudar el uso de AJAX es en lapaginación de datos mientras otro recurso en la página seestá ejecutando. Confeccionaremos una página que muestreun video e inmediatamente en la parte inferior mostraremoslos comentarios del video paginados.
Sin utilizar AJAX estamos obligados a recargar completamentela página lo que haría imposible ver el video y recorrer loscomentarios en forma completa (considerando que solo partede los comentarios están en la página)
11jueves, 8 de mayo de 2014
![Page 12: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/12.jpg)
14. Ejemplo Paginación con AJAX
Simulador (Cuando presiona el botón "ejecutar el programa"se graban todos los cuadros de texto y se ejecuta el primerode la lista mostrando en una página el resultado.)
Confeccionar una página que muestre un video einmediatamente en la parte inferior mostrar los comentariosdel video paginados. Actualizar los datos de cada página enforma asíncrona.
12jueves, 8 de mayo de 2014
![Page 13: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/13.jpg)
Código HTML
13jueves, 8 de mayo de 2014
![Page 14: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/14.jpg)
Código Javascript
14jueves, 8 de mayo de 2014
![Page 15: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/15.jpg)
Código PHP
15jueves, 8 de mayo de 2014
![Page 16: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/16.jpg)
Código PHP
16jueves, 8 de mayo de 2014
![Page 17: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/17.jpg)
Código PHP
17jueves, 8 de mayo de 2014
![Page 18: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/18.jpg)
Código PHP
18jueves, 8 de mayo de 2014
![Page 19: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/19.jpg)
14. Ejemplo Paginación con AJAX
19jueves, 8 de mayo de 2014
![Page 20: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/20.jpg)
15.Cargar un control de tipo Select
Confeccionaremos un problema que contenga dos controlesde tipo select. En el primero almacenaremos una lista decarreras de estudio ("Analista deSistemas","Telecomunicaciones" y "WebMaster")
Cuando se seleccione una carrera enviaremos una petición alservidor para que retorne todas las materias que tiene esacarrera y procederemos a la carga del segundo select.
20jueves, 8 de mayo de 2014
![Page 21: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/21.jpg)
15. Ejemplo
Simulador (Cuando presiona el botón "ejecutar el programa"se graban todos los cuadros de texto y se ejecuta el primerode la lista mostrando en una página el resultado.)
Confeccionaremos un problema que contenga dos controlesde tipo select. En el primero almacenar una lista de carrerasde estudio ("Analista de Sistemas","Telecomunicaciones" y"WebMaster") y en el segundo los nombres de las materias dela carrera seleccionada. Rescatar los datos del servidor en elmomento que se selecciona una carrera.
21jueves, 8 de mayo de 2014
![Page 22: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/22.jpg)
Código HTML
22jueves, 8 de mayo de 2014
![Page 23: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/23.jpg)
Código Javascript
23jueves, 8 de mayo de 2014
![Page 24: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/24.jpg)
Código Javascript
24jueves, 8 de mayo de 2014
![Page 25: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/25.jpg)
Código PHP
25jueves, 8 de mayo de 2014
![Page 26: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/26.jpg)
Cargar un control de Tipo Select
26jueves, 8 de mayo de 2014
![Page 27: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/27.jpg)
Contratiempos presentados al realizar la actividad.
Se desconocía del funcionamiento exacto de algunasfunciones y métodos.
Opinión acerca de la dificultad de la actividad y el tiempo yformato de entrega.
Consideramos ambas cosas adecuadas.
Tiempo aproximado de realización (en horas).
El tiempo aproximado para realizar la actividad fue de 8 horasaproximadamente.
27jueves, 8 de mayo de 2014
![Page 28: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/28.jpg)
Ajax es una herramienta bastante útil que viene arevolucionar la interacción que se tiene con lasaplicaciones web pues gracias a esto se evitaperder tiempo en espera de respuesta de algunabúsqueda o simplemente se puede continuartrabajando aún y cuando se haya solicitado algunapetición al servidor.
28jueves, 8 de mayo de 2014
![Page 29: Tecnologia AJAX](https://reader035.fdocuments.es/reader035/viewer/2022081502/559765391a28ab27488b45b7/html5/thumbnails/29.jpg)
29
Gracias por su
Atención!
jueves, 8 de mayo de 2014