JSONP回调无效

Question

我写了一个Foo构造函数，它具有用于上载JSONP的load功能。 script.src有一个回调，但是我遇到了一个错误： Uncaught ReferenceError: bar is not defined 。 我该如何解决？

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);
}

用法：

var foo = new Foo(params);

在页面中可以很多。

Answer 1

假设您的JSONP响应正确无误，如下所示：

bar(/*some argument*/);

问题： bar必须是全局可访问的，但目前不是（仅在Foo内部可见）

可能的解决方法：

将bar定义为Foo的方法，则可以执行它（只要实例foo可以全局访问）。 在这种情况下，必须将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);

Answer 2

简短答案：

您应该使bar函数在全局范围内可用，或者使其成为Foo实例的公共方法，而该实例应该在全局范围内可用。

由于存在该错误，因此您知道需要一台返回有效javascript代码字符串的服务器，例如：

alert('JSONP in action'); bar('result');

在您的/?callback=bar请求中。

因此，由于JSONP只是页面上的普通脚本加载，因此它具有与您在html头部加载的任何其他.js文件相同的变量可访问性规则，并且显然，您无法访问“私有函数”来自其他.js文件。

但是“保存栏功能参考以供以后使用”功能（关闭）又如何呢？

• 你可能会问

它在这里不适用，因为bar函数调用的范围是在Foo构造函数之外创建的-bar函数是从“不同文件”调用的，因此这里没有闭包。

更好的解决方案：

假设您需要发出跨源请求（ CORS ），并且可以在服务器端应用程序中进行更改，最好在要从其他域名应用程序访问的服务器上设置Access-Control-Allow-Origin规则。 这将使您能够使用常规的XHR请求，并获得有关http状态代码的更多信息或发送自定义的不同请求。