ejemplos utilizando ajax y metodo get

1. INSTITUTO TECNOLOGICO DE PARRAL
UNIDAD III AJAX
Enlace:
http://es.slideshare.net/ruveron/expo-bauelos
Integrantes:
Nañez Solís Ruth Verónica - 10410550
Vásquez Meléndez Yesenia - 10410552
1

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

3. El mismo ejemplo sin AJAX.
A diferencia del problema anterior ahora no
emplearemos AJAX, es decir, recargaremos la página
completamente al presionar alguno de los
hipervínculos.
Debemos recargar la pág. y actualizar en el servidor
los datos del signo del horóscopo; confeccionaremos
solo una pág. php.
3

4. 4

5. 5

6. Como podemos observar los hipervínculos llaman a la misma
página:
href="pagina1.php?cod=1">Aries</a></p>
Luego el código PHP que se ejecuta en el servidor verifica el
valor que llega como parámetro y muestra el detalle del
horóscopo seleccionado.
6

7. • Si comparamos este ejemplo con el anterior
veremos que utilizar AJAX reduce la cantidad
de información que pedimos al servidor,
también evitamos la recarga completa de la
página.
7

8. Objeto XMLHttp Request
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.
8

9. AJAX engloba el uso de:
• XHTML y CSS para marcar el contenido y
presentarlo.
• DOM para interactuar 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.
9

10. Las propiedades principales del objeto
XMLHttpRequest son:
10

11. Los valores de la propiedad readyState son los
siguientes:
11

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

13. 13
Ejemplo

14. 14

15. 15

16. 16

17. Pasando datos al servidor por el método
GET.
Para indicar cual es el método de envío de
los datos al servidor lo hacemos en el
primer parámetro del método open del
objeto XMLHttpRequest:
17

18. • El envío de los datos se hace por el método
GET.
• El segundo parámetro del método open
donde indicamos el nombre de la página a
pedir.
18

19. • Seguido al nombre de la página debe ir el signo
de interrogación, el nombre del parámetro, luego
un igual y el valor del parámetro. En caso de
haber más de un parámetro debemos separarlos
mediante el carácter ampersand.
• Por último el tercer parámetro del método open
normalmente se pasa el valor true indicando que
el requerimiento de la página es asíncrona .
19

20. HTML
20

21. CSS
21

22. JavaScript
22

23. JavaScript
23

24. JavaScript
24

25. JavaScript
25

26. PHP
26

27. Conclusiones
• Hemos visto como enviar peticiones al servidor.
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.
27

28. • Referencias:
http://www.ajaxya.com.ar/
28

29. ¡GRACIAS POR SU
ATENCIÓN!
29