ajax-post-handling-events.js

var request = new XMLHttpRequest();
request.addEventListener('progress',checkProgress);//fires when the readyState changes.
request.addEventListener('abort',abortMessage);// fires when the request is aborted.
request.addEventListener('error',errorMessage);// fires when an error occurs
request.addEventListener('load',handleRequest);// fires only when the request is successfull and data is sent back to the browser.

function handleRequest(){
  console.log(request.responseText);
}

function checkProgress(progress){
  var percentage = (progress.loaded / progress.total) * 100; 
  console.log(percentage); 
}

function errorMessage(){
  console.log('sorry there was an error, please try again');
}

function abortMessage(){
  console.log('sorry, this request was aborted');
}

request.open('GET',url,true);
request.send();