Esercizi AJAX JavaScript
Codegrind Team•Jul 12 2024
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>
Esercizio 3: Utilizzare fetch per una Richiesta GET
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>
Esercizio 4: Utilizzare fetch per una Richiesta POST
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>
Esercizio 5: Richiesta GET con axios
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>
Esercizio 6: Richiesta POST con axios
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>