Hacer uso de AJAX es realmente fácil con Prototype. Podéis descargarla desde su página de desacarga. Para mostrarlo vamos a ver un pequeño ejemplo:
ejemploAJAXconPrototype.html:
<html> <head> <title>Ejemplo de AJAX con Prototype</title> <script src="./prototype.js" type="text/javascript"></script> <script src="./ejemploAJAXconPrototype.js" type="text/javascript"></script> </head> <body> <div> <ul> <li><a href="javascript:ejemploAJAX(1);">Obtener texto 1.</a></li> <li><a href="javascript:ejemploAJAX(2);">Obtener texto 2.</a></li> <li><a href="javascript:ejemploAJAX(3);">Obtener texto 3.</a></li> </ul> </div> <div id="resultado"> </div> </body> </html>
Con estro creamos una lista con tres enlaces. Al pulsar sobre cada uno de ellos se llama a la función ejemploAJAX y le pasamos un valor numérico. En la cuarta linea podemos observar como se añade el archivo prototype.js. Este es el archivo que contiene la librería.
Veamos ahora nuestra función ejemploAJAX:
ejemploAJAXconPrototype.js:
function ejemploAJAX(textID) { var params = 'textid=' + textID; var ajaxRequest = new Ajax.Request( 'ejemploAJAXconPrototype.php', { method: 'get', parameters: params, asynchronous: true, onComplete: mostrarRespuesta } ); } function mostrarRespuesta(xmlHttpRequest, responseHeader) { $('resultado').innerHTML = xmlHttpRequest.responseText; }
Como se puede apreciar se crea una variable llamada params con los parámetros que tendrá la llamada al script que nos devolverá el resultado. A continuación creamos un objeto Ajax.Request. Para ello le pasamos como primer parámetro la url del script que nos devolverá la información. A continuación le pasamos las opciones, encerradas entre los corchetes { y } y en el formato opción : valor, y separadas por comas. En nuestro caso le decimos que el método como debe llamar al script es ‘get’, que le pase los parámetros params, que es asíncrono y que cuando se haya finalizado la petición llame a mostrarRespuesta.
Después definimos la función mostrarRespuesta, que lo único que hace es que el contenido del div resultado sea la respuesta de nuestro script. Para ello usamos la función $ que nos devuelve un elemento en función de su id. A la propiedad innerHTML le asignamos xmlHttpRequest.responseText, que contiene la respuesta del script solicitado.
Vamos a ver ahora el script que nos da la respuesta. Un script muy sencillo, pero útil para un ejemplo.
ejemploAJAXconPrototype.php:
<?php switch($_GET['textid']) { case 1: echo "Texto de ejmplo uno."; break; case 2: echo "Texto de ejmplo dos."; break; case 3: echo "Texto de ejmplo tres."; break; } ?>
Simplemente en función de la variable textid, el parámetro que le pasamos, nos devuelve un texto u otro.
En este caso, al ser un ejemplo, el texto devuelto es muy simple, pero podríamos haber devuelto la información en formato XML o JSON para luego procesarlo mediante JavaScript en nuestra página.
Aquí teneis para descargar los archivos de este tutorial (está incluida la librería Prototype):
Artículos relacionados:
Tags: AJAX, JavaScript, Prototype