Oggi è una giornata speciale perchè ieri questo blog ha avuto il suo record di visite giornaliere (per lo meno stando a google analytics). Siamo addirittura arrivati a 113. Un branco di pazzi =). Fatto sta che oggi sono qui per parlare di una cosetta nuova per me: json.
Json (il cui acronimo ha il significato di JavaScript Object Notation) altro non è che un array associativo. Viene utilizzata una sintassi molto familiare a programmatori C++, Java o Javascript. E’ fatto di puro testo e facilmente comprensibile sia per l’uomo che per la macchina. Qualcuno sostiene, e non fatico a crederlo, che possa essere più potenziale dell’xml. Per farla breve, si tratta di una collezione di coppie “nome”, “valore”.
Vediamo un esempio di Oggetto Json:
var myJSONObject = {
"utenti": [
{"IdUtente": "1", "UserName": "Nosferatu"},
{"IdUtente": "2", "UserName": "Ramsete"},
{"IdUtente": "3", "UserName": "Jack Sparrow"},
{"IdUtente": "4", "UserName": "Paperoga"},
{"IdUtente": "5", "UserName": "Panacea"},
{"IdUtente": "6", "UserName": "Pluto"},
{"IdUtente": "7", "UserName": "Kassandra"},
{"IdUtente": "8", "UserName": "Oberon"},
{"IdUtente": "9", "UserName": "Odino"},
{"IdUtente": "10", "UserName": "Thor"},
{"IdUtente": "11", "UserName": "Superman"},
{"IdUtente": "12", "UserName": "Acquaman"},
{"IdUtente": "13", "UserName": "Venom"},
{"IdUtente": "14", "UserName": "Silver surfer"},
{"IdUtente": "15", "UserName": "Uomo Ragno"},
{"IdUtente": "16", "UserName": "Braccio di Ferro"},
{"IdUtente": "17", "UserName": "Spongebob"},
]
};
Per chi non ci ha fatto caso, l’oggetto json che ho creato è paragonabile ad una tabella. Per motivi di spazio, questo esempio è privo di Password, recapito, email, … tutti dati che non ci servono al fine di mostrare il potenziale di JSON. Nell’esempio che sto per esporre, realizzeremo una banale applicazione in stile web 2.0 che ci permetterà di effettuare delle ricerche all’interno di questa “tabella”. Immaginiamo quindi di avere un campo di ricerca e di voler aggiornare alla pressione del tasto i record che fanno match con quello che stiamo digitando nella nostra casella di testo. L’esempio non farà altro, ma con i dovuti CSS e qualche javascript in più, si potrebbe arrivare in pochi passi a realizzare uno script per l’autocompletamento di un campo.
Prima di fare la magia, mettiamo un po’ di ingredienti nel calderone … :
function cerca (index)
{
html = '';
index = index.toLowerCase();
for (i in myJSONObject.utenti)
{
IdU = myJSONObject.utenti[i].IdUtente;
UserName = myJSONObject.utenti[i].UserName;
myUserName = UserName.toLowerCase();
strIdUtente = IdU < 10 ? '0' + IdU : IdU;
if (myUserName.indexOf(index)>=0)
{
html += '<li>'+strIdUtente+' - '+UserName+'</li>';
}
document.getElementById('risultati').innerHTML = html;
}
Questa funzione, non fa altro che prendere quell’array creato poco fa, e controllare se il parametro passato (index), è presente all’interno degli elementi dell’array. Il codice è volutamente prolisso per essere più leggibile.
Abbiamo i dati, abbiamo la ricerca e la visualizzazione … ora non ci rimane che un po’ di html:
<input type=”text” onKeyUp=”javascript:cerca(this.value);”>
<div id=”risultati”>Inserisci del testo nella casella, per vedere le corrispondenze nella tabella utenti.</div>
Adesso non ci resta che mettere insieme il tutto e scopriremo che alla pressione di un tasto, verrà aggiornato l’elenco di corrispondenze dentro al nostro div “risultati”.Abbiamo visto che è semplicissimo manipolare i dati con json. Adesso con un po’ di fantasia possiamo aumentare la velocità delle nostre pagine. Per esempio, si potrebbero salvare tanti dati già in formato json. Non sarà poi un problema rendere il web sempre più veloce. Questo stesso script potrebbe essere ulteriormente migliorato con jquery.
Ricordiamo che si tratta di javascript e dunque è tutto lato client. Lo dico sopratutto per chi non vuole appesantire il server. Bene, conosco json da meno di 24 ore mentre vi scrivo… spero di scrivere altri post a riguardo.
