16 18

1.-Mostrar un tooltip con datos
recuperados del servidor en forma
asincrónica
2.-Autocompletar un control de tipo
text
3.-Encuesta con Ajax
Luis Federico Carrillo Ayala [10410520]
Erick Saldivar Regalado [10410075]
Julian Hijar Sotelo [10410522]
20-Noviembre- 2014

Agenda
• Mostrar un tooltip con datos recuperados del
servidor
• Autocompletar un control de tipo text.
• Encuesta con AJAX.

Mostrar un tooltip con datos
recuperados del servidor en
forma asincrónica
Tooltip
Los tooltips son pequeños recuadros de información
que aparecen al posicionar el ratón sobre un
elemento.

La función inicializarEventos crea un div y lo añade al árbol de
objetos, este nos servirá para mostrar el mensaje:
var ele=document.createElement('div');
ele.setAttribute('id','divmensaje');
vec=document.getElementsByTagName('body');
vec[0].appendChild(ele);
La función mostrarTooltip obtiene la referencia del div que muestra
el mensaje (hasta este momento está oculto) y cambia la
propiedad visibility a "visible", luego llama a la función
recuperarServidorTooltip(ref.getAttribute('id')).
function mostrarToolTip(e) {
var d = document.getElementById("divmensaje");
d.style.visibility = "visible";
if (window.event) e=window.event;
d.style.left = e.clientX +document.body.scrollLeft + 15;
d.style.top = e.clientY + document.body.scrollTop + 15;
var ref; if (window.event) ref=window.event.srcElement;
else if (e) ref=e.target; recuperarServidorTooltip(ref.getAttribute('id'));
}

La función ocultarTooTip solo oculta el div del mensaje.
function ocultarToolTip(e) {
d.style.visibility = "hidden";
}
La función recuperarServidorTooltip recibe el valor del atributo id
del div donde se encuentra la flecha del mouse. Se crea un
objeto de la clase XMLHttpRequest y se envía el código del div
respectivo.
var conexion1;
function recuperarServidorTooltip(codigo) {
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open('GET','pagina1.php?cod='+codigo, true);
conexion1.send(null);
}

Luego la función procesarEventos carga el div y procede
hacerlo visible:
function procesarEventos() {
d.style.visibility = "visible";
if(conexion1.readyState == 4) { d.innerHTML=conexion1.responseText; }
else { d.innerHTML = '';
} }
Por último el programa del servidor genera el HTML
dependiendo del código de div enviado (pagina1.php):

Autocompletar un control de
tipo text
• Un ejemplo donde se usa es en las sugerencia de los
buscadores tales como google o facebook a medida que se
va escribiendo en el campo de texto, actuá AJAX para hacer
consulta en la base de datos sobre lo que se va escribiendo y
va dando sugerencias sobre los datos que tiene en la base de
datos sobre la palabra escrita.

En la función inicializarEventos: Ocurre el evento keyup del único control
text que contiene la página. Es decir que cada vez que el usuario presione una
tecla, al momento de soltarla se ejecuta la función presionTecla.
var ob=document.getElementById('palabra');
addEvent(ob,'keyup',presionTecla,false);
La función presionTecla: Crea un objeto de la clase XMLHttpRequest,
extrae el contenido del text y procede a efectuar la petición al servidor pasando
mediante el método GET la cadena ingresada hasta ese momento.
var conexion1; function presionTecla(e) {
conexion1=crearXMLHttpRequest(); conexion1.onreadystatechange
= procesarEventos;
palabra=document.getElementById('palabra').value;
conexion1.open('GET','pagina1.php?palabra='+palabra, true);
conexion1.send(null); }

La función procesarEventos:
Cuando la propiedad readyState informa que llegaron todos los
datos y además la propiedad status retorna un 200 procedemos
a rescatar los datos mediante la propiedad responseXML.
var resultados = document.getElementById("resultados");
if(conexion1.readyState == 4) {
if (conexion1.status==200) { var xml = conexion1.responseXML;
var pals=xml.getElementsByTagName('palabra');
resultados.innerHTML='';
for(f=0;f<pals.length;f++) {
resultados.innerHTML = resultados.innerHTML + pals[f].firstChild.nodeValue +
'<br>'; } }
else alert(conexion1.statusText);}
else { resultados.innerHTML = ''; } }

El archivo que se ejecuta en el servidor y nos retorna el archivo
XML con la lista de palabras (pagina1.php):

Encuesta con AJAX
• La característica principal es que cuando el operador haga
su selección procederemos a enviar la selección al servidor y
generaremos un gráfico en forma dinámica en el servidor y
procederemos a actualizar en forma asincrónica solo una
parte de la página.

Procedemos a capturar el evento submit para enviar los datos
en forma asincrónica:
function inicializarEventos() {
var ref=document.getElementById('formulario');
addEvent(ref,'submit',enviarDatos,false); }
Cuando se presiona el botón submit procedemos a llamar a la
función enviarSeleccion con el número de opción seleccionada:
function enviarDatos(e) {
if (window.event) window.event.returnValue=false;
else if (e) e.preventDefault();
if (document.getElementById('radio1').checked) enviarSeleccion(1);
else if (document.getElementById('radio2').checked) enviarSeleccion(2);
else if (document.getElementById('radio3').checked) enviarSeleccion(3); }

La función enviarSeleccion procede a crear un objeto de la clase
XMLHttpRequest y envía el número de opción seleccionada de la
encuesta y un valor aleatorio para que no rescate el navegador
una página que se encuentre en la cache de la computadora:
var conexion1;
function enviarSeleccion(cod) {
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
var aleatorio=Math.random();
conexion1.open('GET','pagina1.php?codigo='+cod+"&aleatorio="+aleatorio, true);
conexion1.send(null); }
La función procesarEventos carga la imagen generada
dinámicamente en el servidor. Esto se hace cuando el objeto
XMLHttpRequest nos informa que los datos fueron generados
completamente:
var encuesta = document.getElementById("encuesta");
if(conexion1.readyState == 4) { encuesta.innerHTML = ''; }
else {
encuesta.innerHTML = '';
} }
Por último el archivo pagina1.php

Conclusiones.
• Conclusiones Generales:
La tecnología AJAX puede ser utilizada en un amplio
número de ocasiones, se pueden realizar cosas muy
útiles, como se observa en los ejemplos antes
mostrados.
• Contratiempos presentados:
Uno de los ejemplos no se encontraba completo y
requería una base de datos, por lo que se procedió a
realizar bien el ejercicio y crear la base de datos para
que funcionara adecuadamente.

Conclusiones
• Opinion acerca de la dificultad de la actividad y el
tiempo y formato de entrega:
La actividad fue de una dificultad y tiempo
razonables, considerando que el equipo se conformó
por tres personas.
• Tiempo aproximado de realización:
5 horas

16 18

More Related Content

What's hot (20)

Similar to 16 18 (20)

Recently uploaded (20)

16 18