$.get() de jQuery para hacer una solicitud Ajax tipo HTTP GET

  • Por
Análisis y ejemplos de la función $.get() de jQuery que sirve para hacer una solicitud Ajax al servidor en la que podemos enviar datos por el método GET.
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.

Nota: el método $.get() también lo podremos encontrar nombrado como jQuery.get() ya que $ es una abreviación del objeto jQuery.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

CarlitosG

05/4/2011
Excelente articulo! pero me quedó una duda...!
Saludos a toda la gente de Desarrolloweb.com!
Les paso una duda que tengo..
En mi sistema traigo datos de una tabla mediante $.get() de jQuery, pero como no estoy familiarizado con Json, lo que estaba haciendo para obtener los datos era concatenar los campos mediante el caracter "ª", y a su vez, cada registro mediante el caracter "|", para hacer un "echo" de esa respuesta y recibirla en la pagina principal. Asi obtenía una cadena de texto GIGANTE que luego separaba mediante splits, por lo que me quedaba una matriz donde realizaba todo lo que necesitaba del lado del cliente.
El tema es que son aproximadamente 2900 registros con 9 campos cada uno, por lo que tengo un delay de aproximadamente 3 segundos hasta que se procesa todo. Ahora la pregunta del millon:
Podría usar Json para mi caso? Creo que debería ser un array de Json donde cada elemento corresponda a cada registro, pero no se como hacerlo...
En caso de poder hacer eso....Mejorará la performance?? O en definitiva Json hace "lo mismo" que lo que estoy haciendo de una manera mas cómoda...
Les dejo esa inquietud, si alguien cree que la respuesta es afirmativa, voy a hacer el cambio y les cuento la diferencia.
Muchas gracias por su tiempo!
Saludos desde Tucumán, Argentina!

Luis

05/4/2011
oponion
Bueno, yo creo q no es necesario en tu caso devolver un JSON, puedes en el mismo fichero php crear dinamicamente los resultados generados en tu consulta con los parámetros que recibes y devolver todo el contenido html, es decir la tabla con cada columna de los registros correspondientes, así te evitas andar haciendo maniobras con explit, etc, bueno realmente no se si esto te pueda ayudar a solucionar tu problema.

Saludos desde México.!

4N70N10

06/4/2011
Sugerencia
Cargar 2900 registros en una sola pagina es una carga innecesaria para tu sitio, lo mejor es que utilices algún paginado, y pedir los registros en grupos mas pequeños; sobre lo del json es como dices harás lo mismo de una forma mas cómoda, pero es realmente mas cómodo.
Saludos desde CUBA

ciberwap

06/4/2011
buen tuto
gracias por este tuto la parte de json no lo sabia usar ahora con este ejemplo ya lo pude =D aparte la de usar arrays en el php para procesar despues las variables en js es buenisimo es justo lo que estaba buscando por que hacia muchas cosas para saber si mi resultado devuelto era true o false en mis programaciones actuales con jquery

belenxi

18/2/2013
Eternamente agradecida
Muchas muchas muchas gracias por este tutorial. Llevaba varios días intentando aprender cómo hacer exactamente lo que explicas aquí y no conseguía que funcionara. ¡GRACIAS!

Esteban

14/10/2014
CONSULTA URGENTE
Buenos días, necesito apoyo de ustedes que son los que mas conocen de este tema, estoy con un proyecto de la Universidad que por medio de Ajax, llame todos los elementos de esta url http://kromeditors.com/rest_api/js/data.json, la cual contiene un json completo, para que luego de haberlos llamado me pinte en el HTML este sitio http://kromeditors.com/rest_api/#/

De verdad me urge, doy la calificación mas alta al que me ayude.

Pablo

01/12/2014
Agradecimiento
Muchísimas gracias. el sitio está terrible y estoy aprendiendo JQuery con el compilado de post que armaron en un pdf, así que solo eso, creo que siempre hay que agradecer y hacel algo muy bueno.

Abrazo!, Pablo.

Francisco Andreau Asencio

10/12/2014
Excelente
Muchas gracias,

c-ba

11/12/2014
caracteres especiales
Utilizo este método para traer datos de otra página a la que le envío el id y me devuelve el nombre, pero no me trae las ñ Ñ ni las letras con acentos