Javascript AJAX
From wikinotes
XHR requests let you POST a request to a REST API, and update the page from a HTML event when it replies.
<script>
document.addEventListener("DOMContentLoaded", function() {
function sendAjaxRequest() {
var payload = { "foo": "bar" };
var json_payload = JSON.stringify(payload);
var XHR = new XMLHttpRequest();
XHR.open("POST", "/path/on/site");
XHR.addEventListener("error", function() {
console.log("An error occurred");
});
XHR.addEventListener("load", function() {
document.getElementById("results").innerHTML = this.responseText;
});
XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XHR.send(json_payload);
}
document.addEventListener("click", function (event) {
var target = event.target;
if (target.matches("#submit")) {
sendAjaxRequest();
}
});
});
</script>
<body>
<div>
<button id="submit">Submit</button>
</div>
</body>