El documento presenta tres ejemplos de uso de AJAX: 1) Mostrar un gif animado mientras se envían datos al servidor, 2) Paginación de comentarios en una página sin recargarla completamente, y 3) Cargar opciones dinámicas en un segundo select dependiendo de la opción seleccionada en un primer select. Se incluye el código HTML, JavaScript y PHP para cada ejemplo. El objetivo es comprender el funcionamiento básico de AJAX y sus usos comunes.
1. UNIDAD 3
AJAX
Presenta:
Dávila García Beatriz Ivonne – 10410169
Escárcega Enriquez Jesús Javier – 10410567
Ingeniería en Sistemas Computacionales
1
jueves, 8 de mayo
de 2014
2. 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.
2
jueves, 8 de mayo
de 2014
3. Mostrar un gif animado mientras se envían y
reciben los datos del servidor.
Hasta ahora mientras se actualiza la página
mostramos un texto: 'Procesando...', es muy común
utilizar un gif animado que represente tal
operación.
3
jueves, 8 de mayo
de 2014
4. Mostrar un gif animado mientras se envían y
reciben los datos del servidor.
Haremos una serie de páginas que nos permitan enviar los
datos cargados en un formulario al servidor en forma
asincrónica y mostraremos un gif animado mientras dura el
envío de datos. El formulario solicitará que ingrese el nombre
y sus comentarios.
4
jueves, 8 de mayo
de 2014
11. 14. Paginación con AJAX
Un lugar donde puede ayudar el uso de AJAX es en la
paginación de datos mientras otro recurso en la página se
está ejecutando. Confeccionaremos una página que muestre
un video e inmediatamente en la parte inferior mostraremos
los comentarios del video paginados.
Sin utilizar AJAX estamos obligados a recargar completamente
la página lo que haría imposible ver el video y recorrer los
comentarios en forma completa (considerando que solo parte
de los comentarios están en la página)
11
jueves, 8 de mayo
de 2014
12. 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 primero
de la lista mostrando en una página el resultado.)
Confeccionar una página que muestre un video e
inmediatamente en la parte inferior mostrar los comentarios
del video paginados. Actualizar los datos de cada página en
forma asíncrona.
12
jueves, 8 de mayo
de 2014
20. 15.Cargar un control de tipo Select
Confeccionaremos un problema que contenga dos controles
de tipo select. En el primero almacenaremos una lista de
carreras de estudio ("Analista de
Sistemas","Telecomunicaciones" y "WebMaster")
Cuando se seleccione una carrera enviaremos una petición al
servidor para que retorne todas las materias que tiene esa
carrera y procederemos a la carga del segundo select.
20
jueves, 8 de mayo
de 2014
21. 15. Ejemplo
Simulador (Cuando presiona el botón "ejecutar el programa"
se graban todos los cuadros de texto y se ejecuta el primero
de la lista mostrando en una página el resultado.)
Confeccionaremos un problema que contenga dos controles
de tipo select. En el primero almacenar una lista de carreras
de estudio ("Analista de Sistemas","Telecomunicaciones" y
"WebMaster") y en el segundo los nombres de las materias de
la carrera seleccionada. Rescatar los datos del servidor en el
momento que se selecciona una carrera.
21
jueves, 8 de mayo
de 2014
27. Contratiempos presentados al realizar la actividad.
Se desconocía del funcionamiento exacto de algunas
funciones y métodos.
Opinión acerca de la dificultad de la actividad y el tiempo y
formato de entrega.
Consideramos ambas cosas adecuadas.
Tiempo aproximado de realización (en horas).
El tiempo aproximado para realizar la actividad fue de 8 horas
aproximadamente.
27
jueves, 8 de mayo
de 2014
28. Ajax es una herramienta bastante útil que viene a
revolucionar la interacción que se tiene con las
aplicaciones web pues gracias a esto se evita
perder tiempo en espera de respuesta de alguna
búsqueda o simplemente se puede continuar
trabajando aún y cuando se haya solicitado alguna
petición al servidor.
28
jueves, 8 de mayo
de 2014