jquery ajax to vanilla javascript (normal javascript) code conversion request

Question

Is there a vanilla javascript alternative available for the following code snippet?

function check() {
    var restURL = "https://apilayer.net/api/check?access_key=c5118f1f9827f42a5fc4b231932130a8&email=" + document.getElementById('email').value + "&smtp=1&format=1"
    $.ajax({
        type: 'GET',
        url: restURL,
        dataType: "json",
        success: renderList,
    });
    return false;
}

function renderList(data) {
    if ((data.format_valid == true) && (data.smtp_check == true)) {
        alert("Valid email");
    }
    else {
        alert("Invalid email");
    }
}

This is the only place where I'm using jQuery and using the whole jQuery library for this does not sound like a good idea. I have tested the script for email verification and it works perfectly.

When I was finding the VanillaJS alternatives of jQuery Ajax, I came across http://youmightnotneedjquery.com/ and this is the code I could write using that website but it does not show any output at all:

function check() {
  var restURL = "https://apilayer.net/api/check?access_key=c5118f1f9827f42a5fc4b231932130a8&email=" + document.getElementById('email').value + "&smtp=1&format=1"
  var request = new XMLHttpRequest();
  request.open('GET', restURL, true);
  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      //SUCCESS
      var resp = this.response;
      renderList(resp.data);
    } else {
      // We reached our target server, but it returned an error
      alert("Server returned an error");
    }
  };

  request.onerror = function() {
    alert("Connection Error");
    // There was a connection error of some sort
  };

  request.send();
}

function renderList(data) {
  if ((data.format_valid == true) && (data.smtp_check == true)) {
    alert("Valid email");
  } else {
    alert("Invalid email");
  }
}

<input type="email" id="email" value="x@.com" />
<button onclick="check()"> Click me</button>

Answer 1

1. Use https
2. We need to JSON.parse renderList(JSON.parse(this.response));

Note, I reached YOUR limit before testing a valid email

function check() {
  var restURL = "https://apilayer.net/api/check?access_key=c5118f1f9827f42a5fc4b231932130a8&email=" + document.getElementById('email').value + "&smtp=1&format=1"
  var request = new XMLHttpRequest();
  request.open('GET', restURL, true);
  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      //SUCCESS
      renderList(JSON.parse(this.response));
    } else {
      // We reached our target server, but it returned an error
      alert("Server returned an error");
    }
  };

  request.onerror = function() {
    alert("Connection Error");
    // There was a connection error of some sort
  };

  request.send();
}

function renderList(data) {
  if ((data.format_valid == true) && (data.smtp_check == true)) {
    alert("Valid email");
  } else {
    alert("Invalid email or issue with the api");
  }
}

<input type="email" name="email" id="email">
<button onclick="check()"> Click me</button>

Fetch example

function check() {
  var restURL = "https://apilayer.net/api/check?smtp=1&format=1&access_key=c5118f1f9827f42a5fc4b231932130a8&email=" + encodeURIComponent(document.getElementById('email').value)
  fetch(restURL)
    .then(response => response.json())
    .then(data => renderList(data));
}

function renderList(data) {
  if (data.email && data.smtp_check) {
    alert("Valid email");
  } else {
    if (data.error) {
      if (data.error.type.includes('limit')) console.log("drat, limit reached")
      else if (data.error.type.includes("no_email")) {
        alert("empty email")
      } else {
        alert("Invalid email");
        console.log(data)
      }
    } else console.log("unknown issue", data)
  }
}

<input type="email" name="email" id="email">
<button onclick="check()"> Click me</button>