Nideaderedes

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í.

Entradas relacionadas

1. Código para actualizar el contenido de una capa con Scriptaculous
2. Introducción a PHPMailer
3. Introducción a bash: crear un sencillo script
4. Introducción a Google Maps
5. Code Igniter: llamar a un controlador desde consola o desde otro fichero.php