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>

I made you a snippet. Did you call `check` somewhere? The code looks correct and runs — mplungjan, Jul 08 '21 at 06:21
You MAY want to wrap: `+encodeURIComponent(document.getElementById('email').value )+...` — mplungjan, Jul 08 '21 at 06:22
@mplungjan No, it displays no output for me. I will edit the post and put access key so you can check — , Jul 08 '21 at 06:25
@mplungjan I have updated the both jquery and vanillaJS code with the access key, and also included the html now you can run them and check yourself. — , Jul 08 '21 at 06:33
For future edits please edit the snippet directly. Makes it much easier to see what's going on with your code. — cloned, Jul 08 '21 at 06:37

mplungjan · Accepted Answer · 2021-07-08T07:03:32.117

Use https
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>

The initial jQuery code is still working perfectly fine for me. It alerts "Valid email" if the email is valid and "Invalid email" if the email entered is not valid. So, you have not reached the limit (otherwise it wouldn't be working for me). It must be a different error. — , Jul 08 '21 at 06:42
Yes, they are working now. Thanks a lot. Fetch version seems to be better. But whenever I enter invalid mail, it says unknown issue is console. I think I should change it to alert("Invalid email") because its smtp_check is false — , Jul 08 '21 at 06:56
Ok, I just found that Invalid Email is not a part of data.error so I deleted alert("Invalid email"); from its initial position and replaced console.log("unknown issue", data); with alert("Invalid email"); and it works perfectly now! — , Jul 08 '21 at 07:02
Yes, I'm very sorry. I was too excited to finally be able to make this work due to which I forgot to accept the answer. I have accepted your answer now. — , Jul 08 '21 at 17:45

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

1 Answers1

Linked