In questa lezione utilizzeremo le tecnologie AJAXjQuery e JSON per realizzare una chiamata asincrona ad un file presente sul server.
Dunque proveremo a leggere i dati da un file JSON. Inoltre, per chi volesse approfondire l’argomento inerente i file JSON, indico un semplice tutorial che ho creato: Introduzione a JSON. Allego anche il link all’esempio inerente la creazione della chiamata AJAX per i file JSON, realizzata in JavaScript: AJAX e JSON.
Esempio utilizzando AJAX jQuery e JSON
Dunque creiamo lato html questo semplice codice, composto da un pulsante che consente di inviare dei dati e da un div che consente di visualizzare i dati json.
Inseriamo anche il link al nostro script che andremo a creare.
Quindi utilizzeremo innanzitutto il metodo affrontato nella lezione precedente $.ajax e impostiamo l’url e i parametri method, success ed error.
Success è la funzione che verrà eseguita in caso di successo della chiamata a cui passiamo come parametro risposta che rappresenta i dati restituiti dal server web. Risposta è dunque in questo caso l’oggetto restituito in caso di successo. Di conseguenza, per richiamare le proprietà dell’oggetto basta seguire la notazione utilizzata per gli oggetti JavaScript.
Error invece verrà eseguita in caso di errore, visualizzando semplicemente il messaggio: ‘Si è verificato un errore‘.
Ecco di seguito il codice completo realizzato utilizzando AJAX jQuery e JSON:
AJAX e jQuery sono tecnologie utili per implementare delle chiamate asincrone, in maniera piuttosto semplice.
Abbiamo già parlato di AJAX in questa lezione: Introduzione ad AJAX e abbiamo visto come creare chiamate asincrone utilizzando JavaScript.
Inoltre abbiamo fatto degli esempi su come leggere da un file presente su un server web, utilizzando l’oggetto xmlhttprequest.
Il metodo jQuery.ajax o $.ajax
jQuery dispone del metodo $.ajax() che permette di effettuare una chiamata asincrona e anche di personalizzarla.
Questo metodo restituisce un oggetto jqXHR che contiene tutte le informazioni sull’oggetto Javascript XMLHttpRequest originale.
Sintassi del metodo
$.ajax ({url[, settings]})
Quindi all’interno delle parentesi si possono specificare dei parametri, tra cui l’url.
Studiamo i principali parametri che è possibile impostare in questo metodo, in quanto sono veramente tantissimi. Per un maggiore approfondimento rimando inoltre al link del sito ufficiale: metodo jquery.ajax.
url
L’url rappresenta il percorso del file richiesto, cioè la nostra risorsa.
settings
Valore opzionale che rappresenta un insieme di coppie/valore, le quali caratterizzano la richiesta AJAX in jQuery, infatti consentono di specificare numerosi parametri tra cui:
method: rappresenta il metodo HTTP che serve per la richiesta. Può avere questi valori: POST, GET oppure PUT. Mentre il valore di default è GET.
dataType: serve a specificare il tipo di dati che si riceve dal server web. I possibili valori sono: json, xml, txt, ecc.
success (data, textStatus, jqXHR): è una funzione che verrà eseguita in caso di successo della chiamata. I parametri opzionali che accetta sono tre, data che rappresenta i dati restituiti dal server, textStatus lo stato e l’oggetto jqXHR.
error (jqXHR, textStatus, errorThrown): è una funzione che verrà eseguita in caso di errore nella chiamata effettuata, ad esempio perché la risorsa non è accessibile. I parametri sono opzionali.
Esempio di chiamata AJAX con jQuery
Facciamo adesso un semplice esempio in cui applicheremo queste tecnologie.
Lato html inseriamo un div dove andremo a visualizzare i dati del documento da richiedere ad un server web.
<p>Qui si visualizzeranno i dati ricavati dal file txt caricato sul server, dopo aver cliccato sul pulsante carica dati.</p>
<button type="button" id="load">Carica dati</button>
<div id="dati-file" style="background:yellow"></div>
Non dimentichiamo nella pagina html di inserire anche il link alla cdn jQuery:
Dopo, lato JavaScript, al click sul pulsante richiamiamo il metodo ajax dove, oltre alla url impostiamo il metodo al valore get, ed implementiamo le funzioni in caso di successo e di errore.
Ecco dunque l’esempio completo che utilizza la tecnologia AJAX e jQuery.
$(document).ready(function(){
$('#load').click(function (){
$.ajax({
method: "GET",
// specifico la URL della risorsa da contattare
url: "https://www.codingcreativo.it/ajax.txt",
// imposto l'azione in caso di successo
success: function(risposta){
//visualizzo il contenuto del file nel div htmlm
$("#dati-file").html(risposta);
},
//imposto l'azione in caso di insuccesso
error: function(stato){
alert("Qualcosa è andato storto");
}
});
});
});
Prova l’esempio
Qui si visualizzeranno i dati ricavati dal file txt caricato sul server, dopo aver cliccato sul pulsante carica dati.
In questa lezione abbiamo semplicemente introdotto il concetto di AJAX e jQuery, nella prossima lezione vederemo come interagire con i file JSON.
