En el Manual de jQuery ya habíamos tratado con anterioridad el Ajax en este framework Javascript, principalmente para demostrar hasta qué punto era sencillo hacer una conexión asíncrona con el servidor por medio del método load(). Incluso habíamos ido un poco más lejos, sin abandonar la facilidad, implementando un script Ajax con el típico mensaje de carga.

En el presente artículo vamos a empezar a explorar algunas otras funciones existentes en jQuery que sirven para hacer Ajax y algunos usos un poco más avanzados, que nos permitirán ampliar nuestras habilidades y el tipo de problemas que podamos enfrentar. Comenzaremos por el método $.get(), que como veremos es casi tan sencillo como el ya comentado método load().

Hasta el momento, con el método load() habíamos aprendido a hacer una solicitud Ajax y a cargar en un elemento de la página el HTML resultante de esa solicitud. El método $.get(), a diferencia de load() no vuelca el resultado de la solicitud en ningún sitio de manera predeterminada, sino que simplemente se dedica a realizar la conexión con el servidor y recibir la respuesta. Esto no quiere decir que luego no podamos volcar el resultado de la solicitud en el HTML de una capa o cualquier otro elemento de la página, sino que para conseguirlo, deberemos especificarlo en el código de nuestro script. De esto podemos deducir que $.get() no tiene un funcionamiento predeterminado (es decir, y no hace nada fijo con la respuesta de la solicitud Ajax) y por tanto, nosotros podemos programar cualquier comportamiento que deseemos en nuestras aplicaciones.

En este primer artículo vamos a dedicarnos a hacer una lista de ejemplos de dificultad creciente con el método $.get(), que nos sirvan para entender cómo funciona. Como muchos de los métodos de jQuery, $.get() varía su comportamiento dependiendo de los parámetros que le enviemos.

$.get(URL)

Si a $.get() le pasamos una cadena con una URL, el método hace una solicitud Ajax a dicha URL, pero no hace nada con la respuesta obtenida del servidor.

$.get("contenido-ajax.html");

Es decir, si ejecutamos ese código anterior, el navegador cursará la solicitud Ajax de la página "contenido-ajax.html" y con ello obtendrá una respuesta. Sin embargo, no hará nada con esa respuesta una vez recibida y por tanto no veremos ningún resultado en el navegador.

$.get(URL, funcion)

En este segundo caso, estamos pasando dos parámetros, el primero la URL de la solicitud Ajax a realizar y el segundo una función con el código a ejecutar cuando se reciba la respuesta, que incluirá todas las acciones a realizar cuando se reciba. En esa función a su vez recibimos varios parámetros, siendo el más importante el primero, en el que tendremos una referencia al resultado de la solicitud realizada. Lo vemos con un ejemplo:

$.get("contenido-ajax.html", function(respuestaSolicitud){
   alert(respuestaSolicitud);
})

En este caso hacemos una solicitud al archivo "contenido-ajax.html". Luego, cuando se reciba la respuesta se ejecutará el código de la función. En la función recibimos un parámetro " respuestaSolicitud", que contendrá el código HTML devuelto por el servidor al solicitar esa página por Ajax. Como se puede ver, en la función simplemente mostramos en una caja de alerta el contenido de la respuestaSolicitud.

Ese código en marcha se puede ver en una página aparte.

$.get(URL, datos, funcion)

Un tercer caso de uso de esta función es enviar tres parámetros, uno con la ruta de la página a solicitar, otro con datos que se enviarían en la URL de la solicitud HTTP (que recibiremos en el servidor por el método GET) y una función para hacer cosas cuando la solicitud haya sido completada y se tenga el resultado.

En este caso tenemos un comportamiento similar al anterior, con la particularidad que estamos enviando al servidor una serie de datos, como variables en la URL. Dichos datos se especifican desde jQuery con notación de objeto.

$.get("recibe-parametros2.php", {nombre: "Evandro", edad: "99"}, function(respuesta){
   $("#miparrafo").html(respuesta);
})

Como se puede ver, se accede por Ajax a la página recibe-parametros2.php y se le pasan dos variables por GET, un nombre y una edad. En este caso tenemos también una función para ejecutar acciones con la respuesta y simplemente volcamos dicha respuesta en un elemento de la página que tiene el identificador id="miparrafo".

Esas variables enviadas en la solicitud HTTP, como decimos, se recogerían en las páginas con programación del lado del servidor por el método GET. Por ejemplo, este sería el código PHP necesario para recibir esas variables:

Recibido el siguiente dato:
<br>
Nombre: <?php echo $_GET["nombre"];?>
<br>
Edad: <?php echo $_GET["edad"];?>

