$.getJSON() vs $.ajax()

JSON è l’acronimo di Javascript Object Notation. Si può pensare a JSON come un modo di formattare un certo tipo di dati per la trasmissione rapida in rete. In questo post mi occupo di confrontare la stessa richiesta di caricamento di dati JSON usando il metodo HTTP GET. Ma perchè usare JSON e non per esempio XML?

Semplice, in una sola parola: efficienza. JSON è meno complesso, dispersivo e ingombrante, con conseguente minor numero di byte e un processo di analisi più veloce.

 

Sintassi

Il metodo $.getJSON è un helper utile che ci consente di lavorare direttamente con JSON senza troppe impostazioni. Racchiude il più generale $.ajax() con le giuste impostazioni sottintese. Si scrive in questo modo:

$.getJSON(url, data, success);
  1. Il parametro url è obbligatorio e corrisponde al link al quale inviamo la richiesta HTTP.
  2. Il parametro opzionale data può essere un oggetto oppure una stringa e viene inviato al serve assieme alla richiesta HTTP.
  3. Il parametro opzionale success(data, textStatus, jqXHR) è una funzione di callback che viene eseguita solo se la richiesta ha successo.

Nello scenario più semplice ci interessa solo avere a che fare con la risposta del server e quindi con l’oggetto JSON in risposta alla nostra richiesta GET.

Un possibile callback di success potrebbe quindi essere così:

function success(data) {
  // fai qualcosa con data, che è un oggetto javascript
}

Come già detto in precedenza, la stessa richiesta si può fare con il metodo $.ajax(), più complesso sul piano delle impostazioni:

$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});

In una precedente applicazione ho utilizzato il primo metodo, più semplice, per recuperare alcune info in formato JSON:

$.getJSON(url, function(set) { }

Nel mio caso, l’opzione “url” era stivata in una variabile:

var a = https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY

Avrei potuto scrivere lo stesso metodo in questo modo:

$.ajax({
   'async': false,
   'global': false,
  dataType: 'json',
  url: 'https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY',
  data: set,
  success: function(set) {
  // qui la funzione da eseguire
  // in caso di successo
  }
});

La risposta sarebbe stata la medesima.

Esempio di risposta:

{
    "copyright": "Panther Observatory",
    "date": "2016-06-29",
    "explanation": "This beautiful telephoto [...] at the right.",
    "hdurl": "http://apod.nasa.gov/apod/image/1606/Omega_Crete_200mm_50schedler.jpg",
    "media_type": "image",
    "service_version": "v1",
    "title": "From Alpha to Omega in Crete",
    "url": "http://apod.nasa.gov/apod/image/1606/Omega_Crete_200mm_15schedler.jpg"
}

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.