如何解决如何在没有JQuery的情况下从Javascript发出JSONP请求?
| 是否可以在不使用jQuery或其他外部库的情况下用JavaScript发出跨域JSONP请求?我想使用JavaScript本身,然后解析数据并使其成为对象,以便可以使用它。我必须使用外部库吗?如果没有,我该怎么办?解决方法
function foo(data)
{
// do stuff with JSON
}
var script = document.createElement(\'script\');
script.src = \'//example.com/path/to/jsonp?callback=foo\'
document.getElementsByTagName(\'head\')[0].appendChild(script);
// or document.head.appendChild(script) in modern browsers
,轻量级示例(支持onSuccess和onTimeout)。如果需要,您需要在URL中传递回调名称。
var $jsonp = (function(){
var that = {};
that.send = function(src,options) {
var callback_name = options.callbackName || \'callback\',on_success = options.onSuccess || function(){},on_timeout = options.onTimeout || function(){},timeout = options.timeout || 10; // sec
var timeout_trigger = window.setTimeout(function(){
window[callback_name] = function(){};
on_timeout();
},timeout * 1000);
window[callback_name] = function(data){
window.clearTimeout(timeout_trigger);
on_success(data);
}
var script = document.createElement(\'script\');
script.type = \'text/javascript\';
script.async = true;
script.src = src;
document.getElementsByTagName(\'head\')[0].appendChild(script);
}
return that;
})();
用法示例:
$jsonp.send(\'some_url?callback=handleStuff\',{
callbackName: \'handleStuff\',onSuccess: function(json){
console.log(\'success!\',json);
},onTimeout: function(){
console.log(\'timeout!\');
},timeout: 5
});
在GitHub上:https://github.com/sobstel/jsonp.js/blob/master/jsonp.js
,什么是JSONP?
使用jsonp时要记住的重要一点是,它实际上不是协议或数据类型。它只是一种动态加载脚本并处理引入页面的脚本的方法。本着JSONP的精神,这意味着将新的javascript对象从服务器引入到客户端应用程序/脚本中。
何时需要JSONP?
这是一种允许一个域异步访问/处理同一页面中另一个域的数据的一种方法。首先,它用于覆盖XHR(ajax)请求可能发生的CORS(跨源资源共享)限制。脚本加载不受CORS限制。
怎么做
从服务器引入新的javascript对象可以通过多种方式来实现,但是最常见的做法是让服务器通过向其传递所需的对象来实现\ callback函数的执行。回调函数只是您已经在客户端上设置的函数,加载的脚本会在脚本加载时调用该函数以处理传递给它的数据。
例:
我有一个将所有物品记录在某人家中的应用程序。我的应用程序已设置好,现在我要检索主卧室中的所有物品。
我的申请是在app.home.com
上。我需要从中加载数据的api是api.home.com
。
除非服务器被明确设置为允许它,否则我无法使用Ajax加载此数据,因为即使单独子域上的页面也受XHR CORS限制。
理想情况下,将其设置为允许x域XHR
理想情况下,由于api和应用程序位于同一个域中,因此我可能有权在api.home.com
上设置标头。如果可以,我可以添加一个Access-Control-Allow-Origin:
标头项目,以授予对app.home.com
的访问权限。假设标头设置如下:“ 8”,这比设置JSONP安全得多。这是因为app.home.com
可以从api.home.com
获得所需的一切,而无需api.home.com
就可以使CORS访问整个互联网。
上面的XHR解决方案是不可能的。设置JSONP在我的客户端脚本上:我设置了一个函数,以在进行JSONP调用时处理来自服务器的响应:
function processJSONPResponse(data) {
var dataFromServer = data;
}
服务器将需要设置为返回一个类似于\"processJSONPResponse({\"room\":\"main bedroom\",\"items\":[\"bed\",\"chest of drawers\"]});\"
的迷你脚本。如果调用了诸如//api.home.com?getdata=room&room=main_bedroom
之类的东西,它可能被设计为返回这样的字符串。
然后,客户端按如下方式设置脚本标签:
var script = document.createElement(\'script\');
script.src = \'//api.home.com?getdata=room&room=main_bedroom\';
document.querySelector(\'head\').appendChild(script);
这将加载脚本并立即以服务器写入/回显/打印的形式调用“ 16”。作为参数传递给函数的数据现在存储在dataFromServer
局部变量中,您可以根据需要进行处理。
清理
一旦客户有了数据,即。在将脚本添加到DOM之后,可以立即从DOM中删除script元素:
script.parentNode.removeChild(script);
,我的理解是您实际上将脚本标签与JSONP结合使用,所以...
第一步是创建将处理JSON的函数:
function hooray(json) {
// dealin wit teh jsonz
}
确保可以在全局级别访问此功能。
接下来,将脚本元素添加到DOM:
var script = document.createElement(\'script\');
script.src = \'http://domain.com/?function=hooray\';
document.body.appendChild(script);
该脚本将加载API提供程序生成的JavaScript并执行它。
,我使用jsonp的方式如下:
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 \'方法,如下所示:
jsonp(\'http://xxx/cors\').then(function(data){
console.log(data);
});
参考:
使用JsonP的JavaScript XMLHttpRequest
http://www.w3ctech.com/topic/721(谈论Promise的使用方式)
,我有一个纯JavaScript库可以做到这一点https://github.com/robertodecurnex/J50Npi/blob/master/J50Npi.js
查看一下,如果您在使用或理解代码方面需要任何帮助,请告诉我。
顺便说一句,您在这里有一个简单的用法示例:http://robertodecurnex.github.com/J50Npi/
,/**
* Loads data asynchronously via JSONP.
*/
const load = (() => {
let index = 0;
const timeout = 5000;
return url => new Promise((resolve,reject) => {
const callback = \'__callback\' + index++;
const timeoutID = window.setTimeout(() => {
reject(new Error(\'Request timeout.\'));
},timeout);
window[callback] = response => {
window.clearTimeout(timeoutID);
resolve(response.data);
};
const script = document.createElement(\'script\');
script.type = \'text/javascript\';
script.async = true;
script.src = url + (url.indexOf(\'?\') === -1 ? \'?\' : \'&\') + \'callback=\' + callback;
document.getElementsByTagName(\'head\')[0].appendChild(script);
});
})();
用法样本:
const data = await load(\'http://api.github.com/orgs/kriasoft\');
,我写了一个库来尽可能地处理这个问题。无需将其外部化,它只是一项功能。与某些其他选项不同,此脚本会自行清除,并且被通用化以在运行时发出进一步的请求。
https://github.com/Fresheyeball/micro-jsonp
function jsonp(url,key,callback) {
var appendParam = function(url,param){
return url
+ (url.indexOf(\"?\") > 0 ? \"&\" : \"?\")
+ key + \"=\" + param;
},createScript = function(url,callback){
var doc = document,head = doc.head,script = doc.createElement(\"script\");
script
.setAttribute(\"src\",url);
head
.appendChild(script);
callback(function(){
setTimeout(function(){
head
.removeChild(script);
},0);
});
},q =
\"q\" + Math.round(Math.random() * Date.now());
createScript(
appendParam(url,q),function(remove){
window[q] =
function(json){
window[q] = undefined;
remove();
callback(json);
};
});
}
,请在下面的JavaScript
示例中查找,以在没有JQuery的情况下进行JSONP
调用:
另外,您可以参考我的“ 28”存储库以供参考。
https://github.com/shedagemayur/JavaScriptCode/tree/master/jsonp
window.onload = function(){
var callbackMethod = \'callback_\' + new Date().getTime();
var script = document.createElement(\'script\');
script.src = \'https://jsonplaceholder.typicode.com/users/1?callback=\'+callbackMethod;
document.body.appendChild(script);
window[callbackMethod] = function(data){
delete window[callbackMethod];
document.body.removeChild(script);
console.log(data);
}
}
,/**
* Get JSONP data for cross-domain AJAX requests
* @private
* @link http://cameronspear.com/blog/exactly-what-is-jsonp/
* @param {String} url The URL of the JSON request
* @param {String} callback The name of the callback to run on load
*/
var loadJSONP = function ( url,callback ) {
// Create script with url and callback (if specified)
var ref = window.document.getElementsByTagName( \'script\' )[ 0 ];
var script = window.document.createElement( \'script\' );
script.src = url + (url.indexOf( \'?\' ) + 1 ? \'&\' : \'?\') + \'callback=\' + callback;
// Insert script tag into the DOM (append to <head>)
ref.parentNode.insertBefore( script,ref );
// After the script is loaded (and executed),remove it
script.onload = function () {
this.remove();
};
};
/**
* Example
*/
// Function to run on success
var logAPI = function ( data ) {
console.log( data );
}
// Run request
loadJSONP( \'http://api.petfinder.com/shelter.getPets?format=json&key=12345&shelter=AA11\',\'logAPI\' );
,如果您将ES6与NPM一起使用,则可以尝试节点模块\“ fetch-jsonp \”。
Fetch API提供对将JsonP调用作为常规XHR调用的支持。
先决条件:
您应该在堆栈中使用isomorphic-fetch
节点模块。
,只需粘贴ES6版本的sobstel \很好的答案:
send(someUrl + \'error?d=\' + encodeURI(JSON.stringify(json)) + \'&callback=c\',\'c\',5)
.then((json) => console.log(json))
.catch((err) => console.log(err))
function send(url,callback,timeout) {
return new Promise((resolve,reject) => {
let script = document.createElement(\'script\')
let timeout_trigger = window.setTimeout(() => {
window[callback] = () => {}
script.parentNode.removeChild(script)
reject(\'No response\')
},timeout * 1000)
window[callback] = (data) => {
window.clearTimeout(timeout_trigger)
script.parentNode.removeChild(script)
resolve(data)
}
script.type = \'text/javascript\'
script.async = true
script.src = url
document.getElementsByTagName(\'head\')[0].appendChild(script)
})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。