Para aquellos usuarios de jQuery, puede que esta función sea algo que hay hayan utilizado, para los que no espero que les agrade la idea. En jQuery existen varias maneras de hacer HTTPrequest de asíncrona, al grado de que algunos lo llamarían AJAX, pero dejaremos todos esos términos para algún próximo post.
Lo que nos interesa el día de hoy es una función llamada getJson que nos permite pedir un archivo de json (javascript objet notetion) que es una especie de XML para javascript, lo cual no tiene restricciones de seguridad de donde hagamos los request, por lo cual podemos usarlo para desplegar la información de otro servidor.
Como pueden checar en la hoja de referencia tenemos una coneccion al API de Flickr donde nos permite pedir 3 imágenes, lo cual nos permite con un poquito de código como el siguiente:
$(document).ready( function() {
$("#search").click(function(event) {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+ $('#user').val() +"&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("").attr("src", item.media.m).prependTo("#pics");
if ( i == 3 ) return false;
});
});
});
});
Llamar de un input de texto un valor y usarlo para desplegar 4 imágenes de Flickr de ese valor, como pueden ver en esta pagina.
Ahora, que mas tiene respuestas en formato json, pues muchas cosas, entre ellas Twitter. Entonces juguemos un poco mas con esta función pidiendo el timeline de una persona con este código pedimos la información y lo mandamos a otra para procesar la información.
Lo que esto significa es que pediremos a un url integrado por el nombre del usuario y un poco de texto predefinido para poder generar donde pediremos el objeto json que usaremos. Después pediremos por medio de getJSON la información y el resultado lo evaluara una función definida en ese momento.
function addUser(user){
var url = "http://twitter.com/status/user_timeline/"+ user +".json?count=20&callback=?";
$.getJSON(url,
function(data){
$.each(data, function(i, item) {
data = new Array(replaceURLWithHTMLLinks(item.text), item.user["profile_image_url"], item.created_at, item.id);
sort(data);
});
})
}
En esta función tomamos el texto y le agregamos ligas al objeto, después tomamos la imagen del usuario, cuando fue creado el twett y el id del tweet para mande este arreglo a la función sort. Tambien podrían hacer un append, alert o cualquier cosa que se les ocurra hacer con un tweet.
Entonces por que lo estoy mandando a una función sort, para que se ordenen por momento de ser creados, con lo que usare una librería de jQuery que ordena nodos por atributo, tipo o muchas cosas mas que encontraran en esta dirección. Con una función de sort como esta:
function sort(data){
$("#tweets").append("<div id="+ data[3] +"><img src="+ data[1] +">" + data[0] + " <span class='created_at'>" + relative_time(data[2]) + " </span></div>");
$("#tweets>div").tsort("span",{orderby:"created_at"});
}
Lograremos ordenar los tweets una vez que son recolectados para terminar con una aplicación como esta espero que les agrade esta función y la utilicen para algo divertido.
Related posts: