Código para actualizar el contenido de una capa con Scriptaculous

Aquí os dejo un código JavaScript que actualiza el contenido de una capa mediante Ajax. La transición entre el contenido de la capa y el nuevo se hace mediante un efecto de difuminado con Scriptaculous. El efecto se repite cíclicamente.

Usa Protoype y Scriptaculous.

La capa que se actualiza debe llamarse “capa”:

<div id="capa"></div>

y en la etiqueta body debemos añadir:

<body onload="start_fading();">
<script language="javascript"  type="text/javascript"><!--
function start_fading(){
	var fade=setTimeout("fadeout()",4000);
}
 
function fadeout(){
    new Effect.Opacity("capa", {duration:0.5, from:1.0, to:0.0});
	var fade=setTimeout("change()",600);
}       
function change(){
	new Ajax.Request('/script.php',
	  {
	    method:'get',
	    onSuccess: function(transport){
	      var response = transport.responseText || "no response text";
	      $('specials_sidebox').innerHTML = response;
		  new Effect.Opacity("capa", {duration:0.5, from:0.0, to:1.0});
		  var fade=setTimeout("fadeout()",4000);
	    },
	    onFailure: function(){  }
	  });
}
//--></script>

El funcionamiento es el siguiente:

1) El evento onload() de la etiqueta body llama a la función start_fading() que pone en marcha un cronómetro que llamará a la función fadeout() al de 4000 milisegundos.

2) La función fadeout() hace que el elemento “capa” vaya desapareciendo difuminándose. Además establece un nuevo cronómetro que llamará al de 600 milisegundos a la función change.

3) La función change hace una llamada al fichero ‘script.php’ mediante ajax para cambiar el contenido de capa (que está todavía oculto). Cuando se ha terminado de ejecutar script.php se ejecuta automáticamente la función dentro de ‘onSuccess’.

4) Esta función sustituye el contenido de ‘capa’ por lo que haya devuelto script.php, hace un fade in (vuelve a mostrar capa) y establece un nuevo cronómetro para empezar el proceso de nuevo.

NOTAS:

* Hay que tener en cuenta que cada vez que se repite el proceso se hace una llamada a script.php. Si este script consume muchos recursos podemos estar sobrecargando el servidor (cada usuario que tenga la ventana abierta estará haciendo llamadas cada 4600 milisegundos aproximadamente.

* Si es posible quizá fuera mejor precargar los disintos contenidos de ‘capa’ e ir rotándolos en cada ciclo sin hacer una llamada Ajax (eso os lo pongo otro día).

Introducción a Prototype – un toolkit Ajax

Realmente Prototype no es sólo un framework para Ajax, es un framework para Javascript. Es bastante sencillo de usar y ligero. Existen otras opciones, como Dojo, pero yo uso habitualmente Prototype principalmente porque lo conozco desde hace más tiempo y por su sencillez (también me convenció que se usa en el proyecto de Ruby on Rails).

Voy a escribir una serie de artículos (tres en principio) para mostrar cómo usar las características Ajax de Prototype.

Lo primero es descargarse es fichero prototype.js de su web (elige la opción “just the .js please”). La instalación es sencilla, símplemente añade el fichero al directorio de tu proyecto. Yo suelo ponerlo en un directorio, por ejemplo en dist/prototype.js. Y con esto ya está listo para usar.

Este ejemplo que he preparado lo único que hace es cargar un fichero del servidor y mostrarlo en la página. Vamos a ver el código y luego lo analizamos:










Cargar texto

Cuando pinchamos en el enlace ‘Cargar texto’ se ejecuta la función cargar(). Esta función crea un objeto Ajax, definido en prototype.js, y hace una llamada. Los parámetros que usa para la llamada son:

  • url – la dirección a la que se conecta.
  • method – el tipo de llamada post o get.
  • parameter – los parámetros que se pasa a la url (en el ejemplo está en blanco).
  • onComplete – la función que se va a ejecutar cuando se finalice la llamada. Es este caso mostrarTexto.

En este ejemplo se hace una llamada a la URL: http://localhost/Readme.txt y se carga el contenido de ese fichero en el objeto originalRequest. Gracias a:

$('textoCargado').innerHTML = originalRequest.responseText;

el contenido del div textoCargado se sustituye por el contenido del fichero Readme.txt.

Nota: la función $() nos facilita acceder a cualquier elemento de la página a través de su ‘id’ (como hace getElementById, pero $() es más completa).

Como se puede apreciar es bastante sencillo usar Ajax gracias a Prototype. En la próxima entrega vamos a ver cómo hacer una llamada conectándonos a una base de datos usando PHP y Prototype.

Más información, en inglés, aquí.

Herramientas para medir el Page-Rank

Live PageRank es una herramienta creada con Ajax que permite conocer el PageRank de una web conectándose a unos cuantos datacenters de Google (unos 73). Basta con introducir la URL deseada en el formulario que nos muestra y listará la información disponible en cada uno de los datacenters.

También disponen de una extensión para Firefox que permite ver el Page-Rank de una web.

Y otra curiosa herramienta es ésta que muestra a los visitantes de tu web el PageRank de la misma. Recomendación: no usar con PageRank 0 :-).

Vía: 521 Megas.

Actualización: La extensión para Firefox y la herramienta para mostrar el PageRank de tu web parece que ya no funcionan debido a cambios que han hecho en Google.