javascript - Jquery 的 $.getJSON 的 vanilla JS 版本是什么

Question

我需要构建一个项目才能进入我正在申请的 JS 训练营。他们告诉我我只能使用 vanilla JS，特别是框架和 Jquery 是不允许的。到目前为止，当我想从 api 检索 JSON 文件时，我会说

$.getJSON(url, functionToPassJsonFileTo)

用于 JSON 调用和

$.getJSON(url + "&callback?", functionToPassJsonPFileTo) 

用于 JSONP 调用。我这个月才开始编程，所以请记住我不知道 JSON 或 JSONP 之间的区别，也不知道它们与称为 ajax 的东西有何关系。请解释我如何在 Vanilla Javascript 中获得上面两行的内容。谢谢。

所以澄清一下，

function jsonp(uri){
    return new Promise(function(resolve, reject){
        var id = '_' + Math.round(10000 * Math.random())
        var callbackName = 'jsonp_callback_' + id
        window[callbackName] = function(data){
            delete window[callbackName]
            var ele = document.getElementById(id)
            ele.parentNode.removeChild(ele)
            resolve(data)
        }

        var src = uri + '&callback=' + callbackName
        var script = document.createElement('script')
        script.src = src
        script.id = id
        script.addEventListener('error', reject)
        (document.getElementsByTagName('head')[0] || document.body || document.documentElement).appendChild(script)
    })
}

JSONP 会是等价物吗？

Answer 1

这是 $.getJSON 的 Vanilla JS 版本:

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

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

request.send();

引用:http://youmightnotneedjquery.com/

对于 JSONP SO 已经有了答案 here

With $.getJSON you can load JSON-encoded data from the server using a GET HTTP request.