AJAX, Axios, Fetch API

AJAX is an acronym for Asynchronous JavaScript And XML. It’s not a language, just a set of technology used for making asynchronous requests from the client to the server. The term was first used in 2005, and since that time has been very common. XML, however, is rarely used. JSON is much more popular but AJAX does not say what you have to use, so AJAX with JSON instead of XML is still valid.

AJAX improves performance, because it is not render blocking. A script can use AJAX and the rest of the page can continue rendering while AJAX sends and receives data to a server/database in the background. Instead of a regular HTTP request and response, which would block the rest of the page from rendering, the AJAX engine creates an XMLHttpRequest object, which makes the HTTP requests and awaits a response, which it will deliver to the client when it is received.

The AJAX engine receives data back from the server in the from of XML/JSON/Text or anything else, and turns it into HTML for the client.

Fetch API

The Fethc API is a newer

XMLHttpRequest (XHR) Object

This is an API in the form of a JavaScript object, it is provided by the browser. The XMLHttpRequest does not actually have to make the request via HTTP, it can use other methods. You can use libraries and methods to interact with the XMLHttpRequest to make it easier to use, such as jQuery and Axios. jQuery is kind of bloated, and probably should not be used unless your project is already using it for other things. Axios is much smaller.

const button = document.getElementById("button1");
const ajaxClass = document.querySelector(".ajax");
const allC = document.querySelector(".allc");

function loadUsers() {
  allC.style.display = "none";
  ajaxClass.style.display = "block";
  let xhr = new XMLHttpRequest();
  let userField = document.getElementById("user");
  xhr.open("GET", "https://api.github.com/users", true);
  xhr.onload = function () {
    if (this.status == 200) {
      let users = JSON.parse(this.responseText);
      let out = "";
      users.map((i) => {
        out += `<div class="user"> <img src="${i.avatar_url}" ></img></div>`;
      });

      userField.innerHTML = out;
    }
  };

  xhr.send();
}