我需要构建一个项目来进入我申请的JS训练营。他们告诉我,我可能只使用vanilla JS,特别是不允许使用框架和Jquery。到目前为止,当我想从api中检索JSON文件时,我会说
$.getJSON(url, functionToPassJsonFileTo)
用于JSON调用和
$.getJSON(url + "&callback?", functionToPassJsonPFileTo)
用于JSONP调用。我刚刚开始编程这个月,所以请记住,我不知道JSON或JSONP之间的区别,或者它们与这个名为ajax的东西有什么关系。请解释我如何在Vanilla Javascript中获得上述2行的内容。谢谢。
所以要澄清,
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的等价物吗?
答案 0 :(得分:24)
以下是$.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请求。
答案 1 :(得分:5)
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
});
答案 2 :(得分:1)
这是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
});
答案 3 :(得分:0)
我很欣赏以上$ .getJSON的vanilla js 但我完全相同。我实际上是试图摆脱jquery,我没有以任何方式掌握。 我在BOTH案例中最终遇到的是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();
}
现在该功能已定义&amp;是一种享受
shorten("anyvalidURL"); // alerts fine from within "1: [bit.ly url]"
但是如何在调用函数后分配数据值(来自异步调用)以便能够在我的javascript中使用它
例如
document.write("My tiny is : "+data);