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

5. Código HTML
5
jueves, 8 de mayo
de 2014

6. Código JavaScript
6
jueves, 8 de mayo
de 2014

7. JavaScript
7
jueves, 8 de mayo
de 2014

8. JavaScript
8
jueves, 8 de mayo
de 2014

9. PHP
9
jueves, 8 de mayo
de 2014

10. 13. Ejemplo mostrar gif animado
10
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

13. Código HTML
13
jueves, 8 de mayo
de 2014

14. Código Javascript
14
jueves, 8 de mayo
de 2014

15. Código PHP
15
jueves, 8 de mayo
de 2014

16. Código PHP
16
jueves, 8 de mayo
de 2014

17. Código PHP
17
jueves, 8 de mayo
de 2014

18. Código PHP
18
jueves, 8 de mayo
de 2014

19. 14. Ejemplo Paginación con AJAX
19
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

22. Código HTML
22
jueves, 8 de mayo
de 2014

23. Código Javascript
23
jueves, 8 de mayo
de 2014

24. Código Javascript
24
jueves, 8 de mayo
de 2014

25. Código PHP
25
jueves, 8 de mayo
de 2014

26. Cargar un control de Tipo Select
26
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

29. 29
Gracias por su
Atención!
jueves, 8 de mayo
de 2014