jquery ajax 到 vanilla javascript（普通 javascript）代码转换请求

Question

是否有可用于以下代码 sn-p 的 vanilla javascript 替代方案？

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");
    }
}

这是我使用 jQuery 的唯一地方，并且为此使用整个 jQuery 库听起来不是一个好主意。我已经测试了用于电子邮件验证的脚本，它运行良好。

当我发现 jQuery Ajax 的 VanillaJS 替代品时，我遇到了http://youmightnotneedjquery.com/，这是我可以使用该网站编写的代码，但它根本没有显示任何输出：

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. 使用 https
2. 我们需要 JSON.parse renderList(JSON.parse(this.response));

请注意，在测试有效电子邮件之前，我已达到您的限制

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>

获取示例

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>