Daria Halchenko õpimapp I portfoolio

en_USet

Harjutus 6: API päring

Ülesande eesmärk: Õppida kasutama XMLHttpRequest objekti AJAX-päringute tegemiseks. Teostada HTTP-päringu saatmine GET-meetodiga määratud API-aadressile meetodi xhttp.open(„GET“, url) abil ja saata see meetodi xhttp.send() abil. Saada vastus serverilt ja kuvada saadud andmed veebilehel, demonstreerides asünkroonsete päringute ja dünaamilise sisu uuendamise põhimõtteid ilma lehekülge uuesti laadimata.

  1. Ava veebilehitsejas Code Sandbox sait
  2. Valige HTML + CSS

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>API Requests</h1>
    <button type="button" onclick="loadBacon()">Request Bacon</button>
    <p id="demoBacon"></p>
    <button type="button" onclick="loadJoke()">Request Joke</button>
    <p id="demoJoke"></p>
    <button type="button" onclick="loadFact()">Request Fact</button>
    <p id="demoFact"></p>
    <script>
      function loadBacon() {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function () {
          document.getElementById("demoBacon").innerHTML = this.responseText;
        };
        xhttp.open("GET", "https://baconipsum.com/api/?type=all-meat");
        xhttp.send();
      }
      function loadJoke() {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function () {
          document.getElementById("demoJoke").innerHTML = this.responseText;
        };
        xhttp.open("GET", "https://icanhazdadjoke.com/", true);
        xhttp.setRequestHeader("Accept", "text/plain");
        xhttp.send();
      }
      function loadFact() {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function () {
          const response = JSON.parse(this.responseText);
          document.getElementById("demoFact").innerHTML = response.fact;
        };
        xhttp.open("GET", "https://catfact.ninja/fact", true);
        xhttp.send();
      }
    </script>
  </body>
</html>

styles.css

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #ffe6f0, #ffd1e6);
  margin: 0;
  padding: 40px 20px;
  color: #5a2a42;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
}

h1 {
  color: #d66a88;
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: 30px;
  text-shadow: 1px 1px 3px rgba(214, 106, 136, 0.4);
}

button {
  background-color: #d66a88;
  border: none;
  color: #fff;
  padding: 14px 28px;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(214, 106, 136, 0.5);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
  margin: 8px 0;
  width: 220px;
}

button:hover {
  background-color: #bf5772;
  box-shadow: 0 8px 20px rgba(191, 87, 114, 0.7);
}

button:active {
  background-color: #a34561;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15);
}

#demoBacon,
#demoJoke,
#demoFact {
  margin-top: 25px;
  max-width: 650px;
  background: #ffe6f2;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(214, 106, 136, 0.2);
  font-size: 1.1rem;
  color: #5a2a42;
  line-height: 1.6;
  word-wrap: break-word;
  white-space: pre-wrap;
  min-height: 80px;
  transition: background-color 0.3s ease;
}

#demoBacon:hover,
#demoJoke:hover,
#demoFact:hover {
  background-color: #ffd1e0;
}

3. Salvesta ja uuenda leht.

Tulemuseks peaksite saama andmed peekonist, naljad ja faktid.

Kokkuvõte:

  • xhttp.open(“GET”, url) – avab uus HTTP päring.
  • xttp.send() – saadab päringu serverisse.
  • XMLHTttpRequest – AJAX päring mis saadab API aadressile päringu.