ajax ya temas 4-6 equipo 2

1

4.- El mismo ejemplo sin AJAX. 3

5.- Objeto XMLHttpRequest. 6

6 - Pasando datos al servidor por el método GET. 23

2

3

4

Si comparamos este ejemplo con el

anterior veremos que utilizar AJAX

reduce la cantidad de información que

pedimos al servidor

5

Objeto

XMLHttpRequest(Extensible Markup Language / Hypertext Transfer

Protocol)

6

AJAX mediante un ejemplo teórico

7

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

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

El objeto XMLHttpRequest

10

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

Métodos y propiedades

12

13

Los valores definidos para la propiedad readyState son los siguientes:

14

Los métodos disponibles para el objeto XMLHttpRequest son los

siguientes:

15

16

Instanciación del objeto

17

Ejemplo

18

pagina1.html

19

funciones.js

20

21

pagina1.php

22

Metodo

Página con variables

Si es asíncrona

23

pagina1.html

24

25

26

27

28

29

30

31

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