In questa lezione parleremo del metodo di jQuery ajax e di come gestire le chiamate asincrone.
Realizzeremo un esempio utilizzando un’API per il meteo free a cui però bisogna richiedere un’api key. Troviamo su questo sito openweathermap l’API da utilizzare. Una volta ottenuta l’API key possiamo utilizzarla all’interno della nostra chiamata asincrona con AJAX.
Ecco i dati che ci restituisce l’API opportunamente impostata:
Tra tutte le proprietà, prestiamo attenzione alle coordinate, al tempo ed alla temperatura in quanto sono quelle che ci serviranno.
jQuery ajax chiamate asincrone – esempio
L’esempio che vogliamo realizzare è dunque questo:
Una casella di input con la possibilità di inserire il nome della città ed un pulsante che al click calcola i dati che ci servono.
jQuery ajax chiamate asincrone – implementazione
Per l’implementazione pensiamo dapprima alla semplice pagina html, inserendo una casella di input, un pulsante e un container dove verranno visualizzati i dati.
Realizziamo adesso la chiamata asincrona utilizzando il metodo ajax in jQuery.
Al clic sul pulsante meteo, prendiamo quanto scritto nella casella di input e lo memorizziamo in una variabile, ad esempio di nome citta.
Andiamo poi a creare una variabile url in cui inseriamo come valore della chiave q, la variabile appena ricavata. Chiaramente al posto di codice-key, inserite il codice che vi è stato fornito da openweather.
Richiamiamo dunque la chiamata asincrona ajax sull’url così definito. Se la chiamata ha successo, visualizziamo i dati che ci servono nella pagina html, utilizzando semplicemente i selettori jQuery.
Convertiamo la temperatura in gradi Celsius, in quanto quella fornita è in gradi Kelvin.
Ecco dunque il codice completo in jQuery della chiamata ajax asincrona:
$(document).ready(function(){
$('#meteo').click(function(){
var citta = $('#citta').val();
var url = 'https://api.openweathermap.org/data/2.5/weather?q='+citta+'&appid=codice-key';
$.ajax({
url: url,
method: 'GET',
success: function(risposta) {
$('#dati-lon').text(risposta.coord.lon);
$('#dati-lat').text(risposta.coord.lat);
$('#tempo').text(risposta.weather[0].main);
var temp = risposta.main.temp;
temp = Math.round(temp - 273);
$('#temperatura').text(temp);
}
},
error: function() {
console.log('Si è verificato un errore');
}
});
});
});
Questa API può essere utilizzata senza chiedere nessuna apy-key, dunque si può copiare direttamente il link indicato sopra nel parametro url da inserire nel metodo $.ajax che andremo ad utilizzare.
L’API restituisce dei dati in formati JSON che possiamo andare a manipolare per i nostri scopi. In particolare ci dà il codice ISO dello Stato ed il nome.
Esempio di chiamata AJAX
Utilizzando quest’API dunque realizziamo una pagina html che consente di selezionare il codice ISO che rappresenta uno stato e dunque visualizza il codice e il nome dello Stato corrispondente.
Ecco l’esempio completo di ciò che vogliamo realizzare: filtra-Stato.
Esempio di chiamata AJAX – implementazione
Lato html realizziamo quindi una semplice pagina con una select che conterrà tutti i codici ISO degli Stati ed un container che conterrà il nome dello Stato ed il relativo codice ISO.
Per realizzare l’esercizio utilizziamo anche HandleBars, strumento utile per la creazione di template dinamici.
Inseriamo poi due template da clonare:
– entry-template che conterrà il codice che vogliamo inserire nel container con i segnaposti del nostro oggetto.
– ed elenco che servirà a visualizzare una casella di testo con tutti le voci.
Ecco dunque il codice HTML completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<!--qui inserisco in automatico i codici degli Stati -->
<select id="sigle"></select>
<!--qui inserisco in automatico il codice dello Stato e il nome -->
<div class="container"></div>
<!--template che verrà inserito all'interno del container -->
<script id="entry-template" type="text/x-handlebars-template">
<div class="stato {{isocode}}">
<span>{{isocode}}</span>
<h3>{{country}}</h3>
</div>
</script>
<!--template che verrà inserito all'interno dell'elenco-->
<script id="elenco" type="text/x-handlebars-template">
<option value="{{isocode}}">{{isocode}}</option>
</script>
<script src="js\script.js" charset="utf-8"></script>
</body>
</html>
Continuiamo con il nostro esempio di chiamata AJAX sviluppando adesso lo script.
Utilizziamo dunque il metodo $.ajax() per effettuare la chiamata all’API libera utilizzando GET.
AJAX riconosce i dati in formato JSON e dunque il primo parametro passato all’interno della funzione success, nel nostro caso risposta, restituisce un oggetto.
Se la chiamata ha successo, dunque, visualizziamo i dati contenuti nella proprietà con chiave results. Analizzando questa chiave results notiamo che contiene un array di oggetti. Quindi, per leggere ciascun elemento, realizzo una funzione leggiDati in cui scorro tutto l’array e per ogni elemento faccio un clone con Handlebars.
Tramite handlebars dunque creo e compilo i template, aggiungendo i dati desiderati.
Dopo aver creato la funzione la richiamo sull’array riposta.result.
Realizzo poi una funzione per l’ordinamento dell’array, basato sulla chiave dell’oggetto, così come avevamo visto in questa lezione: ordinare i dati di un oggetto.
Richiamo dunque la funzione leggiDati sull’array ordinato.
Per creare il filtro con le sigle degli stati possono semplicemente nascondere gli elementi che hanno la classe stato e visualizzare gli elementi che hanno la stato stato e la provincia giusta.
Ecco dunque il codice completo dell’esempio di chiamata AJAX:
$(document).ready(function() {
$.ajax(
{
'url': 'https://apiv3.iucnredlist.org/api/v3/country/list?token=9bb4facb6d23f48efbf424bb05c0c1ef1cf6f468393bc745d42179ac4aca5fee',
'method': 'GET',
'success': function(risposta){
var ordinato = risposta.results.sort(maggiore);
leggiDati(ordinato);
},
'error':function(){
alert('errore!');
}
}
);
$('#sigle').click(function(){
var filtro = $(this).val();
console.log(filtro);
$('.stato').hide();
$('.stato.'+ filtro).show();
});
});
function leggiDati (data){
var source = $('#entry-template').html();
var template = Handlebars.compile(source);
var source2 = $('#elenco').html();
var template2 = Handlebars.compile(source2);
for (var i = 0; i < data.length; i++){
var elemento = data[i];
var html = template(elemento);
$('.container').append(html);
var html2 = template2(elemento);
$('#sigle').append(html2);
}
}
function maggiore(a,b) {
if (a.isocode < b.isocode){
return -1;
}
else if (a.isocode > b.isocode){
return 1;
}
return 0;
}
In questa lezione abbiamo implementato un semplice esempio di chiamata AJAX verso un’API disponibile senza token-key.
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.
In questo tutorial impareremo a creare un semplicissimo jQuery slider.
Realizzeremo questo slider utilizzando i metodi che abbiamo studiato in precedenza, ma più avanti vedremo altri metodi con cui poter realizzare uno slider in jQuery.
Quindi i metodi che ci serviranno per questo esempio sono: fadeIn(), fadeOut(), eq(), click(), addClass() e removeClass().
Esempio di utilizzo di jQuery slider
Potete vedere l’esempio seguendo il link: slider immagini con jQuery (ho messo un po’ di immagini della mia città, voi mettete pure le immagini che preferite).
Scegliete 5 immagini qualsiasi e salvatele nella cartella images, chiaramente il numero delle immagini può essere superiore o inferiore.
Codice html per lo slider
Cominciamo a costruire la nostra pagina web partendo dal codice html. Inseriamo un livello (div) a cui assegniamo una classe di nome container che conterrà le nostre immagini dello slider. Quindi inseriamo le immagini utilizzando il tag figure a cui assegniamo la classe imageslide.
Poi inseriamo le frecce per scorrere lo slide. Daremo, in seguito, una formattazione con il foglio di stile per visualizzare le frecce ai lati delle immagini. Attenzione per avere la freccia verso sinistra ❮, dunque il pulsante prev dovete inserire questo carattere speciale ❮ seguito dal ; mentre per il carattere freccia destra ovvero il pulsante next ❯ dovete inserire ❯ separato dal ;.
Infine creiamo il menù di navigazione a pallini (dot o punti) che di solito va in basso. Questo menù è utile perché agevola lo scorrimento delle immagini in maniera non sequenziale.
Ecco il codice html completo per creare il nostro semplicissimo jQuery slider.
Dopo cominciamo a creare il foglio di stile, dando una formattazione adeguata.
Innanzitutto diamo margine 0 al body, in modo che le immagini risultino attaccate ai bordi.
Inoltre è importante impostare questa classe:
.imageslide{ display: none; }
Altrimenti le immagini verrebbero visualizzate una sotto l’altra. Con questa proprietà le rendo invisibili e successivamente tramite il codice jQuery ne permetto la visualizzazione.
Infatti successivamente con $(‘.imageslide:first’).show(); mostro la prima immagine.
Le frecce prev e next sono posizionate a una distanza dall’alto del 35%, con larghezza automatica, dimensione del font di 60 pixel, di colore grigio e con una trasparenza (opacity 0.7). Inoltre facciamo in modo che quando siamo sulle frecce compare la manina del mouse impostando cursor: pointer.
Poi, per posizionare la freccia destra dò un margine di soli 4 pixel dal bordo destro.
Lo stesso discorso per il menù di navigazione a pallini (dot). Creiamo i pallini di altezza e larghezza 18 px, utilizziamo la proprietà border-radius: 50% per creare gli angoli arrotondati (altrimenti avremmo dei quadrati) e li coloriamo di grigio chiaro: #ccc.
Infine la classe grigio, a cui diamo un colore grigio scuro e una trasparenza, verrà applicata ai dot quando l’immagine relativa è selezionata.
Imposto anche le media queries per le diverse visualizzazioni.
Come dicevamo con $(‘.imageslide:first’).show(); mostro la prima immagine.
Impostiamo una variabile current_img, che rappresenta l’indice delle nostre immagini, che parte da 0 e si ferma a 4, perché ho deciso di inserire 5 immagini.
Dopo selezioniamo il primo dei pallini (punti- dot) in basso e gli diamo un colore grigio scuro tramite il metodo addClass(): (‘.pulsanti>span:first’).addClass(‘grigio’);
Infatti il primo dot rappresenta la prima immagine.
Dopo costruiamo la navigazione dei pulsanti in basso, facendo in modo che quando si clicca su di un pallino l’immagine precedente si nasconde con il metodo hide() e quella selezionata compare con effetto dissolvenza grazie al metodo fadeIn().
Per selezionare l’indice corrente utilizzo il metodo eq().
Allo stesso modo ci costruiamo i pulsanti next e prev, facendo attenzione all’indice dell’immagine. Infatti, se l’indice è minore di 4 vado avanti nella sequenza, altrimenti lo riporto a 0.
jQuery eq() method è un metodo che serve ad individuare elementi specifici all’interno di un set di elementi. All’interno del metodo eq() si specifica infatti un indice che indica la posizione dell’elemento che vogliamo selezionare.
La sintassi è dunque questa:
$(selettore).eq(indice)
dove indice rappresenta un numero intero.
Quindi se, data una serie di voci di un elenco puntato, volessi selezionare la voce dell’elenco che indica jQuery potrei utilizzare il metodo eq() specificando l’indice 2.
L’indice può essere anche negativo, ma in questo caso si partirà a contare dal basso e non dall’alto e si inizia da -1 (consultate il secondo esempio di questa lezione).
Esempio di utilizzo di jQuery eq()
Facciamo quindi un esempio completo per capire come applicare questo metodo.
Guardate dunque l’elenco sotto, noterete che ho applicato alla voce jQuery dell’elenco una formattazione diversa.
Dopo inseriamo, in un punto qualunque della pagina, il nostro elenco a cui assegniamo un id. Ciò è importante perchè l’id mi servirà quando userò il selettore nella funzione jQuery.
Infine creo la mia semplicissima funzione in cui utilizzo il metodo eq() e il metodo css(). Notate che come selettore ho utilizzato l’idargomenti e la voce li dell’elenco puntato. Ho utilizzato l’id per distinguere l’elenco da altri possibili elenchi presenti nella pagina.
Commenti recenti