Posts Tagged ‘AJAX’

junio 11, 2009 1

Breve tutorial de AJAX con jQuery

By in JavaScript, Librerías

Hace unos días se explicaba como utilizar AJAX con Prototype. Hoy le toca el turno a jQuery. Vamos a verlo con un pequeño ejemplo idéntico al que hicimos para Prototype.

ejemploAJAXconjQuery.html:

<html>
<head>
<title>Ejemplo de AJAX con jQuery</title>
<script src="./jquery.js" type="text/javascript"></script>
<script src="./ejemploAJAXconjQuery.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 hacer click 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 jquery.js. Este es el archivo que contiene la librería.

Veamos ahora nuestra función ejemploAJAX:

ejemploAJAXconjQuery.js:

function ejemploAJAX(textID)
{
	var params = "textid=" + textID;
	$.ajax({
		type: "get",
		url: "ejemploAJAXconjQuery.php",
		data: params,
		success: function(respuesta) {
			$('#resultado').html(respuesta);
		}
	}
	);
}

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. Con $.ajax accedemos a la función encargada de realizar el manejo AJAX. A esta función se le pasan varios parámetros para controlar a donde debemos ir a por la información y como realizar la petición. En este caso le pasamos cuatro parámetros, que son el tipo (type), en este caso le indicamos que use el método get, la url del script, los parámetros y la función que se ejecutará cuando la petición se haya realizado correctamente. Como se puede apreciar los parámetros van encerrados entre los corchetes { y } y en el formato parámetro : valor, y separadas por comas.

La función que se ejecuta cuando se realiza correctamente la petición se define, en este caso, en el propio valor del parámetro success. Esta función recibe un parámetro (html) que es la respuesta de nuestro script. En el cuerpo de la función lo único que hacemos es seleccionar el elemento cuyo id es resultado. Para eso usamos la función $ y le pasamos ‘#resultado’ para acceder al elemento. Llamamos al método html pasándole el parámetro respuesta para hacer que el contenido de ese elemento sea la respuesta de nuestro script.

Vamos a ver ahora el script que nos da la respuesta. Un script muy sencillo, pero útil para un ejemplo.

ejemploAJAXconjQuery.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. Como se puede ver es idéntico al script del tutorial de Prototype.

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.

Con esto termina este tutorial sobre AJAX y jQuery. Es recomendable tener siempre a mano la documentación de jQuery, donde se pueden var algunos ejemplos y donde vienen explicados todas las funciones, métodos, etc, de la librería.

Y como siempre los ficheros con el ejemplo:

Ejemplo de AJAX con jQuery

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,

junio 8, 2009 3

Breve tutorial de AJAX con Prototype

By 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

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,