jQuery 2018 -Ajax e JSON

Sintesi

AJAX

AJAX è un acronimo che sta per Asynchronous JavaScript and XML.

Lo sviluppo di applicazioni HTML con AJAX si basa su uno scambio di dati in background fra web browser e server, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente.

AJAX è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente.

Tuttavia, e a dispetto del nome, l'uso di XML non è obbligatorio e,  come vedremo, le richieste di caricamento possono essere sia sincrone che asincrone, anche se il meccanismo asincrono è di gran lunga il più utilizzato.

// 1. Creo l'oggetto XMLHttpRequest
var req = new XMLHttpRequest();

// 2. Creo un gestore per l'evento load
req.addEventListener('load', function() {
// Se non ci sono errori cambio il contenuto HTML della div con id change
  if (this.status < 400) {
    document.getElementById('change').innerHTML = this.responseText;
  } else {
    // Altrimenti provoco un errore javascrit
    throw(this.statusText);
  }
});

// 3. Apro la connessione
req.open('get','contenuto.txt');

// 4. Invio la richiesta
 req.send();

 AJAX e jQuery

jQuery fornisce diversi metodi per la funzionalità AJAX.

Con i metodi di jQuery Ajax, è possibile richiedere testo, HTML, XML o JSON da un server remoto utilizzando sia http GET che http POST ed è possibile caricare i dati esterni direttamente negli elementi HTML selezionati.

Scrivere codice AJAX in Javascript nativo può essere un po' complicato, perché i browser implementano AJAX in maniera leggermente differente. I metodi jQuery, invece, assicurano compatibilità del codice per i browser previsti dalla versioni della libreria usata.

.load()

$(selector).load(url,data,callback);

Il metodo load() carica i dati da un server http(s) e inserisce i dati restituiti nell'elemento selezionato.

• Il parametro url (obbligatorio) specifica l'url che si desidera caricare.
• Il parametro facoltativo data specifica i parametri da inviare al server insieme alla richiesta ed è un oggetto Javascript o una stringa in formato QueryString.
• Il parametro facoltativo callback è una funzione da eseguire dopo il completamento del caricamento.

$("#div1").load("demo_test.txt");

È anche possibile aggiungere un selettore jQuery al parametro URL.

Nell'esempio seguente viene caricato il contenuto dell'elemento con id = "div-test", all'interno del file "demo_test. txt", in div#div1.

$("#div1").load("demo_test.txt #div-test");

Il parametro callback (facoltativo) specifica una funzione da eseguire quando il metodo load() viene completato. La funzione viene invocata con tre argomenti:

• responseTxt: contiene, se la chiamata ha esito positivo, il contenuto caricato
• statusTxt: contiene lo stato della chiamata
• XHR: contiene l'oggetto XMLHttpRequest

$("button").click(function(){
  $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
      alert("External content loaded successfully!");
    if(statusTxt == "error")
      alert("Error: " + xhr.status + ": " + xhr.statusText);
  });
});

$.axax()

$.ajax({parametri}) 

{parametri} è un plainObject Javascript che specifica una o più coppie nome/valore che configurano la richiesta AJAX.

Di norma non è necessario utilizzare direttamente $.ajax(). jQuery offre numerose alternative che internamente usano $.ajax(), ma sono in grado di offrire un interfaccia più semplice e rapida per risolvere le esigenze più comuni.

Nelle tabelle che seguono i parametri di configurazione accettati.
 

Sono evidenziati i parametri deprecati.

var jqxhr = $.ajax( "example.php" )
	.done(function() {
		alert( "success" );
	})
	.fail(function() {
		alert( "error" );
	})
	.always(function() {
		alert( "complete" );
	});

$.get()

$.get(url [, data ] [, success ] [, dataType ])

Carica i dati dal server utilizzando una richiesta HTTP GET. Restituisce un oggetto jqXHR.

• url
  Tipo: string
  Stringa contenente l'URL a cui viene inviata la richiesta.
