Javascript AJAX: Difference between revisions
From wikinotes
(Created page with "XHR requests let you POST a request to a REST API, and update the page from a HTML event when it replies. <syntaxhighlight lang="javascript"> var payload = { "foo": "bar" };...") |
m (Will moved page XHR/AJAX requests to Javascript AJAX) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
and update the page from a HTML event when it replies. | and update the page from a HTML event when it replies. | ||
= Example = | |||
<blockquote> | |||
<syntaxhighlight lang="html4strict"> | |||
<script> | |||
document.addEventListener("DOMContentLoaded", function() { | |||
function sendAjaxRequest() { | |||
var payload = { "foo": "bar" }; | |||
var json_payload = JSON.stringify(payload); | |||
var XHR = new XMLHttpRequest(); | |||
var | |||
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> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
</blockquote><!-- Example --> | |||
Latest revision as of 04:34, 17 December 2022
XHR requests let you POST a request to a REST API, and update the page from a HTML event when it replies.
Example
<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>
