Come dovreste ben sapere cari lettori di CoseNonJaviste, AJAX è l’acronimo di Asynchronous JavaScript and XML ed è ad oggi la tecnica più utilizzata per sviluppare applicazioni web interattive, altrimenti dette RIA (Rich Internet Application). Il concetto che sta alla base di una chiamata AJAX è quello di poter scambiare dati tra client e server senza ricaricare la pagina: lo scambio avviene in background tramite una chiamata asincrona dei dati di solito utilizzando l’oggetto XMLHttpRequest. E questo scambio di dati è realizzato, come si può intuire dall’acronimo, mediante funzioni scritte con il linguaggio JavaScript.
Ajax può essere difficile da implementare, a meno che non utilizziate , infatti è anche grazie alla possibilità di realizzare in maniera semplice delle complesse chiamate di questo tipo, che jQuery è un framework così diffuso. 😉

In passato ci siamo già occupati di , tuttavia si è trattato solo di una breve introduzione che in questo articolo affronteremo in maniera più approfondita. In particolare vedremo:

• Il metodo load;
• Il metodo $.ajax;
• Gli eventi globali;
• Le scorciatoie AJAX;
• La Serializzazione dei dati all’interno di una form.

LOAD in progress…

Iniziamo questo viaggio con il primo protagonista, il metodo load (che è cosa diversa dall’ ). La sintassi è la seguente:

$("#selettore").load(url,[data],[complete])

Questo metodo permette di caricare dei dati dal server e di metterli direttamente dentro l’elemento selezionato (cioè l’elemento con: id="selettore"). I parametri passati sono classificabili come segue:

• url: URL verso il quale effettuare la richiesta;
• data : i dati inviati al server. Si può inserire un oggetto in formato chiave/valore (JSON) o come una query string.
  Quando è utilizzata una query string i dati sono passati tramite il metodo GET, se invece si usa il formato chiave/valore allora il metodo utilizzato è il POST;
• complete(response,status,XMLHttpRequest): è una callback da eseguire al completamento della chiamata, anche se non ha successo. Ha tre parametri: la risposta, lo stato e l’oggetto XMLHttpRequest, tuttavia può anche essere utilizzata senza parametri se questi non servono.

I parametri data e complete sono facoltativi, mentre url è richiesto sempre.

Vediamo qualche semplice esempio:

$('#risultato').load('prova.html');

In questo caso viene caricato il contenuto della pagina prova.html all’interno dell’elemento con id="risultato". Se necessario si può specificare dei dati da passare al server, come nel caso che segue:

$('#risultato').load('prova.php', 'q=0&qq=1&qqq=2');

E cio’ che verrà caricato sarà l’HTML generato dallo script prova.php. Mentre nel prossimo caso, vediamo una callback da eseguire al completamento della chiamata:

$('#risultato').load('prova.html', function() {
    alert('Caricamento completato.');
});

Una funzionalità ulteriore del metodo load è di poter caricare anche porzioni della risorsa, ovvero elementi particolari della pagina prova.html.
Ad esempio, se volessimo caricare solamente l’elemento con id="recupera" ed ignorare tutto il resto del documento, basterà fare:

$('#risultato').load('test.html #recupera');

Se vi ricordate avevamo parlato del , pertanto nel caso di caricamento con attesa, in effetti il metodo load talvolta puo’ risultare un po’ lento, possiamo provare una finezza come la seguente:

$('#risultato').html('Loading...').load('prova.html');

Prima di cambiare argomento e passare ad altro, ecco un .

Per motivi di sicurezza il contenuto caricato dalla funzione load deve essere archiviato nello stesso dominio della pagina web dal quale viene lo script. Se dovete accedere a contenuto ospitato in un dominio diverso, occorre procedere in altro modo. In particolare se il server di terze parti può fornire dati JSONP, considerare di usare ad esempio la funzione getJSON, che vedremo più avanti.

