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 等价物吗？

原文由 oski369 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 所以 这里 已经有了答案

使用 $.getJSON 您可以使用 GET HTTP 请求从服务器加载 JSON 编码的数据。

原文由 Vicky Gonsalves 发布，翻译遵循 CC BY-SA 3.0 许可协议