title: What if we display the retrieved data from XHR inside onload callback rather than asynchronous callback
body: <p>I am beginner at JS and was learning AJAX(XHR object) and as you can see the code below. Also, guys if you won't get what I mean please let me know :-)</p>
  
  <pre><code>function easyHTTP() {
    this.http = new XMLHttpRequest();
  }
  
  // Make an HTTP GET Request
  easyHTTP.prototype.get = function(url, callback) {
    this.http.open('GET', url, true);
  
    let self = this;
    this.http.onload = function() {
      if(self.http.status === 200) {
        callback(null, self.http.responseText);
      } else {
        callback('Error: ' + self.http.status);
      }
    }
  
    this.http.send();
  }
  
  const http = new easyHTTP;
  
  http.get('https://jsonplaceholder.typicode.com/posts', function(err, posts) {
   if(err) {
    console.log(err);
   } else {
       console.log(posts);
     }
   });
  </code></pre>
  
  <p>As you can see the above code uses asynchronous callbacks to handle the retrieved data and then console.log that retrieved data. But I wonder what if instead of using asynchronous callback we will handle the retrieved data and console log it inside onload callback like so:</p>
  
  <pre><code>let self = this;
    this.http.onload = function() {
      if(self.http.status === 200) {
        console.log(self.http.responseText);
      } else {
        console.log('Error: ' + self.http.status);
      }
    }
  </code></pre>
  
  <p>Then just use this code to execute it:</p>
  
  <pre><code>const http = new easyHTTP;
  
  http.get('https://jsonplaceholder.typicode.com/posts')
  </code></pre>
  
  <p>I just cannot get what is the point of using asynchronous callbacks in XHR when we can wait and handle the retrieved data inside onload callback. </p>