Esercizio 17: Richieste e API

jQuery

jQuery è una libreria JavaScript leggera e facile da usare che semplifica la manipolazione del DOM (Document Object Model) e la gestione degli eventi nel browser. jQuery fornisce un'API concisa e intuitiva che semplifica il lavoro con JavaScript e rende possibile scrivere codice più compatto e leggibile.

Alcuni esempi

1. $(document).ready(): questa funzione viene utilizzata per eseguire il codice JavaScript solo dopo che l'intera pagina web è stata caricata. Ad esempio, per nascondere un elemento al caricamento della pagina, si può utilizzare il seguente codice:

   $(document).ready(function() {
     $('#elemento').hide();
   });

2. $(selector): questa funzione viene utilizzata per selezionare un elemento HTML dal DOM. Il selettore può essere un nome di tag, un'ID, una classe o un selettore CSS personalizzato. Ad esempio, per selezionare un elemento con ID "elemento", si può utilizzare il seguente codice:

   $('elemento');//per tag
   $('#elemento');//per ID
   $('.elemento');//per classe

3. .css(prop, val): questa funzione viene utilizzata per modificare le proprietà CSS di un elemento selezionato. Il primo parametro è il nome della proprietà CSS e il secondo parametro è il valore da assegnare. Ad esempio, per modificare il colore di sfondo di un elemento con ID "elemento", si può utilizzare il seguente codice:

   $('#elemento').css('background-color', '#F00');

4. .text(): questa funzione viene utilizzata per impostare o ottenere il testo di un elemento selezionato. Ad esempio, per impostare il testo di un elemento con ID "elemento", si può utilizzare il seguente codice:

   $('#elemento').text('Nuovo testo');

5. .html(): questa funzione viene utilizzata per impostare o ottenere il contenuto HTML di un elemento selezionato. Ad esempio, per impostare il contenuto HTML di un elemento con ID "elemento", si può utilizzare il seguente codice:

   $('#elemento').html('
   Nuovo contenuto HTML
   ');

6. .addClass(): questa funzione viene utilizzata per aggiungere una classe a un elemento selezionato. Ad esempio, per aggiungere la classe "classe1" a un elemento con ID "elemento", si può utilizzare il seguente codice:

   $('#elemento').addClass('classe1');

7. .click(): questa funzione viene utilizzata per gestire l'evento click di un elemento selezionato. Ad esempio, per mostrare un messaggio quando viene fatto clic su un elemento con ID "elemento", si può utilizzare il seguente codice:

   $('#elemento').click(function() {
     alert('Hai cliccato su elemento!');
   });

jQuery offre anche modi più semplici per effettuare richieste asincrone:

1. $.ajax(). Questa funzione consente di inviare richieste HTTP al server e gestire la risposta in modo asincrono. In questo esempio, la funzione $.ajax() viene utilizzata per inviare una richiesta HTTP GET all'URL 'https://esempio.com/api/dati'. Il parametro dataType è impostato su 'json' per specificare che si vuole ottenere un JSON come risposta. La funzione success viene utilizzata per gestire la risposta del server, che viene passata come parametro data. La funzione error viene utilizzata per gestire eventuali errori nella richiesta AJAX.

   $.ajax({
     url: 'https://esempio.com/api/dati',
     dataType: 'json',
     success: function(data) {
       console.log(data);
     },
     error: function() {
       console.log('Errore nella richiesta AJAX');
     }
   });

   Una volta che i dati sono stati ottenuti, è possibile utilizzare le funzioni jQuery per manipolare il DOM e visualizzare i dati nella pagina web. Ad esempio, per visualizzare i dati ottenuti in una tabella HTML, si può utilizzare il seguente codice:

   $.ajax({
     url: 'https://esempio.com/api/dati',
     dataType: 'json',
     success: function(data) {
       var table = $('<table>');
       var headerRow = $('<tr>').appendTo(table);
       $('<th>').text('ID').appendTo(headerRow);
       $('<th>').text('Nome').appendTo(headerRow);
       $('<th>').text('Email').appendTo(headerRow);
   
       $.each(data, function(index, item) {
         var row = $('<tr>').appendTo(table);
         $('<td>').text(item.id).appendTo(row);
         $('<td>').text(item.nome).appendTo(row);
         $('<td>').text(item.email).appendTo(row);
       });
   
       $('#tabella-dati').append(table);
     },
     error: function() {
       console.log('Errore nella richiesta AJAX');
     }
   });

2. $.getJSON() è un metodo specifico di jQuery per effettuare richieste AJAX che prevedono il formato di risposta JSON. Questo metodo semplifica la sintassi di $.ajax() e $.get() e consente di ottenere facilmente i dati in formato JSON dal server. Questo metodo è ideale per le richieste AJAX che prevedono dati strutturati in formato JSON.

   $.getJSON('https://esempio.com/api/dati', function(data) {
     console.log(data);
   });

3. Oltre ad Ajax, ripassiamo le richieste usando fetch col più moderno sistema delle promesse.

   fetch('https://esempio.com/api/dati')
   .then(response => response.json()) //la risposta converte il testo in arrivo in json
   .then(data => console.log(data)) //il json viene stampato
   .catch(error => console.error(error));

   Il primo then risolve la promessa e la forma in json; questo json viene poi contenuto nella variabile data, che viene stampata. Nel caso opposto di un errore invece, l'errore viene stampato.

4. Le funzioni JS async-await sono basate sul sistema delle promesse.

   async function getData() {
   try {
     const response = await fetch('https://esempio.com/api/dati');
     const data = await response.json();
     console.log(data);
   } catch (error) {
     console.error(error);
   }
   

   La funzione async-await è una funzione asincrona che restituisce una promessa. Il try-catch è un sistema per gestire gli errori. La funzione fetch restituisce una promessa, che viene risolta con la risposta del server. La risposta viene convertita in json e contenuta nella variabile data, che viene stampata. Nel caso opposto di un errore invece, l'errore viene stampato.

   La differenza sostanziale sta nella sintassi: async e await dividono la richiesta dall'attesa della risposta.

Per approfondire:

1. Vediamo insieme: Promesse usando $.get(). E' una richiesta di base in Ajax, però utilizza il sistema di promesse per attendere il risultato
2. Asincronie parallele con Promise.all: Promises.all

   const promise1 = fetch('https://example.com/data1');
             const promise2 = fetch('https://example.com/data2');
             
             Promise.all([promise1, promise2])
               .then(arrayDiRisultati => {
                 const risultato1 = arrayDiRisultati[0];
                 const risultato2 = arrayDiRisultati[1];
                 // codice da eseguire dopo la risoluzione di tutte le promesse
               })
               .catch(errore => {
                 // codice da eseguire in caso di errore
               });

3. Fetch utilizzando async-await: clicca qui
4. Fetch: clicca qui

Di più sull'event loop e su come funziona JS dietro le quinte, consigliamo: spiegazione da JSConf e Jake Archibald.