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狀態代碼的更多信息或發送自定義的不同請求。