Events

Next ❯jQuery Ajax

To handle AJAX related events

  • turned_in_notEvents
    • onloadstart - To define a event function, triggered at the start of the request
    • onprogress - To define a event function, triggered while request in progress
    • onabort - To define a event function, triggered when request is aborted
    • onload - To define a event function, triggered when request is received
    • onerror - To define a event function, triggered when any error occurred
    • onloadend - To define a event function, triggered when request load ends

Example
<!DOCTYPE html>
<html>
<body>
  <div id="text1"></div>
  <button onclick="fun()">Load (ajax_demo.txt)</button>
<script>
function fun(){
  var xhr = new XMLHttpRequest();

  //Adding events to XMLHttpRequest object &amp;
  //Event must declare before sending the request
  xhr.onloadstart = function(){alert("onloadstart event executed");}
  xhr.onprogress = function(){alert("onprogress event executed");}
  xhr.onabort = function(){alert("onabort event executed");}
  xhr.onerror = function(){alert("onerror event executed");}
  xhr.onload = function(){alert("onload event executed");}
  xhr.onloadend = function(){alert("onloadend event executed");}

  xhr.onreadystatechange = function() {
    if(this.readyState == 4 &amp;&amp; this.status == 200) {
      // here, handle the server response
      document.getElementById("text1").innerHTML = this.responseText;
    }
  };
  xhr.open("GET", "ajax_demo.txt", true);
  xhr.send();
}
</script>
</body>
</html>
OUTPUT:

  • jQuery Ajax
❮ Prev Ajax Response
Next ❯jQuery Ajax
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