Esercizi AJAX JavaScript

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>

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