Tooltip con AJAX y sin frameworks

Usar frameworks está bueno. Ahorra tiempo, esfuerzo y brinda seguridad. Sin embargo, también está bueno entender cómo funcionan las cosas por dentro. Si nos abstraemos siempre y vivimos usando librerías, dependeremos siempre de terceros y tendremos problemas a la hora de arreglárnosla por nuestra cuenta. No estoy diciendo que haya que programar todo desde cero, sino que cada tanto es útil y recomendable mirar lo que usamos para entender algo más sobre su funcionamiento.

En este artículo voy a explicar una forma de utilizar el objeto XMLHttpRequest para hacer una petición al servidor y obtener una respuesta asincrónica. El resultado será un tooltip o ventana que se mostrará sobre un área específica de una página web únicamente cuando el usuario pase el cursor por encima.

En este ejemplo usaré Javascript intrusivo para no añadir nada que dificulte el entendimiento de lo más importante que es el uso del objeto XMLHttpRequest. Lo ideal sería utilizar una función que haga el código no intrusivo como ya mostré en el artículo Javascript no intrusivo para agregar eventos

Pueden ver el ejemplo terminado en el siguiente enlace. Puede que haya incompatibilidades con Internet Explorer. Por tratarse de un ejemplo didáctico no le di mayor importancia a este problema.

Empezamos definiendo un HTML base

Se trata de una página web con un menú de opciones a la izquierda. En la sección <head></head> además de cargar la hoja de estilos, también se cargan dos archivos de Javascript:  XMLHttpRequest.jsscripts.js.

La primera opción del menú tiene dos eventos asociados: onmousemove y onmouseout. Esto habrá que tenerlo en cuenta para más adelante.

El segundo script es el que instancia el objeto XMLHttpRequest que es el que hace posible el viaje por el tiempo… no mentira, ese es el condensador de flujo. El XMLHttpRequest posibilita hacer peticiones al servidor para obtener respuestas asincrónicas, es decir que no sea necesario recargar la página para mostrar cambios en ella. Es la esencia de AJAX.

Este código no es mío. De todas formas se entiende el objetivo y es que se instancie correctamente el objeto que se necesita. Este varía de navegador en navegador. Primero intenta chequear si se usa Internet Explorer. Si eso ocurre, le asigna el objeto correspondiente a la variable xmlhttp. Si no es así, la pone en false y luego entra al último condicional, donde termina entrando para crear otro tipo de objeto para el resto de los navegadores.

El archivo scripts.js usa XMLHttpRequest.js para poder hacer la petición, obtener información a través del servidor y luego mostrarla por pantalla. ¿Dónde estará la información que queremos obtener? En un archivo que se llama tooltip.php. Piensen que con la potencia de PHP esto podría ser reemplazado por una consulta a una base de datos. Pero para este ejemplo, prefiero trabajar con un archivo fijo.

Este es tooltip.php

Lo que tiene dentro es HTML puro. Un título, una imagen, algo de texto y unos divs para ordenar el contenido. La idea es que esta información sea leída a través de una petición vía el objeto XMLHttpRequest y se muestre en la pantalla, en un tooltip o ventana flotante sin recargar la página.

Veamos ahora el archivo scripts.js, el que realiza la “magia” en todo esto.

La función mostrarTip hace lo que su nombre indica. Primero, se encarga de posicionar la ventana o tooltip. Las primeras tres líneas buscan establecer la ubicación utilizando propiedades de CSS.  Las dos siguientes se encargan de obtener las coordenadas x e y en base al elemento e que es el que viene asociado. Noten que ese elemento e debe pasarse como parámetro y que por ese motivo aparece arriba. Luego, a las coordenadas se le suman 5px para que la ventana que aparezca no quede pegada al cursor. Las siguientes dos líneas le ponen el nuevo valor al objeto.

Ahora empieza lo interesante. Veamos en detalle:

La variable serverPage llevará la ruta del archivo al que se quiere apuntar. objId el nombre del id del objeto donde insertaremos la información del archivo.

Luego de obtener el archivo, se empieza a utilizar el objeto XMLHttpRequest, que nos dejó el script anterior. Primero se realiza un open con la intención de obtener información del archivo que indica serverPage.

El evento onreadystatechage es el evento que se activa cada vez que hay un cambio de estado. Y a él se le asociará la función anónima que aparece a continuación.

Hay que entender algunas cosas sobre el objeto XMLHttpRequest. readyState, que aparece en el primer término del if, es un atributo que dice el estado en el que se encuentra. Puede tener los siguientes estados:

0 -> sin inicializar
1 -> abierto
2 -> cabeceras recibidas
3 -> cargando
4 -> completado

Como buscamos que el estado sea completado, chequeamos cuándo vale 4.

Algo similar ocurre con status. Es otro atributo del objeto que devuelve el estado de la petición como un número. Hay dos importantes.

404 -> Not Found
200 -> OK

Es por eso que se verifica si da 200.

Si estas dos condiciones se cumplen simultáneamente, entonces se utiliza innerHTML para insertar en el objeto div seleccionado la respuesta del servidor. Esta respuesta se obtiene de otro atributo del objeto XMLHttpRequest que se llama responseText. El valor de este atributo es la respuesta del servidor en forma de cadena de caracteres. Es decir, el código del archivo al que estamos haciendo la petición, tooltip.php.

La función ocultarTip es la más sencilla de todas. En ella simplemente se obtiene el objeto divToolTip y se cambia su valor para el atributo visibility que se pone en hidden (oculto).

Soy programador web y me desempeño como Líder Técnico en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


*