Este documento describe los modelos clásico y moderno de desarrollo web, así como las tecnologías Ajax y JQuery. Explica que el modelo clásico es síncrono mientras que el moderno es asíncrono. Detalla cómo Ajax usa XMLHttpRequest para comunicación asíncrona con el servidor y pasar datos. Finalmente, introduce JQuery y cómo simplifica el desarrollo web mediante sintaxis sencilla para seleccionar y manipular elementos HTML.

1. 1

2. Ajax y JQuery
René Guamán-Quinche
Facultad de la Energía, las Industrias y los Recursos Naturales No Renovables
Carrera de Ingeniería en Sistemas/Computación
Mayo, 2020
Loja, Ecuador

3. 3
1. Modelo Clásico
2. Modelo Moderno
3. Ajax
4. JQuery
Agenda

4. 4
Modelo clásico

5. 5
Modelo Clásico

6. 6
Modelo Clásico

7. 7
Modelo Clásico
¿Qué hace el
usuario?

8. 8
Modelo Clásico

9. 9
Modelo Moderno

10. 10
Modelo Moderno
Asíncrono
Un suceso es asíncrono cuando no tiene
una correspondencia temporal con otro
suceso

11. 11
Modelo Moderno

12. 12
Ajax

13. 13
Ajax - funcionamiento

14. 14
Ajax - XMLHttpRequest
 Elemento fundamental para la comunicación asíncrona con el servidor
 Permite enviar y recibir en formación en cualquier formato: xml, json, etc.

15. 15
XMLHttpRequest - propiedades
 Almacena el nombre de la función que se ejecutará cuando el objeto
XMLHttpRequest cambie de estado
 Esta propiedad se inicializará con el nombre de la función que procesará
los datos envidos por el servidor
 Contiene el manejador del evento que es invocado cuando se dispara el
evento readystatechange, lo cual sucede cada vez que cambia el valor de
la propiedad readyState de XMLHttpRequest

16. 16
XMLHttpRequest - propiedades

17. 17
XMLHttpRequest - propiedades
 Almacena el estado de requerimiento hecho al servidor
 0 = el método open no se ha llamado
 1 = se ha llamado al método open
 2 = se llamó al método send y se tiene la cabecera de la petición http y el estado
 3 = la propiedad de responseText tiene datos parciales
 4 = la propiedad responseText tiene toda todos los datos pedidos por el servidor

18. 18
XMLHttpRequest - propiedades
 Almacena el string o cadena
devuelta por el servidor
 Almacena el xml devuelta por el
servidor
 Almacena el código del estado de la
petición http
 Es de solo lectura, y estará
disponible cuando el readyState
tome los valores 3 o 4
 Almacena el texto de la petición http
enviado por el servidor

19. 19
XMLHttpRequest - métodos
 Se abre un requerimeinto http al servidor
 Enviar un requerimeinto al servidor
 Detiene la conexión establecida, se usa
cuando el servidor está saturado y no puede
devolver una petición

20. 20
XMLHttpRequest – Crear un objeto

21. 21
XMLHttpRequest – Pasando datos al servidor

22. 22
XMLHttpRequest – Pasando datos al servidor

23. 23
XMLHttpRequest – Pasando datos al servidor

24. 24
XMLHttpRequest – Pasando datos al servidor

25. 25
XMLHttpRequest – Pasando datos al servidor

26. 26
JQuery

27. 27
JQuery

28. 28
JQuery

29. 29
JQuery

30. 30
JQuery - sintaxis

31. 31
JQuery - sintaxis

32. 32
JQuery - sintaxis

33. 33
JQuery - sintaxis

34. 34
JQuery - sintaxis

35. 35
JQuery - sintaxis

36. 36
JQuery - sintaxis

37. 37
JQuery - sintaxis

38. 38
JQuery - sintaxis

39. 39
Cŕeditos
• Transparencias basadas por:
• Sergio Lojan Mora, Ajax
• Alejandro Castro, Jquery
• Introducción a la programación. Descubre el lenguaje de la era digital.
(15.a
edición), Miriadax

40. Networking académico:
Correo electrónico: rguaman@unl.edu.ec
Twitter: @rene5254
SlideShare: https://es.slideshare.net/rene5254
40
Gracias