jQuery ha avuto il merito di rendere immediato tutto ciò che serve allo sviluppo web. Se hai provato a studiare un po’ di argomenti al riguardo, non puoi non aver notato Javascript nel lato client. Non è un linguaggio difficile, è sicuramente divertente e soddisfacente perché ti dà gli strumenti per fare bellissime cose in poco tempo e con pochissimo sforzo. Ma ormai studiare Javascript non sarebbe assolutamente completo senza utilizzare un framework e seppur oggi ne esistano diversi e di più moderni, non puoi non conoscere jQuery. Molti progetti online e librerie ne fanno infatti ancora largo uso. In realtà con il semplice Javascript potresti fare di tutto anche senza utilizzare questa libreria, ma rinunceresti al gusto di fare ancora di più scrivendo ancora di meno.
E’ stato così anche per Ajax. L’uso di questa tecnologia è uno dei punti di forza di jQuery: non appena hai iniziato ad usarlo per animare un po’ di componenti visuali dell’interfaccia, il passo subito successivo è quello di utilizzarlo per rendere dinamico il recupero di informazioni dal web.
In questa guida, lo guardiamo in dettaglio, concentrandoci sugli aspetti più pratici.
Mettiamo subito in chiaro un aspetto: da una libreria che sfrutta Ajax per interagire con i server cosa pretende uno sviluppatore?
I punti sono essenzialmente tre:
Uno degli aspetti più significativi di jQuery Ajax è aver saputo concentrare tutte queste operazioni in pochissima sintassi, ben strutturata e molto comoda.
Vedremo qual è la funzione centrale di tali operazioni. E’ la più completa, ma già avrà un aspetto estremamente compatto. Immagina poi che jQuery non si è accontentata realizzando delle funzioni ancora più mirate e abbreviate.
La funzione principale per dialogare con un server dalle pagine web è $.ajax. E’ la più generica in quanto permette di impostare parametri e può essere utilizzata per qualsiasi scopo.
Tra gli argomenti di cui necessita ve ne sono due imprescindibili, senza i quali la connessione non può funzionare:
Ad esempio, se voglio contattare l’URL http://mioservizio.esempio.org, predispongo la seguente invocazione:
$.ajax({url: "http://mioservizio.esempio.org",
success: function(data, textStatus, jqXHR){
//codice da eseguire in caso di successo
}
})
Con $.ajax passo un argomento consistente in un oggetto Javascript con due proprietà all’interno: url per l’indirizzo e success per la funzione da eseguire se la chiamata va a buon fine. Gli argomenti di success sono tre anche se l’unico necessario assolutamente in un’operazione simile è il primo, data, che contiene i dati che abbiamo ottenuto in risposta dal server. Gli altri due portano comunque informazioni utili: textStatus è una stringa contenente un messaggio che tipicamente consiste in “success” nel caso in cui l’operazione sia andata a buon fine mentre jqXHR contiene dettagli a proposito della comunicazione intercorsa, ad esempio jqXHR.status equivale al codice di ritorno http (200 se non si sono verificati errori).
L’operazione che svolgiamo in questo modo è una lettura, un’operazione GET per dirlo nei termini del protocollo http. Questo perché GET è il valore di default della proprietà type nell’oggetto passato alla funzione $.ajax. Il suo valore può essere ovviamente modificato per svolgere altre operazioni, ad esempio di modifica di dati. In tal caso, svolgeremmo un POST, operazione che nel protocollo http è finalizzata alla modifica del set di informazioni a disposizione del server.
Affinchè la funzione $.ajax possa permetterlo dovremo impostare il parametro type a “post” nonché il campo data con i dati da inviare al server per il completamento della modifica:
$.ajax({
url: 'http://mioservizio.esempio.org',
dataType: 'text',
type: 'post',
data: ,
success: function( data, textStatus, jQxhr ){
// codice da eseguire in caso di successo
},
error: function( jqXhr, textStatus, err ){
// codice da eseguire in caso di successo
}
})
In questo stralcio, si vede anche la proprietà error, utilizzabile in ogni caso in $.ajax, cui si assegna la funzione da eseguire al posto di success in caso di errori.
Considerando che il gran numero di parametri che permette di usare $.ajax è sovrabbondante rispetto alle tipiche esigenze del programmatore e che jQuery come un po’ tutto il mondo javascript mira alla produzione di programmi sintetici, esistono delle versioni abbreviate della funzione $.ajax che hanno ognuna uno scopo molto mirato e richiedono un minimo numero di parametri. Ecco le principali.
La funzione $.get è una richiesta in lettura al server che richiede solo l’indirizzo da contattare e la funzione per gestire il successo dell’invocazione:
$.get("http://mioservizio.esempio.org", function(data, textStatus, jQxhr){
// codice per la gestione dei dati ottenuti
})
Esiste anche un’altra versione specializzata nell’interpretazione del formato JSON, $.getJSON, che impone un utilizzo molto simile alla precedente:
$.getJSON("http://mioservizio.esempio.org", function(data, textStatus, jQxhr){
// codice per la gestione dei dati ottenuti
})
La versione più compatta per la lettura di dati da un server è però probabilmente load. Questa funzione risolve un problema comunissimo in ogni pagina web: caricare un contenuto da un server direttamente come all’interno di un elemento HTML. Ecco come si fa:
$().load( )
Pertanto se devo scaricare i contenuti della pagina http://mioservizio.esempio.org direttamente nell’elemento HTML con id pari a campo1 posso usare:
$("#campo1").load("http://mioservizio.esempio.org")
La funzione load può comunque essere completata con altri due argomenti: un campo data per specificare cosa inviare al server all’atto della richiesta ed una funzione contenente codice da eseguire quando lo scaricamento è completato.
Infine, esiste anche $.post, la funzione che permette di inviare una richiesta POST molto compatta:
$.post("http://mioservizio.esempio.org", data, function(data, textStatus, jQxhr){
// codice per la gestione dei dati ottenuti
})
Anche in questo caso abbiamo fissato l’indirizzo da contattare, una funzione da attivare per l’elaborazione della risposta e come secondo argomento, un oggetto contenente i dati da spedire al server.
Sicuramente jQuery Ajax offre un set completo di funzionalità. C’è tutto quello che serve e, soprattutto, nella misura in cui serve: dalla funzione $.ajax in cui si può specificare qualsiasi dettaglio, puoi passare alle sue versioni abbreviate. Probabilmente quanto abbiamo indicato sarà più che sufficiente in moltissimi casi ma la documentazione ufficiale soddisferà qualsiasi altra esigenza.
Un aspetto fondamentale di questa tecnologia comunque è la sua altissima integrabilità in vari scenari tecnologici. Prova a creare applicazioni server con PHP, Python, Node.js o Java e vedrai quanto le tue interfacce web potranno arricchirsi velocemente di informazioni in tempo reale con l’efficacia di jQuery Ajax.
