Esercizi AJAX JavaScript
- Esercizio 1: Richiesta GET Semplice
- Esercizio 2: Richiesta POST
- Esercizio 3: Utilizzare fetch per una Richiesta GET
- Esercizio 4: Utilizzare fetch per una Richiesta POST
- Esercizio 5: Richiesta GET con axios
- Esercizio 6: Richiesta POST con axios
- Esercizio 7: Caricamento di un File
- Esercizio 8: Richiesta GET con Parametri
Ecco degli esercizi con soluzione per praticare l’uso di AJAX in JavaScript.
Esercizio 1: Richiesta GET Semplice
Eseguire una semplice richiesta GET utilizzando `XMLHttpRequest` e visualizzare i dati ricevuti.
<!DOCTYPE html><html> <head> <title>Richiesta GET Semplice</title> </head> <body> <button onclick="faiRichiesta()">Fai Richiesta</button> <pre id="risultato"></pre>
<script> function faiRichiesta() { var xhr = new XMLHttpRequest(); xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("risultato").textContent = xhr.responseText; } }; xhr.send(); } </script> </body></html>
Esercizio 2: Richiesta POST
Eseguire una richiesta POST utilizzando `XMLHttpRequest` per inviare dati al server.
<!DOCTYPE html><html> <head> <title>Richiesta POST</title> </head> <body> <button onclick="faiRichiesta()">Fai Richiesta</button> <pre id="risultato"></pre>
<script> function faiRichiesta() { var xhr = new XMLHttpRequest(); xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true); xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 201) { document.getElementById("risultato").textContent = xhr.responseText; } }; xhr.send( JSON.stringify({ title: "foo", body: "bar", userId: 1, }) ); } </script> </body></html>
fetch
per una Richiesta GET
Esercizio 3: Utilizzare Eseguire una richiesta GET utilizzando la funzione `fetch` e visualizzare i dati ricevuti.
<!DOCTYPE html><html> <head> <title>Fetch GET</title> </head> <body> <button onclick="faiRichiesta()">Fai Richiesta</button> <pre id="risultato"></pre>
<script> function faiRichiesta() { fetch("https://jsonplaceholder.typicode.com/posts/1") .then((response) => response.json()) .then( (data) => (document.getElementById("risultato").textContent = JSON.stringify(data, null, 2)) ) .catch((error) => console.error("Errore:", error)); } </script> </body></html>
fetch
per una Richiesta POST
Esercizio 4: Utilizzare Eseguire una richiesta POST utilizzando la funzione `fetch` per inviare dati al server.
<!DOCTYPE html><html> <head> <title>Fetch POST</title> </head> <body> <button onclick="faiRichiesta()">Fai Richiesta</button> <pre id="risultato"></pre>
<script> function faiRichiesta() { fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: "foo", body: "bar", userId: 1, }), }) .then((response) => response.json()) .then( (data) => (document.getElementById("risultato").textContent = JSON.stringify(data, null, 2)) ) .catch((error) => console.error("Errore:", error)); } </script> </body></html>
axios
Esercizio 5: Richiesta GET con Utilizzare `axios` per eseguire una richiesta GET e visualizzare i dati ricevuti.
<!DOCTYPE html><html> <head> <title>Axios GET</title> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <button onclick="faiRichiesta()">Fai Richiesta</button> <pre id="risultato"></pre>
<script> function faiRichiesta() { axios .get("https://jsonplaceholder.typicode.com/posts/1") .then((response) => { document.getElementById("risultato").textContent = JSON.stringify( response.data, null, 2 ); }) .catch((error) => { console.error("Errore:", error); }); } </script> </body></html>
axios
Esercizio 6: Richiesta POST con Utilizzare `axios` per eseguire una richiesta POST e inviare dati al server.
<!DOCTYPE html><html> <head> <title>Axios POST</title> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <button onclick="faiRichiesta()">Fai Richiesta</button> <pre id="risultato"></pre>
<script> function faiRichiesta() { axios .post("https://jsonplaceholder.typicode.com/posts", { title: "foo", body: "bar", userId: 1, }) .then((response) => { document.getElementById("risultato").textContent = JSON.stringify( response.data, null, 2 ); }) .catch((error) => { console.error("Errore:", error); }); } </script> </body></html>
Esercizio 7: Caricamento di un File
Utilizzare AJAX per caricare un file di testo e visualizzarne il contenuto.
<!DOCTYPE html><html> <head> <title>Caricamento di un File</title> </head> <body> <button onclick="caricaFile()">Carica File</button> <pre id="contenuto"></pre>
<script> function caricaFile() { var xhr = new XMLHttpRequest(); xhr.open("GET", "file.txt", true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("contenuto").textContent = xhr.responseText; } }; xhr.send(); } </script> </body></html>
Esercizio 8: Richiesta GET con Parametri
Utilizzare AJAX per eseguire una richiesta GET con parametri e visualizzare i dati ricevuti.
<!DOCTYPE html><html> <head> <title>GET con Parametri</title> </head> <body> <button onclick="faiRichiesta()">Fai Richiesta</button> <pre id="risultato"></pre>
<script> function faiRichiesta() { var xhr = new XMLHttpRequest(); var userId = 1; xhr.open( "GET", "https://jsonplaceholder.typicode.com/posts?userId=" + userId, true ); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("risultato").textContent = xhr.responseText; } }; xhr.send(); } </script> </body></html>