$.ajax lo stakanovista

jQuery mette a disposizione diversi comandi per l’interazione con AJAX. Tuttavia la funzione principale per inviare richieste di questo tipo è il metodo statico $.ajax, la cui definizione è la seguente:

$.ajax({url, [settings]})

La funzione permette di effettuare una chiamata AJAX e di personalizzarla con molti parametri, i quali vengono passati tramite notazione JSON (tra l’altro questo permette di definire un unico oggetto JSON così da poterlo passare al metodo, qualora possa risultare comodo). I suddetti parametri sono classificabili secondo le seguenti tipologie:

• url: url della risorsa;
• settings:
  • dati da passare;
  • funzione da eseguire al termine della chiamata.

Scendiamo nel dettaglio e vediamo una panoramica dei principali:

• url : URL della risorsa alla quale viene inviata la richiesta;
• type : il tipo di richiesta HTTP da effettuare. Accetta GET o POST ( il valore di default è: 'GET');
• data : che può essere un oggetto del tipo {chiave : valore, chiave2 : valore}, oppure una stringa del tipo "chiave=valore&chiave2=valore2" contenente dei dati da inviare al server;
• dataType : Tipo di dato che si riceve di ritorno; jQuery tenta di capirlo da solo, ma è sempre meglio specificarlo. I tipi possibili sono: "xml", "html", "script", "json", "jsonp" e "text";
• success(data, textStatus, XMLHTTPRequest) : funzione che verrà eseguita al successo della chiamata. I tre parametri sono, rispettivamente, l’oggetto della richiesta, lo stato e la descrizione testuale dell’errore rilevato;
• error(XMLHTTPRequest, textStatus, errorThrown) : funzione che verrà eseguita in caso di errore nell’effettuare la chiamata. Un tipico esempio è dato dall’impossibilità di accedere alla risorsa remota perchè inesistente o, comunque, non accessibile;
• complete(XMLHTTPRequest, settings) : Consente di specificare una funzione che verrà eseguita al termine della chiamata indipendentemente che abbia dato successo o errore; è eseguita dopo success o error;
• beforeSend(XMLHTTPRequest, settings) : Callback da eseguire prima che la richiesta sia inviata. I due parametri sono l’oggetto della richiesta e una stringa contenente lo stato della richiesta;
• timeout : Tempo in millisecondi dopo i quali la richiesta viene considerata scaduta;
• async : definisce se la chiamata deve essere asincrona (true) o sincrona (false), nel cui caso bloccherà la pagina fino alla fine della chiamata (il valore di default è: true);
• cache : se impostato su false forza la il browser a ricaricare ogni volta i dati del server anche se non sono cambiati (il valore di default è: true);
• contentType : il tipo di contenuto inviato al server (il valore di default è: "application/x-www-form-urlencoded");
• global : global Permette di disabilitare il fatto che la chiamata sia raccolta dagli handler globali, che vedremo più avanti, come ad esempio $.ajaxStart (il valore di default è: true);
• ifModified : permette che la richiesta sia considerata conclusa con successo (eventi success e ajaxSuccess) solo se i dati restituiti sono diversi da quelli ricavati da una precedente chiamata dello stesso tipo (il valore di default è: false);
• jsonp : Quando si effettuano chiamate JSONP, si suppone che il nome della funzione di callback sia proprio callback. Se il servizio utilizzato richiede un nome diverso, è possibile ridefinirlo. Così con {jsonp:'onJsonPLoad'} verrà aggiunta alla stringa passata al server "onJsonPLoad=?";
• username : nome utente se richiesto dal server;
• password : password se richiesta dal server.

Di seguito potete vedere una tipica chiamata AJAX, che puo’ essere testata a questa e come potete notare, se la chiamata ha successo i dati verranno inseriti all’interno di specifici elementi DOM, altrimenti verrà mostrato un messaggio di errore.