• data
  Tipo: PlainObject o string
  Un oggetto semplice o una stringa che viene inviata con la richiesta contente i parametri da inviare al server.
• success
  Tipo: function(PlainObject, textStatus, jqXHR)
  Una funzione di callback che viene eseguita se la richiesta ha esito positivo.
• datatype
  Tipo: string
  Il tipo di dati previsto dal server. (XML, JSON, script, text, HTML).

$.post()

$.post(url [, data ] [, success ] [, dataType ])

Carica i dati dal server utilizzando una richiesta HTTP POST. Restituisce un oggetto jqXHR.

• url
  Tipo: string
  Stringa contenente l'URL a cui viene inviata la richiesta.
• data
  Tipo: PlainObject o string
  Un oggetto semplice o una stringa che viene inviata con la richiesta contente i parametri da inviare al server.
• success
  Tipo: function(PlainObject, textStatus, jqXHR)
  Una funzione di callback che viene eseguita se la richiesta ha esito positivo.
• datatype
  Tipo: string
  Il tipo di dati previsto dal server. (XML, JSON, script, text, HTML).

$.getJSON()

$.getJSON(url [, data ] [, success ])

Carica i dati dal server in formato JSON utilizzando una richiesta HTTP GET. Restituisce un oggetto jqXHR.

• url
  Tipo: string
  Stringa contenente l'URL a cui viene inviata la richiesta.
• data
  Tipo: PlainObject o string
  Un oggetto semplice o una stringa che viene inviata con la richiesta contente i parametri da inviare al server.
• success
  Tipo: function(PlainObject, textStatus, jqXHR)
  Una funzione di callback che viene eseguita se la richiesta ha esito positivo.

$.getScript()

$.getScript(url [, success ])

Carica uno script dal server utilizzando una richiesta HTTP GET e lo esegue. Restituisce un oggetto jqXHR.

• url
  Tipo: string
  Stringa contenente l'URL a cui viene inviata la richiesta.
• success
  Tipo: function(PlainObject, textStatus, jqXHR)
  Una funzione di callback che viene eseguita se la richiesta ha esito positivo.

JSON

Quando si scambiano dati tra un browser e un server, i dati possono essere solo in formato testo.

JSON è un formato testo in cui può essere convertito qualsiasi oggetto JavaScript, che, in questo modo, può essere inviato al server. Allo stesso modo possiamo convertire qualsiasi JSON ricevuto dal server in un oggetto JavaScript.

Con questo sistema possiamo scambiare informazioni tra client e server utilizzando il formato che Javascript predilige e che ci semplifica molto l'elaborazione: l'oggetto.

Utilizzando JSON posso:

• Convertire un oggetto Javascript in stringa e inviarlo al server come parametro di un url.
• Convertire una stringa JSON ottenuta come risposta dal server in un oggetto per elaborarlo con Javascript
• Memorizzare sul computer dell'utente un oggetto costruito run-time dalla pagina web utilizzando localStorage.

La sintassi JSON è derivata dalla sintassi di notazione degli oggetti JavaScript:

• I dati sono coppie nome / valore
• I dati sono separati da virgole
• Le parentesi graffe identificano gli oggetti
• Le parentesi quadre identificano gli array
• Le coppie nome/valore seguono questa sintassi: "nome":"Pippo" con il nome della proprietà sempre fra virgolette doppie

In JSON, i valori devono appartenere a uno dei seguenti tipi di dati:

• String
• Number
• Object (oggetto JSON)
• Array
• Boolean
• null

JASON non è in grado di rappresentare i seguenti tipi:

• Function
• Date
• undefine.

In JSON, i valori delle stringhe devono essere scritti con doppie virgolette.

Metodi JSON

// Converte l'oggetto javascriptObject in una stringa JSON
JSON.stringify(javascriptObject);
    
// Converte stringa JSONString in un oggetto Javascipt
JSON.parse(JSONString);