Loome HTML + CSS faili CodeSandboxis
Loome lehe, millel on kaks nuppu. Esimesele nupule vajutades saadetakse päring API Bacon Ipsumile ja kuvatakse tekst lihaga. Teine nupp küsib API icanhazdadjoke’ilt nalja ja kuvab selle lehele. Nii saab kasutaja andmed välistest API-dest ja näeb neid kohe.
<!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>
<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();
}
</script>
</body>
</html>
Salvestame, uuendame lehekülge ja näeme tulemust.
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.