Podemos ver el ejemplo en marcha en una página independiente.

$.get(URL, datos, funcion, tipo_dato_respuesta)

Este último caso de $.get() sirve para especificar un parámetro adicional, que es el tipo de dato que se espera recibir como respuesta del servidor. Lo típico es que del servidor nos llegue un código HTML, pero también podría ser un XML, un script o un JSON.

Para mostrar esta posible llamada a jQuery.get() vamos a mostrar un ejemplo en el que desde el servidor recibimos un dato en notación JSON, que es un tipo de respuesta bastante utilizado en las aplicaciones web del lado del cliente.

En este ejemplo hemos complicado un poco nuestro script, para que se vea cómo con $.get() podemos hacer cosas muy diversas con la respuesta y no solo escribirla en la página o en una caja de diálogo. Para ello tenemos simplemente que complicar todo lo que queramos la función que recibe la respuesta y hace cosas con ella. En este caso, como recibimos un archivo en notación JSON, podemos hacer cosas distintas dependiendo del contenido de ese JSON.

El ejemplo siguiente hace un rudimentario cálculo del precio final de un producto, que sería la base imponible más el IVA. Además, en este supuesto ejercicio podríamos tener varios tipos de clientes, por ejemplo españoles (a los que hay que aplicarles el impuesto IVA) o extranjeros, que están exentos de pagar tal impuesto.

Tenemos un par de botones, con un par de casos de productos:

<button id="coniva">Calcular precio 20 para cliente español (hay que cobrar IVA)</button>
<button id="siniva">Calcular precio 300 para cliente de Brasil (no se le cobra IVA)</button>

Como se ve, un botón tiene un precio para cliente español y otro para un cliente brasileño. La funcionalidad de esos botones podríamos expresarla generando un de evento click, para cada uno de los botones:

$("#coniva").click(function(){
   $.get("recibe-parametros-devuelve-json.php", {pais: "ES", precio: 20}, muestraPrecioFinal, "json");
})
$("#siniva").click(function(){
   $.get("recibe-parametros-devuelve-json.php", {pais: "BR", precio: 300}, muestraPrecioFinal, "json");
})

El detalle que tenemos que reparar en este código es que estamos enviando un último parámetro a la función $.get() con el valor "json". Con eso indicamos que la respuesta del servidor se espera con notación JSON. Además, como se puede ver, los botones invocan a la misma página recibe-parametros-devuelve-json.php, pero se les pasa datos distintos por GET al servidor. También hay una única función "muestraPrecioFinal" que se encargará de mostrar el precio final en la página. Esa función la hemos definido aparte, con el siguiente código:

function muestraPrecioFinal(respuesta){
   $("#base").html("Precio final: " + respuesta.preciofinal);
   if (respuesta.tieneiva=="1"){
      $("#base").css("background-color", "#ffcc00");
   }else{
      $("#base").css("background-color", "#cc00ff");
      $("#base").append($('<span class="clienteext">No se aplica IVA por ser cliente extranjero</span>'));
   }
}

Con esta función queríamos demostrar cómo se pueden hacer cosas distintas dependiendo de la respuesta. En concreto, en este ejemplo, para el caso de ser cliente español o extranjero se realizan acciones ligeramente diferentes.

Además, en la función recibimos un parámetro "respuesta". En este caso, como lo que recibíamos es una respuesta en JSON, dicha variable tendrá diferentes datos que podemos acceder como si fueran propiedades de un objeto. Por ejemplo, respuesta.preciofinal tiene el valor de precio total, una vez aplicado el IVA o no dependiendo de la nacionalidad del cliente. Por su parte, respuesta.tieneiva nos sirve para saber si correspondía o no aplicar IVA a ese cliente.

Nos quedaría por ver la página PHP recibe-parametros-devuelve-json.php, que contiene el código para recibir los datos por GET y generar el JSON adecuado para la respuesta de la solicitud Ajax.

<?php
if ($_GET["pais"]!="ES"){
   echo json_encode(array("tieneiva"=>"0", "preciofinal"=>$_GET["precio"]));
}else{
   echo json_encode(array("tieneiva"=>"1", "preciofinal"=>($_GET["precio"] * (18 / 100)) + $_GET["precio"]));
}
?>

Este ejemplo de Ajax con respuesta en formato JSON lo podemos ver en una página aparte.

En el siguiente artículo veremos cómo podemos aplicar unos eventos a este método $.get() para poder hacer cosas cuando la solicitud se complete, con éxito o con error.