Introduzione

AJAX (Asynchronous JavaScript and XML) è una tecnica che permette a una pagina di aggiornare i contenuti comunicando col server in background. In passato si usava XML, ma oggi è molto più diffuso JSON. Il vantaggio è che non serve ricaricare la pagina intera, ma solo aggiornare la parte necessaria.

• Lettura di file JSON dal server.
• Aggiornamento dinamico dei contenuti.
• Maggiore velocità e interattività.

Con esempi pratici vediamo come recuperare un file JSON e visualizzarne il contenuto.

Esempio con XMLHttpRequest

Supponiamo di avere un file dati.json con informazioni sugli studenti:

CODE: JSON

1. {

2.   "studenti": [

3.     { "nome": "Anna", "eta": 20 },

4.     { "nome": "Luca", "eta": 22 },

5.     { "nome": "Marco", "eta": 19 }

6.   ]

7. }

Ecco il codice JavaScript per leggerlo con XMLHttpRequest e stamparne i dati:

Codice Esempio: XMLHttpRequest con JSON

CODE: Javascript

1. let xhr = new XMLHttpRequest();

2. xhr.open("GET", "dati.json", true);

4. xhr.onload = function() {

5.   if (xhr.status === 200) {

6.     let dati = JSON.parse(xhr.responseText);

7.     dati.studenti.forEach(studente => {

8.       console.log(studente.nome + " - " + studente.eta + " anni");

9.     });

10.   }

11. };

13. xhr.send();

15. // Output in console:

16. // Anna - 20 anni

17. // Luca - 22 anni

18. // Marco - 19 anni

Esempio con fetch

Lo stesso esempio con fetch risulta più leggibile:

Codice Esempio: fetch con JSON

CODE: Javascript

1. fetch("dati.json")

2.   .then(response => response.json())

3.   .then(dati => {

4.     dati.studenti.forEach(studente => {

5.       console.log(studente.nome + " - " + studente.eta + " anni");

6.     });

7.   })

8.   .catch(error => {

9.     console.error("Errore nella richiesta:", error);

10.   });

12. // Output in console:

13. // Anna - 20 anni

14. // Luca - 22 anni

15. // Marco - 19 anni

Applicazioni pratiche

Con AJAX possiamo, ad esempio:

• Caricare dinamicamente un elenco studenti.
• Aggiornare il carrello di un e-commerce.
• Mostrare notifiche in tempo reale.

Tabella riassuntiva

Considerazioni

Gli esempi concreti con file JSON mostrano come AJAX aggiorni i contenuti senza ricaricare la pagina. L’uso di fetch è oggi lo standard più chiaro, mentre JSON è il formato preferito per la semplicità di parsing e compatibilità con JavaScript.