$.ajax({
  url:"richiesta.php",
  type: "GET",
  data: { id: 1234},
  success:function(result){
     $("div#risposta").html(result);
  },
  error: function(richiesta,stato,errori){
     $("div#risposta").html("Chiamata fallita:"+stato+" "+errori);
  }
});

$.ajax è la funzione principe in jQuery, infatti tutte le altre funzioni AJAX di questo framework, non sono altro che wrapper di questo metodo.

Spesso si desidera impostare dei valori di default sulle opzioni per più chiamate AJAX. jQuery ci viene per questo incontro con il metodo:

$.ajaxSetup(options)

Il metodo prende come parametri gli stessi enunciati per $.ajax() i quali in questo caso saranno le impostazioni predefinite comuni per la pagina. Vediamo quindi come si può impostare lo stesso URL e l’utilizzo del metodo POST per tutte le nostre chiamate AJAX:

$.ajaxSetup({
   url: "target.php",
   type: "POST"
});

Non serve quindi che sulle singole chiamate sia specificato l’url, verrà presa infatti sempre la pagina target.php :

$.ajax({
   data: {id: 1234}
});

Ovviamente si può sovrascrivere questo settaggio globale inserendo il parametro url nel metodo $.ajax. Stesso discorso per quanto riguarda il tipo del metodo HTTP.
Per raffreddare i bollenti spiriti, c’è da dire che non è possibile definire tutte le impostazioni mediante $.ajaxSetup: le funzioni di callback come error, complete e success per esempio rientrano in questa categoria. Tuttavia si puo’ bypassare la limitazione adottando per queste callback una gestione con eventi globali di AJAX, che verranno descritti nel successivo paragrafo.

l’orizzonte degli EVENTI globali

Per comprendere il modo in cui jQuery gestisce AJAX bisogna introdurre il concetto degli eventi AJAX. Questi sono una serie di eventi che possono essere gestiti in qualsiasi momento desideriate effettuare una elaborazione ulteriore, per esempio aggiungere un messaggio di caricamento all’inizio della richiesta e rimuoverlo al termine. Oppure gestire tutti gli errori che potrebbero verificarsi…
Per prima cosa possiamo dire che tali eventi possono essere divisi in due famiglie:

• eventi locali
• eventi globali

Gli eventi locali si applicano solo alle singole richieste AJAX e vengono gestiti come callback, proprio come abbiamo visto per le callback della funzione $.ajax (difatti di eventi locali si tratta…).
Gli eventi globali invece sono gli eventi generati da tutte le chiamate Ajax e vengono trasmessi a tutti i gestori in ascolto. Forniscono un modo utile per implementare funzionalità che si devono applicare a tutte le richieste. Per esempio se volessimo visualizzare i messaggi di errore in un apposito elemento

$("#msg").ajaxError(function(event, request, settings){
   $(this).html("Error requesting page: " + settings.url );
});

$("#main").ajaxStart(function () {
    $("#messaggio").text("caricamento…");
}).ajaxStop(function () {
   $("#messaggio").text("");
});

$.get("ajax/utenti.php");

$.get("ajax/utenti.php", {nome:"Mario",cognome:"Rossi"});

$.get("utenti.php", {nome:"Mario",cognome:"Rossi"},
  function(data) {
    $("#risultato").html(data);
 });

$.getJSON('test.json', function(json) {
    alert("buon giorno mi chiamo:" json.nome+ " " json.cognome);
});

var apiURL = 'https://api.twitter.com/1/users/show.json?screen_name=cosenonjaviste&callback=?';

$.getJSON(apiURL, function(data) {
   var followers = data.followers_count;
   console.log(followers);
});

    $.getScript("script.js", function(){
      alert("Script caricato ed eseguito.");
    });

$('form').submit(function() {
  console.log($(this).serialize());  //nome=Lemmy&cognome=Kilmister
  return false;
});

[{
  nome: "Lemmy",
  cognome: "Kilmister"
}]