Posts Tagged ‘Prototype’

junio 8, 2009 3

Breve tutorial de AJAX con Prototype

By Manuel Jesús Carrascosa de la Blanca in JavaScript, Librerías

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):

ejemplo de AJAX con Prototype