Unidad 3 AJAX

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

Objetivo de la Actividad:
Entender y exponer conceptos y ejemplos relacionados con AJAX.
2
•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

3
• 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.

4
• 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.

Código HTML
5
<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>

Código Java Script
addEvent(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

7
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)
{

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']."nn");
• fclose($ar);
• sleep(1);
• ?>
8

14. Paginación con AJAX
10
• Un lugar donde puede ayudar el uso de AJAX es en la
paginación de datos mientras otro recurso en la página se está
ejecutando. Confeccionaremos una página que muestre un video
e inmediatamente en la parte inferior mostraremos los
comentarios del video paginados.
• Sin utilizar AJAX estamos obligados a recargar completamente
la página lo que haría imposible ver el video y recorrer los
comentarios en forma completa (considerando que solo parte de
los comentarios están en la página)

Ejemplo de paginación.
11
• 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.

12
• <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>

• 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

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

15.Cargar un control de tipo select
16
• 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.

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

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

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

• $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

• 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

Conclusión.
23
Uno de los beneficios de AJAX es que es una herramienta
que viene a revolucionar la interacción con los sitios web.

Unidad 3 AJAX

Más contenido relacionado

La actualidad más candente (17)

Similar a Unidad 3 AJAX (20)

Último (20)

Unidad 3 AJAX