Está en la página 1de 31

Construccin de Aplicaciones Web Dinmicas con Ajax

Mtro. Juan Pablo Ucn Pech juan.ucan@uady.mx


Diapositiva 15 1

3. JavaScript Asincrnico o Scripting Remoto

Diapositiva 15

Fundamentos bsicos de Ajax

Diapositiva 15

AJAX

Contenido

El protocolo HTTP
Peticiones HTTP Respuestas HTTP Tcnicas de comunicacin Ajax La tcnica de los marcos ocultos Peticiones XMLHttp
Diapositiva 15 4

AJAX

El protocolo HTTP

Protocolo que sirve para transmitir pginas Web, imgenes y otros tipos de archivos en Internet a travs de cliente y el servidor.

Diapositiva 15

AJAX

El protocolo HTTP

HTTP esta formado por dos partes: una peticin y una respuesta.

Diapositiva 15

AJAX

Peticiones HTTP

El formato de peticin es el siguiente:


<lnea-peticin> <cabeceras> <lnea en blanco> [<cuerpo-peticin>]

Diapositiva 15

AJAX

Peticiones HTTP

Hay un gran nmero de peticiones HTTP, nos interesan:


GET POST

Diapositiva 15

AJAX

Peticiones HTTP

Por ejemplo una peticin GET de www.matematicas.uady.mx:


GET / HTTP /1.1

HOST: www.matematicas.uady.mx
User-Agent: Mozilla/5.0 (Windows U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1

Connection: Keep-Alive

Diapositiva 15

AJAX

Peticiones HTTP

Si se hiciera una peticin tal como www.matematicas.uady.mx/directorio:


GET /directorio/ HTTP /1.1

HOST: www.matematicas.uady.mx
User-Agent: Mozilla/5.0 (Windows U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1

Connection: Keep-Alive

Diapositiva 15

10

AJAX

Peticiones HTTP

Enviar parmetros a una peticin GET, requiere informacin adicional a la URL:


URL ? nombre1=valor1&nombre2=valor2&&nombreN=valorN

Esta informacin es conocida como cadena de consulta

Diapositiva 15

11

AJAX

Peticiones HTTP

Se duplica en la lnea de peticin de la solicitud HTTP:


GET /directorio/?name=Juan%20 Pablo HTTP /1.1

HOST: www.matematicas.uady.mx
User-Agent: Mozilla/5.0 (Windows U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1

Connection: Keep-Alive

Diapositiva 15

12

AJAX

Peticiones HTTP

El mismo ejemplo para una peticin POST es:


POST / HTTP /1.1 HOST: www.matematicas.uady.mx

User-Agent: Mozilla/5.0 (Windows U; Windows NT 5.1; en-US; rv:1.7.6)


Gecko/20050225 Firefox/1.0.1 Content-Type: application/x-www-form-urlencoded
Content-Length: 40

Connection: Keep-Alive
Diapositiva 15 13

nombre=Juan%20Pablo&apellido=Ucan

AJAX

Peticiones HTTP

Con respecto a las diferencias de POST con GET:


Content-Type indica como esta codificado el cuerpo de la peticin, los navegadores siempre codifican, como en el ejemplo, que es del tipo MIME para una codificacin URL sencilla. Content-Length indica la longitud en bytes del cuerpo de la peticin. El cuerpo de la peticin POST esta formado por Diapositiva 15 14 pares sencillos nombre-valor

AJAX

Respuestas HTTP

El formato de respuesta es el siguiente:


<lnea-estado> <cabeceras> <lnea en blanco> [<cuerpo-respuesta>]

Diapositiva 15

15

AJAX

Respuestas HTTP

Un ejemplo de respuesta HTTP sencilla:


HTTP/1.1 200 OK Date: Wen, 1 Feb 2012 18:05:59 GMT

Content-Type: text/html:charset=ISO-8859-1
Content-Length: 122

<html>
<head> <title>Directorio</title> </head> <body> <! aqu va el cuerpo --> </body>
Diapositiva 15 16

</html>

AJAX

Tcnicas de comunicacin AJAX

Las tcnicas de AJAX dan libertad a los desarrolladores para esperar que le usuario realice alguna peticin al servidor en cualquier momento: La tcnica de los marcos ocultos.
Peticiones XMLHttp

Diapositiva 15

17

AJAX

La tcnica de los marcos ocultos

Consiste en crear un conjunto de marcos con un marco oculto que se utiliza para la comunicacin cliente-servidor. El patrn.
Peticiones GET en el marco oculto.

Peticiones POST en el marco oculto.


Marcos flotantes ocultos.
Diapositiva 18 Peticiones POST en los15marcos flotantes ocultos.

AJAX

La tcnica de los marcos ocultos

El patrn.
La tcnica de los marcos ocultos siguen un patrn de cuatro pasos.
Navegador Web Marco visible

4
Llamada JavaScript Servidor Web

1
Llamada JavaScript Marco oculto Pgina Web

3
Base de Datos

Peticin

19 Diapositiva 15

AJAX

La tcnica de los marcos ocultos

Peticiones GET en el marco oculto


Chequemos con el ejemplo que consiste en un servicio de atencin al cliente para buscar informacin sobre un comprador. El usuario introduce un identificador y recibe de vuelta informacin sobre el cliente

Diapositiva 15

20

AJAX

La tcnica de los marcos ocultos

Peticiones GET en el marco oculto


Se necesita una tabla de clientes:

Diapositiva 15

21

AJAX

La tcnica de los marcos ocultos

Peticiones GET en el marco oculto


Cdigo HTML:

Diapositiva 15

22

AJAX

La tcnica de los marcos ocultos

Peticiones GET en el marco oculto


Cdigo HTML:

Diapositiva 15

23

AJAX

La tcnica de los marcos ocultos

Peticiones GET en el marco oculto


Cdigo HTML:

Diapositiva 15

24

AJAX

La tcnica de los marcos ocultos

Peticiones GET en el marco oculto


Cdigo HTML:

Diapositiva 15

25

AJAX

La tcnica de los marcos ocultos

Peticiones GET en el marco oculto


Cdigo PHP (getCustomerdata.php):

Diapositiva 15

26

AJAX

La tcnica de los marcos ocultos

Peticiones GET en el marco oculto


Cdigo PHP (getCustomerdata.php):

Diapositiva 15

27

AJAX

La tcnica de los marcos ocultos

Diapositiva 15

28

AJAX

La tcnica de los marcos ocultos

Diapositiva 15

29

PHP

Bibliografa

Nicholas C Zakas, Jeremy McPeak, Joe Fawcett, Profesional Ajax, Ediciones Anaya Multimedia, 2006.

Diapositiva 15

30

Construccin de Aplicaciones Web Dinmicas


Mtro. Juan Pablo Ucn Pech juan.ucan@uady.mx
Diapositiva 15 31