[Ae3.1] – exposiciones ajax
-
Upload
jesus-vargas -
Category
Technology
-
view
59 -
download
1
Transcript of [Ae3.1] – exposiciones ajax
1
Temas 16-18
Lilian Paloma Carbajal Ida - 10410592
Jesús Guerrero Vargas García - 10410568
9 de Mayo del 2014
Tópicos de Programación Web
2
ÍNDICE1) Mostrar un tooltip con datos recuperados del servidor en forma
asincrónica
1.1 Conceptos
1.2 Ejemplos
1.3 Elaboración
2) Autocompletar un control de tipo text
2.1 Conceptos
2.2 Ejemplos
2.3 Elaboración
3) Encuesta con AJAX
2.1 Conceptos
2.2 Ejemplos
2.3 Elaboración
4) Conclusiones
3
1) MOSTRAR UN TOOLTIP CON DATOS RECUPERADOS DEL SERVIDOR EN FORMA ASINCRÓNICA
¿Qué es un tooltip?
Un tooltip (también llamada descripción emergente) es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra. (1)
6
Elaboración:
Se necesitan 4 archivos:
1) Un archivo html llamado «pagina1.html»
2) Una hoja de estilo llamada «estilos.css»
3) Un archivo JavaScript denominado «funciones.js»
4) Un programa en php llamado «pagina.php»
10
Se obtiene referencia a todos los «divs» de la página
Se definen las funciones que se llamarán para los eventos «mouseover», «mouseout», «mousemove»
Crea un div que servirá para mostrar el mensaje
11
Función: mostrartooltip
Toma como referencia el div que muestra el mensaje y lo cambia a visible.
Después llama la función recuperarServidorTooltip.
12
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.
17
2) AUTOCOMPLETAR UN CONTROL DE TIPO TEXT
También llamada como lista de sugerencias, a la vez que tecleemos en un campo de texto se mostrarán resultados de palabras que comienzan con los caracteres ingresados.
Ejemplo:
19
Elaboración:
Se necesitan 4 archivos:
1) Un archivo html llamado «pagina1.html»
2) Una hoja de estilo llamada «estilos.css»
3) Un archivo JavaScript denominado «funciones.js»
4) Un programa en php llamado «pagina.php»
22
funciones.js
Función: inicializarEventos
Manda a llamar la función presionTecla cuando ocurre el evento keyup
23
Función: presionTecla
Crea un objeto XMLHttpRequest, extrae el contenido del campo de texto y envía al servidor mediante el método GET la cadena ingresada hasta el momento.
25
Una vez que la propiedad readyState informa que los datos llegaron y además la propiedad status retorna 200 se procede a rescatar los datos mediante responseXML
27
Las palabras para autocompletar se guardan en un vector (en este caso debido a que generalmente se extraen de una bd)
Se almacenan en un vector todas las palabras que comiencen con la cadena ingresada hasta el momento
28
Se genera una cadena cuyo contenido es XML
Informamos al navegador que enviaremos un archivo XML
Indicamos lo que se va a enviar
29
3) ENCUESTA CON AJAX
Concepto:
Es un estudio observacional en el que el investigador busca recaudar datos por medio de un cuestionario previamente diseñado. (2)
Ejemplo:
30
Elaboración:
Se necesitan 4 archivos:
1) Un archivo html llamado «pagina1.html»
2) Una hoja de estilo llamada «estilos.css»
3) Un archivo JavaScript denominado «funciones.js»
4) Un programa en php llamado «pagina.php»
32
funciones.js
Función inicializarEventos
Se captura el evento submit.Cuando se presiona el botón submit se llama a la función enviarSeleccion con el número de opción seleccionada.
33
Función enviarDatos
Esta función manda a llamar la función enviarSeleccion con el número de opción seleccionada
34
Función enviarSeleccion
Crea un objeto de la clase XMLHttpRequest y envía el número de opción seleccionada de la encuesta y un valor aleatorio para evitar interferencias con el cache
35
Función procesarEventos
Crea la imagen generada en el servidor , esto cuando se nos informa que los datos fueron generados correctamente
44
La clase barra permite crear una gráfica de barras creando un objeto de dicha clase y pasando como parámetro los datos respectivos:
45
CONCLUSIONES:Conclusiones generales acerca de lo aprendido
se aprendió que gracias a la herramienta de Tooltip se puede mostrar información clara sobre algún elemento que se coloque en un sitio web
como lo es por ejemplo una imagen en donde al pasar el cursos del mouse encima de la misma se de información acerca de porque esa imagen
se encuentra en el sitio o lo que representa. También se aprendió sobre autocompletar algún control de tipo text que ayuda a los usuarios en la
navegación por el sitio web donde se aplique esta función pues al momento de que ellos quieran realizar una búsqueda esta lo hará mas fácil al
autocompletar los textos que se vallan indicando por el usuario, por ultimo el uso de la aplicación para la creación de una encuesta en AJAX
nos permite crear un sitio web con la opción de encuestas lo que ayuda a que el sitio se pueda actualizar y modificar su contenido conociendo
los intereses de los usuarios. Cada una de estas aplicaciones nos proporcionan conocimientos clave que nos permiten crear un sitio web mas atractivo
y de fácil uso para los usuarios de la Internet.
46
Contratiempos presentados al realizar la actividad
Las actividades no funcionaron al momento de querer abrirlas con Netbeans, existe algún problema con php que no se pudo solucionar.
Debido a desconocer mucho de las tecnologías utilizadas para los ejemplos, en momentos hubo desorientación.
Opinión acerca de la dificultad de la actividad y el tiempo y formato de entrega
La dificultad fue alta ya que en los ejemplos hay mucho código que interpretar.
Tiempo aproximado de realización
6 horas
47
REFERENCIAS
1. Información sobre herramientas. Wikipedia. [Online] [Cited: 05 2014, 08.] http://es.wikipedia.org/wiki/Informaci%C3%B3n_sobre_herramientas .
2. Users. Encuesta. Wikipedia. [Online] [Cited: 05 08, 2014.] http://es.wikipedia.org/wiki/Encuesta