1. 1

2.  4.- El mismo ejemplo sin AJAX. 3
 5.- Objeto XMLHttpRequest. 6
 6 - Pasando datos al servidor por el
método GET. 23
2

3. 3

4. 4

5.  Si comparamos este ejemplo con el
anterior veremos que utilizar AJAX
reduce la cantidad de información que
pedimos al servidor
5

6. Objeto
XMLHttpRequest
(Extensible Markup Language / Hypertext Transfer
Protocol)
6

7. AJAX mediante un ejemplo teórico
7

8. AJAX engloba el uso de:
+XHTML y CSS para marcar el contenido y
presentarlo.
+DOM para interactúar con los elementos.
+XML, JSON, etc, para el intercambio de la
información.
+El objeto XMLHttpRequest para realizar las
peticiones asíncronas.
+JavaScript para unir todo.
8

9. En la red social Tuenti al mirar las fotografías es posible pasar a la
siguiente sin recargar la página, simplemente se actualiza a la foto
nueva con los comentarios y las etiquetas.
El mecanismo interno sería algo así:
1 El usuario interactúa con un elemento de la página,
en este caso un enlace, y dispara el evento click.
2 La función manejadora del evento click de ese
elemento crea el objeto que se encarga de realizar
petición asíncronas al servidor.
3 Se realiza una petición asíncrona a un módulo del
servidor encargado de devolver la información con la
foto, los comentarios y las etiquetas.
4 Para el intercambio de información se puede utilizar
XML, JSON, o incluso devolver directamente el
contenido marcado con XHTML.
5 Cuando llega la información al cliente, se actualiza
con la nueva información utilizando las funciones de la
API de DOM.
9

10. El objeto XMLHttpRequest
10

11. El objeto XMLHttpRequest es un elemento
fundamental para la comunicación asincrónica
con el servidor. Este objeto nos permite enviar y
recibir información en formato XML y en general
en cualquier formato.
Para los datos transferidos se usa cualquier
codificación basada en texto, incluyendo: texto
plano, XML, JSON, HTML y codificaciones
particulares específicas.
11

12. Métodos y propiedades
12

13. 13

14. Los valores definidos para la propiedad readyState son los siguientes:
14

15. Los métodos disponibles para el objeto XMLHttpRequest son los
siguientes:
15

16. 16

17. Instanciación del objeto
17

18. Ejemplo
18

19. pagina1.html
19

20. funciones.js
20

21. 21

22. pagina1.php
22

23.  Metodo
 Página con variables
 Si es asíncrona
23

24. pagina1.html
24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. Hemos visto como enviar peticiones al servidor
utilizando los dos métodos de HTTP. De esta
manera podemos evitar recargar
constantemente las páginas proporcionándole
al usuario una mayor interacción y dinamismo.
El mayor inconveniente a la hora de realizar
páginas que utilicen AJAX es que tenemos que
tener en cuenta que las peticiones no son
registradas en el historial, por lo que al volver
atrás no se volverá a la página anterior. Otro
inconveniente es que no se permiten
peticiones AJAX entre distintos dominios.
Tiempo aproximado 8 horas
CONCLUSIONES:
32