<html>
<head>
<title>Async JavaScript function test page</title>
<style>
.pass {
background-color: green;
}
.fail {
background-color: red;
}
</style>
<script>
responseText = "";
async function loadFromURL(url) {
let result = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.addEventListener("load", function () {
if (this.status >= 200 && this.status <= 299)
resolve(this.responseText);
else
reject();
});
xhr.addEventListener("error", () => reject());
xhr.send();
});
responseText = result;
document.getElementById("response-text").innerText = responseText;
}
async function testURL(url) {
responseText = "";
let shouldBeEmpty = false;
try {
await loadFromURL(url);
} catch {
shouldBeEmpty = true;
}
if ((responseText !== "") ^ shouldBeEmpty)
document.getElementById("result").innerHTML = "<p class=pass>PASS!</p>";
else
document.getElementById("result").innerHTML = "<p class=fail>FAIL!</p>";
}
</script>
</head>
<body>
<input id="url" type="text" value="http://man.serenityos.org/man4/zero.html">
<a href="javascript:testURL(document.getElementById('url').value)">Click me for fun</a>
<br>
<div id="result"></div>
<pre id="response-text"></pre>
</body>
</html>
