Fermi tutti! Ajax non è una squadra di calcio! E’ un rivoluzionario oggetto che hanno inserito nei moderni browser chiamato XMLHTTPREQUEST e serve per effettuare chiamate asincrone senza permettere il caricamento della pagina tanto caro a HTTP di vecchio stampo dove l’utente fa una richiesta client e il server singolarmente restituisce una risposta immediata prima di effettuare altre operazioni. Ne consegue che migliora la UI dell’ utente ma non solo l’esperienza in termini di velocità, soprattutto in efficienza visto che mentre in background Ajax si occupa di aggiornare dei dati per esempio senza rifare il rendering della pagina è possibile anche andare oltre in multitasking. E quando Ajax incontra JQuery il risultato finale performante è assicurato, in quanto con la versione semplificata di javascript con poche righe di codice lineari è possibile aggiornare e catturare i dati lato server senza mettere la sveglia per effettuare la nostra prossima operazione. Ma analizziamo un primo esempio dove in virtù di una richiesta effettuata tramite un BUTTON chiedo alla pagina di restituirmi il contenuto di un file testo lato server. Per restare in tema di scacchi supponiamo di chiedere all’ oracolo messo su come esercizio quale apertura sia più frequente nella pratica dei Grandi Maestri di scacchi. Non che ci interessi molto, ma con questo pretesto possiamo iniziare a dare un occhiata a come viene effettuata una chiamata AJAX sfruttando la potenza di esecuzione di JQuery e quali sono i suoi attributi che possiamo utilizzare per decidere se la richiesta deve essere GET o POST (di default è GET), se ci sono dei dati in caricamento, degli errori da gestire per dare un buon esito all’ utente e via dicendo con altri parametri. Prendiamo quindi in esame l’esempio presente all’ indirizzo https://www.farwebdesign.com/ajax_jquery/1/ dove c’è un pulsante che fa una domanda e un campo testo che dopo la pressione esercitata come EVENTO CLICK darà la risposta. Dentro la directory avremo quindi un file TXT, il file JQuery per permettere l’interazione con XMLHTTPREQUEST e il file HTML che avrà il seguente contenuto nel body:
<div id=”contenitore”>
<div id=”contenuto”></div>
<button>Vuoi sapere quale è la difesa più giocata tra i GM? Click here!</button>
</div>
<script>
$(document).ready( // questa riga è standard per permettere prima il caricamento della pagina rispetto ad altre operazioni da effettuare
function(){
$(“button”).click( // questa riga dice che l’elemento BUTTON alla pressione del CLICK eseguirà il contenuto della funzione contenuta
function()
{
$.ajax( // potenza di JQuery! Il metodo ajax permette comunicazioni asincrone
{
url: “berlinese.txt”, // il parametro url serve a collegare la risorsa per attingere ai suoi contenuti
success: function(result) // il parametro success evidenzia un risultato da restituire come risposta alla richiesta
{
$(“#contenuto”).html(result); // qui viene restituito il contenuto appoggiandosi all’ ID del DIV statico dell’ HTML definito come CONTENUTO
},
error: function (request, status, error) // il parametro error gestisce eventuali messaggi di errore sulla richiesta dell’ utente
{
alert(“Errore nella richiesta”); // una finestra semplice che segnala all’ utente che qualcosa è andato storto per esempio se il file testo del server si chiamasse in modo diverso da URL
}
}
);
}
);
});
</script>
Dopo la pressione del pulsante avrò graficamente la mia risposta come in figura ottenuta attraverso un processo lineare senza rendering della pagina: richiesta, elaborazione dei dati seguendo i criteri di lavoro dell’ oggetto xmhttprequest, risposta. Adesso analizziamo una caso dove al posto del file testo mi ritrovo da gestire un file con estensione JSON che sono sequenze di dati formattati in maniera 
particolare e che si possono validare facilmente come verifica della sintassi con strumenti free presenti in rete come https://jsonformatter.curiousconcept.com/ che si prendono cura di sottolineare eventuali anomalie nella struttura dei dati. Analizziamo quindi il seguente esercizio dedicato all’ attuale campione del mondo di scacchi all’ indirizzo https://www.farwebdesign.com/ajax_jquery/2/ , chi non sa di chi stiamo parlando può cliccare sul pulsante e scoprire chi è questa leggendaria figura. Qui abbiamo uno script decisamente diverso in quanto cambiando la tipologia di fonte di dati ci troviamo nella necessità di spezzare i dati per farli entrare nelle singole celle identificate da un ID poi catturato con il valore grazie a JQuery:
<table>
<tr>
<td>Nome</td>
<td id=”nome”></td>
</tr>
<tr>
<td>Cognome</td>
<td id=”cognome”></td>
</tr>
<tr>
<td>Età</td>
<td id=”eta”></td>
</tr>
<tr>
<td>Federazione</td>
<td id=”federazione”></td>
</tr>
<tr>
<td colspan=”2″><button>Scarica dati</button></td>
</tr>
</table>
<script>
$(document).ready(
function(){
$(“button”).click(function(){
$.ajax(
{
url: “dati.json”,
success: function(result)
{
$(“#nome”).text(result.nome);
$(“#cognome”).text(result.cognome);
$(“#eta”).text(result.eta);
$(“#federazione”).text(result.federazione);
}
}
);
});
}
);
</script>
Il risultato ottenuto è quello mostrato, da sottolineare come le istruzioni tipo $(“#nome”).text(result.nome); servano proprio a collegare la fonte dei dati con la cella da agganciare statica presente nell’ HTML. L’analisi del resto rimane sempre la stessa: abbiamo un evento click che scatena il contenuto di una funzione che di fatto aziona un metodo ajax, cattura i dati da un url, verifica il risultato ottenuto e immette questi dati nella parte client tramite l’i
dentificazione ID consentita da JQuery tramite il famoso cancelletto #. Quindi nulla di particolarmente impegnativo. Finora abbiamo analizzato però solo casi in cui di default viene usato solo la trasmissione dati GET che sappiamo non essere ideale ad esempio quando dobbiamo gestire quelle situazioni in cui abbiamo utente e password che devono rimanere dati nascosti quando transitano in rete. Abbiamo disponibile nell’ oggetto xmlhttprequest dove il parametro type che ci consente di specificare la modalità di trasmissione dei dati, ossia nel caso che ci appresteremo ad analizzare quindi POST. Analizziamo quindi questa nuova situazione presente all’ indirizzo https://www.farwebdesign.com/ajax_jquery/3/
<div id=”contenitore”>
<input type=”text” name=”username” placeholder=”Username”/>
<input type=”password” name=”password” placeholder=”Password”/>
<button>Login</button>
</div>
<script>
$(document).ready(
function(){
$(“button”).click(function(){
username=$(“[name=username]”).val();
password=$(“[name=password]”).val();
$.ajax(
{
url:”login.php”,
type: “POST”,
data: {“username”:username, “password”:password},
success:function(result)
{
if (result==’OK’)
{
alert(“Puoi entrare”);
$(“[name=username]”).val(”);
$(“[name=password]”).val(”);
}
else if (result==’KO’)
{
alert(“Credenziali errate”);
}
else
alert(“Errore”);
}
}
);
});
});
</script>
Questa volta il file punta sul file login.ph che contiene al suo interno i criteri con cui l’utente dovrà o non dovrà ottenere il suo scopo, che si presuppone essere quello di atterrare su un’ area riservata.L’ultimo caso analizza invece un file JSON con dati multipli da caricare dove la creazione della lista nel suo elemento LI avviene ciclando con un EACH, per ottenere una stringa composita che verrà infine stampata a video usando il metodo APPEND
<div id=”centrale”>
<ul>
</ul>
</div>
<script>
$(document).ready(
function(){
$.ajax(
{
url:”persone.json”,
success: function (result)
{
lista=$(“ul”);
$.each(
result, function(k,v)
{
li=$(“<li>”);
li.text(v.nome+” “+v.cognome+”, “+v.eta+
” anni (“+v.citta+”)”);
lista.append(li);
}
);
}
}
);
});
</script>
dove il contenuto del file JSON sarà:
[
{
“nome”:”Giulio”,
“cognome”:”Rossi”,
“eta”: 25,
“citta”: “Genova”
},
{
“nome”:”Enea”,
“cognome”:”Verdi”,
“eta”: 33,
“citta”: “Torino”
},
{
“nome”:”Elisa”,
“cognome”:”Bianchi”,
“eta”: 19,
“citta”: “Roma”
},
{
“nome”:”Mario”,
“cognome”:”Bianchi”,
“eta”: 57,
“citta”: “Roma”
},
{
“nome”:”Silvio”,
“cognome”:”Gialli”,
“eta”: 28,
“citta”: “Napoli”
},
{
“nome”:”Marina”,
“cognome”:”Gialli”,
“eta”: 21,
“citta”: “Napoli”
}
]
umbriawayformazione 