Unidad3ajax

24
UNIDAD 3 AJAX Ingeniería en Sistemas Computacionales Antonio Álvarez de la Rocha Campos Muñoz Iosdy Gisela 1

description

Acerca de AJAX

Transcript of Unidad3ajax

Page 1: Unidad3ajax

UNIDAD 3 AJAXIngeniería en Sistemas Computacionales

Antonio Álvarez de la Rocha

Campos Muñoz Iosdy Gisela

1

Page 2: Unidad3ajax

Objetivo de la Actividad:

Entender y exponer conceptos y ejemplos relacionados con AJAX.

•Agenda

13 - Mostrar un gif animado mientras se envían y reciben los

datos del servidor.

14- Paginación con AJAX

15-Cargar un control de tipo select

2

Page 3: Unidad3ajax

• Hasta ahora mientras se actualiza la página mostramos

un texto: 'Procesando...', es muy común utilizar un gif

animado que represente tal operación.

3

Page 4: Unidad3ajax

• Haremos una serie de paginas que nos permitan enviar los datos

cargados en un formulario al servidor en forma asíncrona y

mostraremos un gif animado mientras dura el envió de datos.

4

Page 5: Unidad3ajax

Código HTML

<html>

<head>

<title>Problema</title>

<script src="funciones.js" language="JavaScript"></script>

</head>

<body>

<form action="pagina1.php" method="post" id="formulario"> Nombre:<input type="text" name="nombre" id="nombre" size="20"><br>

Comentarios:<br>

<textarea name="comentarios" id="comentarios" rows="10" cols="50"></textarea><br>

<input type="submit" value="Enviar" id="enviar">

<span id="resultados"></span><br>

<a href="comentarios.txt">Ver resultados</a>

</form>

</body>

</html>

5

Page 6: Unidad3ajax

Código Java ScriptaddEvent(window,'load',inicializarEventos,false);

function inicializarEventos()

{

var ref=document.getElementById('formulario');

addEvent(ref,'submit',enviarDatos,false);

}

function enviarDatos(e)

{

if (window.event)

window.event.returnValue=false;

else

if (e)

e.preventDefault();

enviarFormulario();

}

function retornarDatos()

{

var cad='';

var nom=document.getElementById('nombre').value;

var com=document.getElementById('comentarios').value;

cad='nombre='+encodeURIComponent(nom)+'&comentarios='+encodeURIComponent(com);

return cad; }

6

Page 7: Unidad3ajax

var conexion1;

function enviarFormulario()

{

conexion1=crearXMLHttpRequest(); conexion1.onreadystatechange = procesarEventos;

conexion1.open('POST','pagina1.php', true); conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

conexion1.send(retornarDatos());

}

function procesarEventos()

{

var resultados = document.getElementById("resultados"); if(conexion1.readyState == 4)

{

if (conexion1.status==200)

resultados.innerHTML = 'Gracias.';

Else

alert(conexion1.statusText);

}

else

{

resultados.innerHTML = '<img src="../cargando.gif">';

}

}

//*************************************** //Funciones comunes a todos los problemas //*************************************** function addEvent(elemento,nomevento,funcion,captura)

