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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head><TITLE></TITLE> <script src="dist/prototype.js" type="text/javascript"></script> <script> function cargar() { url = 'http://localhost/Readme.txt'; pars = ''; var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: mostrarTexto } ); } function mostrarTexto(originalRequest) { $('textoCargado').innerHTML = originalRequest.responseText; } </script> <style> #textoCargado { border: 1px solid #000000; width: 50%; } </style> </head> <body> <a href="javascript:cargar()">Cargar texto</a> <div id="textoCargado"></div> </body> </html> |
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:
|
1 |
$('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í.
Hola me parecio sencilla tu explicacion algo muy importante para los que queremos empezar con ajax, asi que espero el proximo articulo.
gracias
cuando quiero hacer un request a htttp://www.google.com no aparece nada, pero con el debug de firebug obtengo el error “Permiso denego al llamar al metodo XMLHttpRequest.open”. Podrian ayudarme a solucionar el error. gracias!