Get JSON with XMLHttpRequest

from the Github API

by Wayne Humphrey

HTML

GitHub Name:
<input type="text" id="myName" value="pytorch">
<button onclick='request("https://api.github.com/users/"+document.getElementById("myName").value);'>Get it</button>
<div id="input">
</div>

JavaScript

function request(url) {
  var xReq = new XMLHttpRequest();

  xReq.addEventListener("progress", updateProgress);
  xReq.addEventListener("load", transferComplete);
  xReq.addEventListener("error", transferFailed);
  xReq.addEventListener("abort", transferCanceled);

  var updateProgress = function() {
    console.log("updateProgress");
  }

  function transferComplete(evt) {
    console.log("The transfer is complete.");
  }

  function transferFailed(evt) {
    console.log("An error occurred while transferring the file.");
  }

  function transferCanceled(evt) {
    console.log("The transfer has been canceled by the user.");
  }

  xReq.open("GET", url);
  xReq.setRequestHeader('Content-Type', 'text/plain');
  xReq.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      alert("State: " + this.readyState + " and Status: " + this.status + " and Response: " + this.responseXML);
      var myArr = JSON.parse(this.responseText);
      console.log(myArr);
      document.getElementById("input").innerHTML = this.responseText;
    }
  }

  var div = document.getElementById("input");
  div.innerHTML += "";

  xReq.send();
}