Y el post anterior tenia una finalidad clara, introducirnos el concepto de JSON para que lo podamos emplear facilmente desde JQuery. JQuery es una libreria JavaScript que nos permite crear aplicaciones muy potentes de manera muy simple.
En JQuery existe una funcion llamada getJSON que simplifica las llamadas Ajax a un servidor. El formato de esta funcion es el que vemos en el siguiente enlace. Esta llamada lo que hace es enviar una peticion a una determinada URL y esperar a recibir una respuesta en formato JSON, cuando llega la respuesta entonces ejecuta una funcion de procesado de la respuesta.
Probemos el ejemplo de la pagina. Abre un editor de texto y copia el siguiente codigo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<a class="external free" title="http://www.w3.org/TR/html4/loose.dtd" href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>">
<html>
<head>
<script src="<a class="external free" title="http://code.jquery.com/jquery-latest.js" href="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"></script>
<script>
$(document).ready(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
});
</script>
<style>img{ height: 100px; float: left; }</style>
</head>
<body>
<div id="images"></div>
</body>
</html>
Cuando lo ejecutes, podras ver que se te muestran la imagen de 4 gatitos. (¿Y esto como es posible?). Vamos a verlo, diseccionando el codigo:
Lo primero que hacemos es importar la libreria de JQuery:
<script src="<a class="external free" title="http://code.jquery.com/jquery-latest.js" href="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"></script>
Sin mayor misterio. esto es solo para poder usar JQuery.
La funcion que nos interesa es precisamente getJSON, que es de la forma:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
codigo_a_ejecuta_cuando_llega_la_respuesta
}
Si te fijas, estamos enviando una peticion a la siguiente URL:
"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"
Que si la copiamos y pegamos en la URL de un navegador, esta devolviendo precisamente un string en formato JSON:
({
"title": "Recent Uploads tagged cat",
"link": "http://www.flickr.com/photos/tags/cat/",
"description": "",
"modified": "2008-09-06T22:41:00Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "Jungle-apartment cat",
"link": "http://www.flickr.com/photos/28359008@N04/2833762651/",
"media": {"m":"http://farm4.static.flickr.com/3075/2833762651_5a09bd3f11_m.jpg"},
"date_taken": "2008-07-06T23:52:55-08:00",
"description": "<p><a href="http://www.flickr.com/people/28359008@N04/">World Eggplant</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/28359008@N04/2833762651/" title="Jungle-apartment cat"><img src="http://farm4.static.flickr.com/3075/2833762651_5a09bd3f11_m.jpg" width="240" height="160" alt="Jungle-apartment cat" /></a></p> ",
"published": "2008-09-06T22:41:00Z",
"author": "nobody@flickr.com (World Eggplant)",
"author_id": "28359008@N04",
"tags": "cute cat ling katt"
},
{
"title": "Let Me0owwwt",
"link": "http://www.flickr.com/photos/sudsmuffincanada/2833750221/",
"media": {"m":"http://farm4.static.flickr.com/3215/2833750221_0361858bb6_m.jpg"},
"date_taken": "2008-09-05T18:41:14-08:00",
"description": "<p><a href="http://www.flickr.com/people/sudsmuffincanada/">SudsMuffinCanada</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/sudsmuffincanada/2833750221/" title="Let Me0owwwt"><img src="http://farm4.static.flickr.com/3215/2833750221_0361858bb6_m.jpg" width="180" height="240" alt="Let Me0owwwt" /></a></p> <p>Willow</p>",
"published": "2008-09-06T22:35:55Z",
"author": "nobody@flickr.com (SudsMuffinCanada)",
"author_id": "21274915@N04",
"tags": "cat willow gato chatte"
},
Esto es precisamente porque estamos usando el API de Flick. Cuando ponemos una URL en este formato, a cambio recibimos una respuesta en formato de string JSON.
Y precisamente asi se comporta la funcion getJSON, cuando recibe la respuesta ejecuta el cuerpo de la funcion.
Esta era:
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
O lo que es lo mismo:
.. Por cada data.items creame un tag donde el valor del atributo «SRC» es el valor del objeto JSON: item.media.m devuelto y eso me lo añades a un div con el id=»images».
Cuando el valor de i sea 3 te sales, es decir, me devuelves solo cuatro imagenes (empiezo en 0).
Asi que por eso, precisamente obtenemos cuatro imagenes de gatitos desde flick.
¿Simple, no?
Pues la idea es la misma, emplear JQuery en nuestros desarrollos. llamando a getJSON cuando queramos atacar a una URL nuestra que nos debera devolver un string en formato JSON y cuando recibimos ese string JSON le aplicamos la funcion que tengamos definida. Ajax 100%.
Ubuntu Life 
Excelente !!! gracias por estos micromanuales, ahora me dieron ganas de empezar a investigar el tema 😀
Hola Superpiwi, estoy entrando recién al mundo del java script.
He probado el ejemplo que has puesto arriba pero no salen las 4 imágenes, solo un texto que dice:
http: // http://www.w3.org/TR/html4/loose.dtd » >
(he adiciona algunos espacios en blanco al mensaje)
Si pudieras explicarme que paso?
Gracias,
César Gómez
Lima -Perú
Ya me salio!!! 🙂
Ahora a releer el código para entenderlo bien.
Al parecer hay un problema al usar la opción «copy clipboard» no lo hizo bien. para solucionar el problema, solo copie el código original que esta en link que esta mas arriba (enlace).
saludos,
César Gómez
Lima – Perú
Pero que pasa si el servidor se cae en una llamada, ¿como puedo ejecutar la función ERROR ?!!!
Una Consulta existe la posiblida de q en lugar de poner una URL de una pagina se puede poner el Nombre de un PageMethod?
En otras palabras se puede usar getJSON llamando a un PageMethod?
Saludos
Excelente artículo, me resultó de gran ayuda !
Saludos!
Que diferencia hay entre esta función y el .ajax ?
AJAX solo se puede usar en el mismo servidor en el que se ejecuta. Con JSON podemos pasar datos entre distintos servidores. Por ejemplo, un AJAX desde http://www.google.com a http://www.yahoo.com no funcionaría.
Woow interesantisimo viendo un vídeo tutorial vi como funciona la api de google maps y me gusto en verdad eso de la geolocalización pero yo voy por la funcion de conversion entre divisas que el buscador tiene integrado asi que a leer la documentacion del Google web search api