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.

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>