4 Apr 2011 0 commenti
Le versioni della libreria jquery superiori alla 1.2 consentono eseguire il load di dati in formato JSON attraverso richieste HTTP GET.
Il file JSON verrà richiamato tramite ajax e il parse avverrà attraverso il metodo getJSON() http://api.jquery.com/jQuery.getJSON/.
Può sembrare apparentemente complesso ma è molto più semplice di quanto non si possa pensare.
Occorre, anzitutto, disporre di un sorgente in formato JSON. Molti, tuttavia, dispongono di feed in formato XML (RSS1.0, RSS2.0, ATOM) e occorrerà convertirli per consentre la lettura tramite jquery. Questa operazione si presenta estremamente semplice grazie al potente strumento Yahoo Pipes.
Quest'ultimo è stato trattato nel precedente articolo nel quale sono state descritte le funzioni e le potenzialità che possiede: esso ci consentirà di ottenere Feed (aggregati, filtrati e manipolati) in diversi formati tra cui, per l'appunto, JSON.
Pertanto il "problema" di ottenre il file in formato JSON non solo non si pone ma con Yahoo Pipes e Jquery si potrà ottenere qualcosa che può andare anche oltre la "semplice" lettura e stampa del feed: aggregare i feed che riteniamo più interessanti, anche generati da domini esterni al nostro, eseguire il parse con jquery, inserire il tutto nel nostro sito.
Si otterranno, senza il minimo sforzo, una serie di contenuti dinamici senza impiegare (pesanti) applicazioni lato server.
Ma passiamo al codice.
CODICE XHTML
Il markup della pagina sarà molto semplicemente:
<html> <head> <title>Lettura Feed con Jquery</title> <!-- Libreria jquery --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- lo script per leggere il file json e inserirlo nella pagina --> <script type="text/javascript" src="js/letturaJSON.js"></script> <!-- il foglio di style --> <link href="css/custom.letturaJSON.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>News</h1> <div id="NewsFromJson"></div> </body> </html>
LETTURA FILE JSON CON JQUERY
Una volta ottenuto il sorgente in formato JSON possiamo implementare il codice al codice jquery del file letturaJSON.js:
$(function(){
/*
impostiamo il sorgente json
in questo esempio è una pipes che ho creato nel precedente articolo
ma ovviamente la fonte può essere quella che vogliamo,
anche generata anche da php
*/
$.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=5f8806bf05c7e066804a0c484538b2b6&_render=json&_callback=?',
function(data){
/*per ogni item individuato ci costruiamo l'HTML*/
$.each(data.value.items, function(i,item){
/*
creiamo una variabile che chiameremo contenuto
in cui inseriremo l'HTML ci ciascun item presente
*/
/*apriamo un div*/
contenuto = '<div class="item">';
/*il link dell'item presente nel feed*/
contenuto += '<h3><a href="'+item.link+'">'+item.title+'</a></h3>';
/*la descrizione dell'item*/
if(item.description!=null){
contenuto += '<p>'+item.description+'</p>';
}
/*chiusura del div*/
contenuto += '</div>';
/*inseriamo il contenuto nel contenitore con id 'NewsFromJson'*/
$(contenuto).appendTo('#NewsFromJson');
});
/*ciascun div con classe item lo disponiamo in un elenco ul-li*/
$('#NewsFromJson div.item').wrapAll('<ul>').wrap('<li>');
});
});
IL FOGLIO DI STILE
Per rendere il tutto un pizzico più gradevole graficamente basterà qualche riga di css, ovviamente lasciando a voi ulteriori personalizzazioni.
#NewsFromJson{
display: block;
height: 500;
width: 400px;
overflow: auto;
}
#NewsFromJson .item{
}
#NewsFromJson ul{
list-style:none;
padding:0;
margin:0;
}
#NewsFromJson li{
border-bottom: 2px solid #222;
padding: 10px;
background: #f5f5f5;
}
#NewsFromJson a:link,#NewsFromJson a:visited{
text-decoration: none;
color: #273;
}
#NewsFromJson a:hover,#NewsFromJson a:active{
text-decoration: none;
color: #495;
}
Per vedere ciò che abbiamo ottentuo potete andare a questo link.
Olimpio Romanella
Sono un appassionato di Web Developing con un particolare debole per php. Mi dedico principalmente dello sviluppo back-end ed in particolare programmazione lato server con php, sviluppo di database relazionali MySql e progettazione di CMS di piccole e medie dimensioni.
Mi avvalgo del framework javascript Jquery, utilizzando molti dei suoi plugin e nei dei miei progetti utilizzo spesso il framework MVC Codeigniter.