什么是 Jquery 的 $.getJSON 的香草 JS 版本

Posted 2023-03-03

【中文标题】什么是 Jquery 的 $.getJSON 的香草 JS 版本

【英文标题】：What is the vanilla JS version of Jquery's $.getJSON

【发布时间】：2016-05-19 14:10:36

【问题描述】：

我需要建立一个项目才能进入我申请的 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 等价物吗？

【参考方案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

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

【讨论】：

这是$.getJSON() 的等价物，如果不清楚的话。获取 JSONP 有很大不同。

该链接是一个非常有用的资源，这里逐行比较：youmightnotneedjquery.com/#json

【参考方案2】：

ES6 具有 Fetch API，它提供了一个全局 fetch() 方法，该方法提供了一种简单、合乎逻辑的方式来通过网络异步获取资源。

比XMLHttpRequest 更容易。

fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function() 
    // Your code for handling the data you get from the API
)
.catch(function() 
    // This is where you run code if the server returns any errors
);

【讨论】：

如何获取数据对象？哦，我see，fetch(url).then(function(response) response.text().then(function(text) poemDisplay.textContent = text; ); );

【参考方案3】：

这是 Ajax 的香草 JS 版本

var $ajax = (function()
    var that = ;
    that.send = function(url, options) 
        var on_success = options.onSuccess || function(),
            on_error   = options.onError   || function(),
            on_timeout = options.onTimeout || function(),
            timeout    = options.timeout   || 10000; // ms

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() 
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
                //console.log('responseText:' + xmlhttp.responseText);
                try 
                    var data = JSON.parse(xmlhttp.responseText);
                 catch(err) 
                    console.log(err.message + " in " + xmlhttp.responseText);
                    return;
                
                on_success(data);
            else
                if(xmlhttp.readyState == 4)
                    on_error();
                
            
        ;
        xmlhttp.timeout = timeout;
        xmlhttp.ontimeout = function ()  
            on_timeout();
        
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    
    return that;
)();

示例：

$ajax.send("someUrl.com", 
    onSuccess: function(data)
        console.log("success",data);
    ,
    onError: function()
        console.log("Error");
    ,
    onTimeout: function()
        console.log("Timeout");
    ,
    timeout: 10000
);

【讨论】：

老派（最好使用 fetch()）但为什么不呢

【参考方案4】：

我很欣赏上面 $.getJSON 的 vanilla js 等价物 但我的观点完全相同。我实际上是在尝试摆脱我没有以任何方式掌握的 jquery。 在这两种情况下，我最终苦苦挣扎的是 JSON 请求的异步性质。

我想要实现的是从异步调用中提取一个变量

function shorten(url)

var request = new XMLHttpRequest();
bitly="http://api.bitly.com/v3/shorten?&apiKey=mykey&login=mylogin&longURL=";
request.open('GET', bitly+url, true);

request.onload = function() 
  if (request.status >= 200 && request.status < 400) 
  var data = JSON.parse(request.responseText).data.url;
  alert ("1:"+data); //alerts fine from within 
  // return data is helpless
   
;

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

request.send();

现在函数已经定义并且可以工作了

shorten("anyvalidURL"); // alerts fine from within "1: [bit.ly url]"

但是我如何分配数据值（来自异步调用）以便能够在调用函数后在我的 javascript 中使用它

比如

 document.write("My tiny is : "+data);

【讨论】：

> 但是我如何分配数据值（来自异步调用）-您将必须传递一个回调函数.. 类似function shorten(url, onSuccess) 然后使用结果对象调用 onSuccess .. 即data