{

if (elemento.attachEvent)

{

elemento.attachEvent('on'+nomevento,funcion);

return true;

}

Else

if (elemento.addEventListener)

{

7

Page 8: Unidad3ajax

PHP

• <?php

• header('Content-Type: text/html; charset=ISO-8859-1'); $ar=fopen("comentarios.txt","a") or

• die("No se pudo abrir el archivo"); fputs($ar,"Nombre:".$_REQUEST['nombre']."\n"); fputs($ar,"Comentarios:".$_REQUEST['comentarios']."\n\n");

• fclose($ar);

• sleep(1);

• ?>

8

Page 9: Unidad3ajax

Ejemplo de Gif Animado.

9

Page 10: Unidad3ajax

14. Paginación con AJAX

• Un lugar donde puede ayudar el uso de AJAX es en lapaginación de datos mientras otro recurso en la página se estáejecutando. Confeccionaremos una página que muestre un videoe inmediatamente en la parte inferior mostraremos loscomentarios del video paginados.

• Sin utilizar AJAX estamos obligados a recargar completamentela página lo que haría imposible ver el video y recorrer loscomentarios en forma completa (considerando que solo parte delos comentarios están en la página)

10

Page 11: Unidad3ajax

Ejemplo de paginación.

• Una pagina que muestre un video e inmediatamente en la parte

inferior muestre los comentarios del video paginado. Actualizar los

datos de forma asíncrona.

11

Page 12: Unidad3ajax

• <html>

• <head>

• <title>Problema</title>

• <script src="funciones.js" language="JavaScript"></script> </head>

• <body>

• <object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/60og9gwKh1o"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/60og9gwKh1o" type="application/x-shockwave-flash"

• wmode="transparent" width="425" height="350"></embed></object>

• <br>

• <div id="detalles">

• </div>

• </body>

• </html>

12

Page 13: Unidad3ajax

• addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()

{

cargarPagina('pagina2.php');

}

function presionEnlace(e)

{

if (window.event)

{

window.event.returnValue=false;

var url=window.event.srcElement.getAttribute('href'); cargarPagina(url);

}

else

if (e)

{

e.preventDefault();

var url=e.target.getAttribute('href');

cargarPagina(url);

}

}

13

Page 14: Unidad3ajax

Código PHP

• var conexion1;

• function cargarPagina(url)

• {

• if(url=='')

• { return;

• }

• conexion1=crearXMLHttpRequest();

conexion1.onreadystatechange = procesarEventos;

conexion1.open("GET", url, true); conexion1.send(null);

• }

14

Page 15: Unidad3ajax

Ejemplo.

15

Page 16: Unidad3ajax

15.Cargar un control de tipo select

• Confeccionaremos un problema que contenga dos controles de

tipo select. En el primero almacenaremos una lista de carreras

de estudio ("Analista de Sistemas", "Telecomunicaciones" y

"WebMaster")

• Cuando se seleccione una carrera enviaremos una petición al

servidor para que retorne todas las materias que tiene esa carrera

y procederemos a la carga del segundo select.

16

Page 17: Unidad3ajax

Código HTML

• <script src="funciones.js" language="JavaScript"></script>

• </head>

• <body>

• <h1>Prueba de cargar un control de tipo select recuperando datos del servidor

• mediante AJAX</h1>

• Seleccione la carrera:

• <select id="carreras" name="carreras">

• <option value="0">Seleccionar....</option>

• <option value="1">Analista de sistemas</option>

• <option value="2">Telecomunicaciones</option>

• <option value="3">WebMaster</option>

• </select><span id="espera"></span><br>

• Materias de la carrera:

• <select id="materias" name="materias">

• </select><br>

• </body>

• </html>

17

Page 18: Unidad3ajax

JavaScript• addEvent(window,'load',inicializarEventos,false);

• function inicializarEventos()

• {

• var select1=document.getElementById('carreras');

• addEvent(select1,'change',mostrarMaterias,false);

• }

• var conexion1;

• function mostrarMaterias(e)

• {

• var codigo=document.getElementById('carreras').value;

• if (codigo!=0)

• {

• conexion1=crearXMLHttpRequest();

• conexion1.onreadystatechange = procesarEventos;

• conexion1.open('GET','pagina1.php?cod='+codigo, true);

• conexion1.send(null);

• }

• else

• {

• var select2=document.getElementById('materias');

• select2.options.length=0;

• }

• }

18

Page 19: Unidad3ajax

PHP

• <?php

• $car=$_REQUEST['cod'];

• if ($car==1)

• {

• $materias=array('Programacion I','Analisis Matematico',

• 'Estructura de las Organizaciones','Etica Profesional');

• }

• if ($car==2)

• {

• $materias=array('Fundamentos de Fisica','Analisis Matematico 1',

• 'Ingles Tecnico I','Sistemas de Comunicaciones I

• ');

• }

• if ($car==3)

• {

• $materias=array('Informatica I','Multimedia I','Bases de Datos');

• }

19

Page 20: Unidad3ajax

• $xml="<?xml version=\"1.0\"?>\n";

• $xml.="<materias>\n";

• for($f=0;$f<count($materias);$f++)

• {

• $xml.="<materia>".$materias[$f]."</materia>\n";

• }

• $xml.="</materias>\n";

• header('Content-Type: text/xml');

• echo $xml;

• ?>

20

Page 21: Unidad3ajax

Ejemplos.

21

Page 22: Unidad3ajax

• Contratiempos presentados al realizar la actividad.

• Nos salían algunos errores al implementar el código.

• Tiempo Aproximado de la realización.

• 10 Horas

22

Page 23: Unidad3ajax

Conclusión.

Uno de los beneficios de AJAX es que es una herramienta

que viene a revolucionar la interacción con los sitios web.

23

Page 24: Unidad3ajax

24