<!DOCTYPE html>
<html>
<body>
<script>
window.onload = function () {
document.querySelector("#callback").onclick = async function () {
const url = "https://randomuser.me/api?results=";
let n = randomInteger(5, 10);
getName(...await ajaxGet(3, url + 3));
getName(...await ajaxGet(n, url + n));
}
}
function getName(s, request) {
let data = JSON.parse(request.responseText);
for (let { name: { first, last } } of Object.values(data.results)) {
document.getElementById("name").innerHTML += s + " " + first + " " + last + "<br>";
}
}
function ajaxGet(s, url) {
return new Promise(function(resolve) {
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
resolve([s, this]);
}
}
request.open('GET', url);
request.send();
});
}
function randomInteger(min, max) {
var rand = min - 0.5 + Math.random() * (max - min + 1)
rand = Math.round(rand);
return rand;
}
</script>
<button id="callback">Button</button>
<div id="name"></div>
</body>
</html>