Cacher is the code snippet organizer for pro developers

// GET

// Create event listener
document.getElementById('button').addEventListener('click', loadUsers);

function loadUsers(){
  // Create XHR Object
  const xhr = new XMLHttpRequest();
  // OPEN - type, url/file, async
  xhr.open('GET', 'https://api.github.com/users', true);

  // OPTIONAL - used for loaders
  xhr.onprogress = function(){
    console.log('READYSTATE: ', xhr.readyState);
  }

  xhr.onload = function(){
    if(this.status == 200){
      const users = JSON.parse(this.responseText);
      document.getElementById('text').innerHTML = users;
    } else if(this.status = 404){
      document.getElementById('text').innerHTML = 'Not Found';
    }
  }

  xhr.onerror = function(){
    console.log('Request Error...');
  }

  // Sends request
  xhr.send();
}

// readyState Values
// 0: request not initialized 
// 1: server connection established
// 2: request received 
// 3: processing request 
// 4: request finished and response is ready

// POST

document.getElementById('postForm').addEventListener('submit', postName);

function postName(e){
  e.preventDefault();

  const name = document.getElementById('name2').value;
  const params = "name="+name;

  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'process.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  xhr.onload = function(){
    console.log(this.responseText);
  }

  xhr.send(params);
}