mjcarrascosa.com » Prototype http://mjcarrascosa.com Desarrollo web y otras hierbas Fri, 08 Jul 2011 07:41:10 +0000 en hourly 1 Breve tutorial de AJAX con Prototype http://mjcarrascosa.com/breve-tutorial-de-ajax-con-prototype/ http://mjcarrascosa.com/breve-tutorial-de-ajax-con-prototype/#comments Sun, 07 Jun 2009 23:04:33 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=86 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

]]> http://mjcarrascosa.com/breve-tutorial-de-ajax-con-prototype/feed/ 3