[英]JSONP callback doesn't work
I wrote a Foo
constructor, that have a load
function for upload JSONP. 我写了一个
Foo
构造函数,它具有用于上载JSONP的load
功能。 script.src
has a callback, but I've got an error: Uncaught ReferenceError: bar is not defined
. script.src
有一个回调,但是我遇到了一个错误: Uncaught ReferenceError: bar is not defined
。 How I can fix it? 我该如何解决?
function Foo(params) {
function bar(response) {
console.log(response);
}
function load() {
var script = document.createElement('script');
script.src = Config.apiUrl + '&callback=bar';
document.getElementsByTagName('head')[0].appendChild(script);
}
document.getElementById('button').addEventListener('click', load, false);
}
Usage: 用法:
var foo = new Foo(params);
Can be a lot of in the page. 在页面中可以很多。
assuming your JSONP-response is correct and looks like this: 假设您的JSONP响应正确无误,如下所示:
bar(/*some argument*/);
the issue: bar
must be global accessible, but currently it isn't(it's only visible inside Foo
) 问题:
bar
必须是全局可访问的,但目前不是(仅在Foo
内部可见)
Possible workaround: 可能的解决方法:
define bar
as a method of Foo
, then you be able to execute it(as long as the instance foo
is global accessible). 将
bar
定义为Foo
的方法,则可以执行它(只要实例foo
可以全局访问)。 The callback
-parameter must be set to foo.bar
in this case: 在这种情况下,必须将
callback
-parameter设置为foo.bar
:
function Foo(params) { this.bar=function(response) { console.log(response); } this.load=function(){ var script = document.createElement('script'); script.src = Config.apiUrl + '&callback=foo.bar'; document.getElementsByTagName('head')[0].appendChild(script); } document.getElementById('button').addEventListener('click', this.load, false); } //assuming you create the instance in global scope var foo = new Foo(params);
Short answer: 简短答案:
You should make bar
function available globally or make it a public method of a Foo
instance which should be available globally. 您应该使
bar
函数在全局范围内可用,或者使其成为Foo
实例的公共方法,而该实例应该在全局范围内可用。
Since you have that error, you know that you need a server which returns a valid javascript code string like: 由于存在该错误,因此您知道需要一台返回有效javascript代码字符串的服务器,例如:
alert('JSONP in action'); bar('result');
on your /?callback=bar
request. 在您的
/?callback=bar
请求中。
So, as JSONP
is just an odinary script load on your page, it has the same variable accessibility rules as any other .js file you load in the head section of your html and, obviously, you can't access a "private function" from a different .js file. 因此,由于
JSONP
只是页面上的普通脚本加载,因此它具有与您在html头部加载的任何其他.js文件相同的变量可访问性规则,并且显然,您无法访问“私有函数”来自其他.js文件。
But what about "saving bar function reference for later use" feature (closure)?
但是“保存栏功能参考以供以后使用”功能(关闭)又如何呢?
It doesn't apply here, because the scope of the bar function call is created outside from the Foo constructor - the bar function is called from a "different file", so no closure here. 它在这里不适用,因为bar函数调用的范围是在Foo构造函数之外创建的-bar函数是从“不同文件”调用的,因此这里没有闭包。
Better solution: 更好的解决方案:
Assuming you need to make Cross Origin requests ( CORS
) and you can make changes in your server side apps, it's better to set Access-Control-Allow-Origin
rules on the server you're trying to reach from different domain name app. 假设您需要发出跨源请求(
CORS
),并且可以在服务器端应用程序中进行更改,最好在要从其他域名应用程序访问的服务器上设置Access-Control-Allow-Origin
规则。 This will allow you to use usual XHR
requests and have much more information about http status codes or send custom different requests. 这将使您能够使用常规的
XHR
请求,并获得有关http状态代码的更多信息或发送自定义的不同请求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.