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

One Response to “Breve tutorial de AJAX con jQuery”

Leave a Reply