La tecnologia che utilizziamo per lavorare si evolve ogni giorno e stare al passo può sembrare un compito arduo, allo stesso tempo restare fuori dal giro potrebbe limitare molto le nostre competenze e per questo motivo è bene mantenersi aggiornati. Ecco perché voglio presentarti l’acronimo JSON e le sue interessanti caratteristiche.
Quello che cerchiamo di fare all’interno del blog di skillsAndMore è proprio questo, fornirti delle informazioni valide e recenti che ti permetteranno di migliorare il tuo lavoro e velocizzarlo grazie anche all’implementazione di nuove tecniche.
Iniziamo subito dicendo che questa non è una nuova tecnologia, ma ne ho sentito parlare veramente poco ed è alla base di un insieme di tecnologie che oggi ci permettono di avere il web come lo conosciamo. Se ancora non ti dovesse essere venuto in mente il suo nome, sto parlando di Ajax!
Lo so, ti aspettavi che io scrivessi JSON ma non è (ancora) l’acronimo al quale desidero fare riferimento, questo perché grazie all’insieme di tecnologie che raccoglie Ajax siamo successivamente a desiderare una soluzione più semplice di quelle alle quali eravamo abituati.
Praticamente fino a poco tempo fa per utilizzare Ajax si faceva molto riferimento a strutture XML, un linguaggio di markup molto simile al già conosciuto HTML che permette la creazione di dizionari con i quali poter identificare differenti elementi all’interno di un testo.
Questo metalinguaggio è stato largamente utilizzato per la creazione dei feed RSS, ma risulta un po’ complicato quando dobbiamo utilizzare con JavaScript e soprattutto con codice Ajax. Per questo motivo oggi parleremo del suo successore: JSON.
In pochi secondi ho già scritto un paio di acronimi e messo al fuoco un sacco di carne, facciamo un passo indietro e cerchiamo di capire meglio che cosa sia l’uno e l’altro.
Ajax e JSON. Due acronimi, un sacco di funzionalità
Iniziamo subito con il dire che se conosci questi due acronimi, e li conosci bene, forse questo articolo non sarà altro che un piccolo ripasso. Se decidi di continuare a leggere me ne compiaccio e spero che tu abbia voglia di condividere il tuo pensiero a riguardo all’interno dei commenti o anche nel nostro forum.
Se continui a leggere questo significa che ti ho abbastanza incuriosito e quindi non mi resta altro che andare nel dettaglio e spiegarmi meglio.
Ajax, il primo acronimo che ti ho presentato nelle frasi precedenti, viene esteso in Asynchronous JavaScript and XML non è altro che una tecnica che ci permette di aggiornare porzioni di una pagina web senza dover richiedere l’intero caricamento della pagina.
A oggi sembra una cosa più che comune avere a disposizione questo tipo di funzionalità, ma ti posso garantire che fino a qualche anno fa non esisteva un metodo semplice per raggiungere un risultato del genere. In certi casi eravamo costretti a utilizzare delle tecnologie proprietarie come Flash, ma per fortuna a oggi questo formato è praticamente scomparso 😀
Il successo di Facebook, così come quello di altri social network, ci ha ormai abituati a vedere siti web che si aggiornano parzialmente durante l’utilizzo. Mentre passiamo del tempo su Facebook possiamo chattare e osservare gli aggiornamenti del nostro news feed senza dover neanche ricaricare la pagina, e questa è una grande benedizione sia dal punto di vista dell’esperienza utente che da quello dei nostri server.
Ovviamente per raggiungere questo tipo di risultato è necessario avere a disposizione una tecnologia che ci permette di poter ottenere le nuove informazioni e aggiornare la pagina del nostro sito web.
Come lo stesso acronimo suggerisce e come ti ho anticipato precedentemente, inizialmente si usava una soluzione basata su XML permetteva di ottenere in risposta alla nostra richiesta (perché se vogliamo ottenere dei contenuti dobbiamo fare una richiesta) un intero documento strutturato con questa sintassi. Una volta ottenuto, è possibile navigare al suo interno del suo DOM come se fosse una comune pagina HTML.
Per quanto questo possa sembrare nativo porta con se molti problemi, primo fra tutti è proprio dovuto alla difficoltà nel navigare all’interno di questo documento e identificare il nodo che ci interessa.
Oltre a questo un altro problema che possiamo riscontrare è il fatto che il documento che attendiamo non può essere consultato in modo asincrono, ovvero è possibile eseguire delle ricerche al suo interno soltanto quando questo documento è stato completamente scaricato.
Per questi e molti altri motivi che non sto a elencare, è nata la necessità di utilizzare un formato più semplice da gestire, un formato compatibile con il linguaggio JavaScript che viene enormemente utilizzato dalle applicazioni web.
Fu così che nacque il JavaScript Object Notation; JSON per gli amici.
Che cosa è il JSON?
Arriviamo quindi a rispondere alla domanda fondamentale di questo articolo: che cosa rappresenta l’acronimo JSON?
Nella frase della sezione precedente quello che ho fatto è stato semplicemente estendere l’acronimo e popolarlo con le parole che si celano al suo interno, ma in fin dei conti che cosa significa JavaScript Object Notation?
Ebbene già dalla prima parola si dovrebbe intuire che ha qualcosa a che fare con il linguaggio JavaScript e con gli oggetti che possiamo gestire, ma andando nel dettaglio diciamo che è un modo per salvare le informazioni in modo organizzato e di facile accesso.
Praticamente ci fornisce una collezione di dati organizzati logicamente che possono essere facilmente letti da un essere umano e da un computer.
Sono sicuro che tutto quello che ti stai chiedendo adesso è: come? Ebbene ti rispondo con l’esempio proposto qua sotto e sono sicuro che noterai qualcosa di molto familiare:
var andrea = {
"eta" : 32,
"citta" : "Livorno",
"sesso" : "maschile"
}Ed eccoci di fronte al codice di esempio per il JSON, come puoi notare assomiglia incredibilmente alla dichiarazione di un oggetto JavaScript dove vengono elencate le varie proprietà, ma utilizzare una sintassi del genere ci permette di consultare i valori in essa contenuti in modo incredibilmente semplice.
Per esempio, se desidero inserire all’interno del mio documento HTML una stringa che dichiara la mia età potrei scrivere qualcosa del genere:
document.write( "Andrea ha " + andrea.eta + " anni." );
Rispettando completamente la sintassi di JavaScript sono stato in grado di prendere la proprietà eta dell’oggetto andrea che mi è stato passato attraverso JSON. Se vuoi notare tu stesso la differenza e la semplicità di questo tipo di notazione puoi confrontare le seguenti dichiarazioni.
Questa è una notazione in JSON di un Glossario:
{
"glossary": {
"title": "esempio glossario",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "Un linguaggio meta-markup, usato per creare linguaggi di markup come DocBook.",
"GlossSeeAlso": ["GML", "XML"]
},
"GlossSee": "markup"
}
}
}
}
}Mentre con la sintassi successiva possiamo vedere lo stesso esempio dichiarato questa volta utilizzando il linguaggio di markup XML:
<!DOCTYPE person PUBLIC "-//OASIS//DTD DocBook V3.1//EN">
<glossary>
<title>example glossary</title>
<GlossDiv>
<title>S</title>
<GlossList>
<GlossEntry ID="SGML" SortAs="SGML">
<GlossTerm>Standard Generalized Markup Language</GlossTerm>
<Acronym>SGML</Acronym>
<Abbrev>ISO 8879:1986</Abbrev>
<GlossDef>
<para>Un linguaggio meta-markup, usato per creare linguaggi di markup come DocBook.</para>
</GlossDef>
</GlossEntry>
</GlossList>
</GlossDiv>
</glossary>Come puoi intuire tu stesso, navigare all’interno di una serie di informazioni definite in JSON è molto più intuitivo sia per gli esseri umani sia per i computer perché in fin dei conti basta conoscere il nome della proprietà per accedere al valore in essa contenuto.
Se questo piccolo esempio non ti dovesse essere bastato per farti capire la semplicità messa a disposizione dalla tecnologia JSON ti invito a consultare la pagina di esempi del sito JSON.org, sono sicuro che troverai i confronti più complessi in grado di mostrare maggiormente i vantaggi che si hanno nell’utilizzare questa tecnologia.
Non si salvano soltanto valori in un JSON
Con l’esempio dell’oggetto glossario forse ho bruciato un po’ le tappe, ma era necessario farlo per farti avere immediatamente un confronto tra le due tecnologie, spero che tu abbia capito come mai JSON è così utilizzato.
Allo stesso tempo è probabile che tu non abbia compreso completamente che cosa è stato realizzato…
Non ti preoccupare, ho creato questo articolo appositamente per parlare delle varie caratteristiche del JSON, prima fra tutte la possibilità di poter salvare i dati dichiarati in JSON direttamente all’interno di un array:
var famiglia = [{
"nome" : "Andrea",
"eta" : 32,
"sesso" : "maschile"
},
{
"nome" : "Massimo",
"eta" : 28,
"sesso" : "maschile"
}];Adesso il mio Array famiglia ha due oggetti contenuti al suo interno e questa soluzione può essere molto interessante se vogliamo creare un ciclo for che ci permette di ciclare all’interno delle proprietà dell’oggetto in modo da reperire facilmente un determinato dato. Ecco qua un esempio:
for( i = 0; i < famiglia.lenght; i++ ){
document.write( famiglia[i].nome );
}Così facendo rispettiamo ulteriormente la logica DRY che ci aiuta a velocizzare il nostro lavoro limitando allo stesso tempo il numero di errori che possiamo commettere.
Quello che puoi vedere è che con questo metodo, per passare le informazioni da una parte all’altra del web possiamo facilmente utilizzare le basi dei linguaggi di programmazione che già conosciamo, come il JavaScript, per fare in modo di sfruttare le informazioni contenute all’interno delle nostre pagine.
Perché tutto questo interesse per il JSON?
Arriviamo quindi al turning point in cui dobbiamo rispondere alla domanda: in cosa mi è utile il JSON? Ovvero, perché ho bisogno di scoprire questo nuovo modo per scambiare informazioni da una parte all’altra del web e soprattutto perché dovrei essere interessato?
Iniziamo subito a descrivere la seconda parte di questa domanda e cerchiamo di capire perché questa tecnologia dovrebbe interesarti e soprattutto perché dovrebbe entrare nell’arsenale dello sviluppatore.
La prima risposta a questi dubbi è semplice: perché ci permette di ottenere facilmente informazioni e di utilizzarle all’interno di una nostra applicazione (web, mobile o di qualsiasi altro tipo).
Facciamo un esempio concreto, diciamo che vuoi prendere lo stream dei messaggi pubblicati dalla tua pagina su Facebook per mostrarli all’interno di un sito web. Sono sicuro che conosci già la possibilità di utilizzare uno dei plugin messi a disposizione dalla stessa Facebook, ma al tempo stesso sei uno sviluppatore e riconosci che il prodotto offerto non è assolutamente elastico e non si adatta allo stile del sito.
Sarebbe molto più opportuno potersi collegare direttamente a Facebook e ottenere in risposta la lista dei nostri messaggi in modo da poterli inserire nelle pagine applicando gli stili CSS che desideriamo, non credi?
Ebbene questo si può ottenere facendo lavorare assieme tre tecnologie che negli anni hanno dimostrato la loro utilità, due di queste le hai già viste e sono appunto Ajax e JSON mentre la terza è quella che ci permette di richiedere a un sito determinate informazioni; ovvero una Application Programming Interface conosciuta anche come API.
Come detto velocemente prima, una API ci permette di richiedere un determinato tipo di contenuto alle applicazioni che mettono a disposizione questo tipo di interfaccia. Seguendo l’esempio fatto precedentemente ci consente di chiedere a Facebook gli ultimi X post che abbiamo pubblicato tramite la nostra pagina.
Tutto funziona lanciando una richiesta Ajax verso il server Facebook utilizzando una specifica URL alla quale otterremo in risposta un oggetto… JSON.
Con la frase precedente abbiamo delineato il comportamento base di questa soluzione, dal nostro sito o applicazione inviamo una richiesta a una API che ci fornirà in risposta un oggetto JSON che potremmo consultare utilizzando la stessa sintassi che abbiamo utilizzato negli esempi precedenti.
Per andare un po’ più nel dettaglio cerchiamo di fare un veloce esempio pratico.
Non andremo a utilizzare le API di Facebook perché per poterlo fare dovremmo registrarci come sviluppatori e registrare la nostra applicazione. Al posto di mostrarti questo iter, che magari potremo approfondire meglio all’interno di un corso specifico, ho pensato di sfruttare una API libera e open source che permette di generare dei profili di sviluppatori in modo del tutto casuale.
Il servizio si chiama appunto RandomUser e per poter ottenere questi dati non dobbiamo far altro che indicare come URL della nostra richiesta Ajax http://randomuser.me/api/, niente di più semplice!
Per alleggerire il seguente esempio andremo ad utilizzare il metodo $.ajax() messo a disposizione da jQuery, ovviamente tu potrai utilizzare anche codice JavaScript vanilla ma visto che questo articolo è già andato abbastanza per le lunghe, cerco di mostrarti un esempio concreto e il più semplice possibile.
Per verificare che tutto funzioni correttamente non ci resta che, una volta collegato jQuery alla nostra pagina, aggiungere il seguente blocco di codice:
$.ajax({
url: 'http://randomuser.me/api/',
dataType: 'json',
success: function(data){
console.log(data);
}
});A questo punto tutto quello che dovrai fare è controllare la tua console che, grazie alla funzione console.log(), verrà popolata con un JSON che avrà la stessa struttura del successivo esempio:
{
"results": [
{
"gender": "male",
"name": {
"title": "mr",
"first": "samuel",
"last": "ross"
},
"location": {
"street": "5592 pockrus page rd",
"city": "santa ana",
"state": "oregon",
"postcode": 69974
},
"email": "samuel.ross@example.com",
"login": {
"username": "silverwolf434",
"password": "blackjac",
"salt": "d14iEZQT",
"md5": "261a57061d35918f5c3ef7f90f4f2a80",
"sha1": "c330ad8c974ab9982622d5d5506cfed4886a79ab",
"sha256": "8ca4a1ca48975a69bd829de61298cd6a950dede740d4c0e755d07ee4cfc06fa5"
},
"registered": 1155461743,
"dob": 1078494582,
"phone": "(179)-102-8139",
"cell": "(107)-396-0688",
"id": {
"name": "SSN",
"value": "476-30-9095"
},
"picture": {
"large": "http://randomuser.me/api/portraits/men/80.jpg",
"medium": "http://randomuser.me/api/portraits/med/men/80.jpg",
"thumbnail": "http://randomuser.me/api/portraits/thumb/men/80.jpg"
},
"nat": "US"
}
],
"info": {
"seed": "705567e86a824a27",
"results": 1,
"page": 1,
"version": "1.0"
}
}Questi utenti sono veramente molto delineati e infatti potremmo trovare, oltre al nome e cognome, molti altri detagli come la loro nazionalità, il numero di telefono e di cellulare, il proprio username e password e anche le proprie foto!
Praticamente grazie a questa API possiamo popolare le nostre applicazioni di utenti fittizi 🙂
La risposta di questa API ci fornisce un unico utente, ma controllando la documentazione scoprirai come sia possibile richiederne un numero arbitrario, io non ti mostro questa caratteristica perché il mio interesse principale è mostrarti come sia possibile utilizzare i dati che sono contenuti all’interno della risposta.
Come puoi vedere il metodo $.ajax() ci restituisce tutta la risposta all’interno di data che abbiamo incluso come parametro della funzione scatenata al success, ovvero quando il nostro browser riceve una risposta dal server al quale ha fatto la richiesta.
A questo punto la soluzione da applicare è veramente semplice, sappiamo che il dato che otteniamo è un array di nome results contenente oggetti in JSON.
Anche se questa API restituisce in automatico questo tipo di oggetti, ricordiamoci che possiamo sempre richiederli utilizzando il parametro dataType della nostra chiamata Ajax e modificare di conseguenza la struttura delle informazioni che otteniamo.
Oltre a questo sappiamo anche che la risposta che otteniamo al success contiene un singolo elemento. A questo punto trovare le informazioni che stiamo cercando è semplice come dichiarare le seguenti variabili.
var nome = data.results[0].name.first,
cogn = data.results[0].name.last,
img = data.results[0].picture.large;Ricorda che puoi sempre navigare all’interno di un oggetto presente nella tua console con gli strumenti per lo sviluppatore integrati nel tuo browser.
Adesso che abbiamo salvato i dati di nostro interesse all’interno di variabili non ci resta altro che richiemarli all’interno della nostra pagina. Nell’esempio successivo io utilizzo un elemento con id #box per aggiungere, grazie al metodo .append(), i valori che mi sono salvato dalla richiesta alla API.
$("#box").append("<h3>" + nome + " " + cogn + "</h3>");
$("#box").append("<img src='" + img + "' />");Con questo piccolo esempio spero di averti fatto comprendere le potenzialità e l’utilità di poter utilizzare una tecnologia come JSON per ottenere le informazioni contenute all’interno di un server web esterno e applicarle all’interno dell’applicazione che stiamo sviluppando.
Giusto per essere il più completi possibile ecco il codice completo che abbiamo utilizzato in questo articolo:
$.ajax({
url: 'http://randomuser.me/api/',
dataType: 'json',
success: function(data){
var nome = data.results[0].name.first,
cogn = data.results[0].name.last,
img = data.results[0].picture.large;
$("#box").append("<h3>" + nome + " " + cogn + "</h3>");
$("#box").append("<img src='" + img + "' />");
}
});Se sei rimasto con qualche dubbio e desideri approfondire, non esitare a scrivere all’interno del nostro forum dove potrai confrontarti assieme agli altri skillati condividendo dubbi e approfondimenti.
Lascia un commento