- Ava veebilehitsejas Code Sandbox sait
- Vali Official Templates vali HTML + CSS
- Kirjuta pildil olev kood index.html faili. Alustuseks kasuta HTML trafaretti (hüüumärk ja tab klahv)
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>HTML + CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<button type="button" onclick="loadDoc(1)">Request bacon</button><br />
<button type="button" onclick="loadDoc(2)">Request picture</button>
<p id="demo"></p>
<img src="" id="demo2" />
<script>
function loadDoc(id) {
const xhttp = new XMLHttpRequest();
if (id === 1) {
xhttp.onload = function () {
const data = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = data.join("<br>");
};
xhttp.open("GET", "https://baconipsum.com/api/?type=all-meat");
xhttp.send();
} else {
xhttp.responseType = "blob";
xhttp.onload = function () {
document.getElementById("demo2").src = URL.createObjectURL(
this.response
);
};
xhttp.open("GET", "https://picsum.photos/200");
xhttp.send();
}
}
</script>
</body>
</html>- Salvesta fail CTRL + S
- Lõpptulemuseks peaksid saama andmeid peekoni kohta
xhttp.open("GET", [URL]) – avab uus HTTP päring
xhttp.send() – saadab päringu serverisse
XMLHttpRequest – AJAX päring mis saadab API aadressile