Comunicazione JSON

Uno dei formati più flessibile per la comunicazione javascript client - server è la così detta javascript object notation.

Si tratta di un modo di strutturare le informazione non diverso da xml, ma più snello.

Questo è ciò che è contenuto in un file JSON per es.

[

  {

    "term": "BACCHUS",

    "part": "n.",

    "definition": "A convenient deity invented by the ancients as an  

                                          excuse for getting drunk.",

    "quote": [

      "Is public worship, then, a sin,",

      "That for devotions paid to Bacchus",

      "The lictors dare to run us in,",

      "And resolutely thump and whack us?"

    ],

    "author": "Jorace"

  },

  {

    "term": "BACKBITE",

    "part": "v.t.",

    "definition": "To speak of a man as you find him when he can't  

                                                           find you."
  },

  {

    "term": "BEARD",

    "part": "n.",

    "definition": "The hair that is commonly cut off by those who  

      justly execrate the absurd Chinese custom of shaving the head."

  },

Si tratta di una notazione ad array [] ed oggetti {} che va a formare delle strutture dati.

Diversamente da caricare html, queste strutture hanno la necessità di essere parsate e gestite al fine di ottenere un html da inserire all'interno della nostra pagina:

JAVASCRIPT CODE:

$(document).ready(function() {
  $('#letter-b .button').click(function() {
    $.getJSON('b.json', function(data) {
      $('#dictionary').empty();
      $.each(data, function(entryIndex, entry) {
        var html = '<div class="entry">';
        html += '<h3 class="term">' + entry['term'] + '</h3>';
        html += '<div class="part">' + entry['part'] + '</div>';
        html += '<div class="definition">';
        html += entry['definition'];
        if (entry['quote']) {
          html += '<div class="quote">';
          $.each(entry['quote'], function(lineIndex, line) {
            html += '<div class="quote-line">' + line + '</div>';
          });
          if (entry['author']) {
            html += '<div class="quote-author">' + entry['author'] + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
        $('#dictionary').append(html);
      });
    });
  });
});

Analizziamo il codice:

• $(document).ready(function() - al caricamento della pagina
• $('#letter-b .button').click(function() { - setta il click sul bottone della lettera A
• $.getJSON('b.json', function(data) { - chiamo il file che genera JSON (sarà un linguaggio lato server a farlo). Il secondo parametro è la funzione di callback da eseguire sui dati una volta che il server avrà risposto. I dati vengono passati automaticamente alla funzione come parametro in ingresso (data). Sto usando il metodo globale $.getJSON. E' un metodo di JQuery. E' detto metodo di classe perchè un metodo statico che non ha bisogno di un'istanza della classe stessa.
• $('#dictionary').empty(); - svuoto il contenitore dei lemmi del dizionario
• $.each(data, function(entryIndex, entry) { - uso un altro metodo globale $.each. Serve a ciclare in un array che riceve come primo parametro. Come secondo parametro ha la funzione da eseguire su ciascun item, tale funzione riceve in ingresso come parametri l'indice dell'item stesso entryIndex e l'item entry
• var html = '<div class="entry">'; --- html += '<h3 class="term">' + entry['term'] + '</h3>'; ... - a questo punto creo l'html che mi serve chiamando i miei valori usando la chiave rappresentata dai nomi dei valori entry['term']
• $('#dictionary').append(html); - alla fine metto il mio html generato all'interno del div con id #dictionary

Dictionary step 2 - JSON