This is an example of how to make an HTTP request using vanilla JS.

xhr-example.js

'use strict';

// Step One:
//
// in order to make an HTTP request we need an XMLHTTPRequest (XHR) object.
// Action: use new XMLHttpRequest() to create an XMLHttpRequest object and assign it to a variable.
var req = new XMLHttpRequest();
// The variable now holds an XMLHttpRequest object, which looks something like this:
//
// req = {
//     onreadystatechange: null,
//     readyState: 0,
//     timeout: 0,
//     withCredentials: false,
//     upload: XMLHttpRequestUpload,
//     responseURL: "",
//     status: 0,
//     statusText: "",
//     responseType: "",
//     response: ""
// }
//
// Notice that req.readyState === 0.
// Every new XMLHttpRequest has a readyState of 0.


// Step Four: (skip to Step Two before reading this section)
//
// When req.readyState changes values, the browser will invoke req.onreadystatechange.
// Action: set req.onreadystatechange to a function.
req.onreadystatechange = function() {
// Every time req.readyState changes this function is invoked.
//
// Step Five:
//
// Since we are loading a JSON file, we only care when the request is done.
// Remember, when a request is done loading readyState === 4.
// Action: check if the request is finished loading:
    if (req.readyState === 4) {
//
// Step Six:
//
// Every HTTP request has a status code, this number shows whether or not a request succeeded or failed.
// Status codes from 100 to 199 represent special conditions.
// Status codes from 200 to 299 represent success.
// Status codes from 300 to 399 represent special conditions.
// Status codes from 400 to 499 represent an issue with request.
// Status codes from 500 to 599 represent an issue with the server.
//
// Action: if the request has a bad status code print the error code, otherwise continue
        if (req.status > 400) {
            console.error(req.status);
        } else {
//
// Step Seven:
//
// Action get the JSON response String and parse it into a usable Javascript object.
          var responseJSON = this.responseText;
          var responseObj = JSON.parse(responseJSON);
          console.log(responseObj);
// Note: There are different responseTypes, some save the response in req.response while others use req.responseText
        }
    }
};




// Step Two:
//
// All HTTP requests have a method, here are 4 commonly used methods:
// GET - this method is typically used to ask the server for retrieve a resource.
// POST - this method is typically used to ask the server to create a resource.
// PUT - this method is typically used to ask the server to update a resource.
// DELETE - this method is typically used to ask the server to delete a resource.
//
// An HTTP request must have a destination URL. This is the address of the server to send the request.
// Here are some valid URLs:
// http://localhost:8080
// http://google.com
// http://pokeapi.co/api/v2/pokemon/1/
// http://192.168.0.1
//
// Action: call XMLHttpRequest.open to set the request:
// HTTP method
// destination URL
req.open('GET', 'http://pokeapi.co/api/v2/pokemon/1/');
// now notice that req.readySate === 1
// When XMLHttpRequest.open is called the readyState changes from 0 to 1.



// Step Three:
//
// Now that req.open set the HTTP method and destination URL we can send the request.
// Action: call XMLHTTPRequest.send() to send the request.
req.send();
// Opening up the browser tools reveals that a request has been sent.
//
// Shortly after, req.readyState === 2.
// When XMLHttpRequest.send is called and the server recognizes the request readyState changes from 1 to 2.
//
// Shortly after, req.readyState === 3.
// When the browser starts loading data from the server the request readyState changes from 2 to 3.
//
// Shortly after, req.readyState === 4.
// When the browser finishes loading data from the server the request readyState changes from 3 to 4.