JSONP callback не работает

Question

Я написал конструктор Foo, который имеет функцию load для загрузки JSONP. 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 параметрическое должен быть установлен в 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 - это всего лишь обычная загрузка скрипта на вашей странице, он имеет такие же правила доступности, как и любой другой .js-файл, который вы загружаете в разделе head вашего html, и, очевидно, вы не можете получить доступ к «частная функция» из другого .js-файла.

But what about "saving bar function reference for later use" feature (closure)?

• вы можете спросить

Он не применяется здесь, потому что сфера вызова функции бара создаются вне из конструктора Foo - функция бара вызывается из «других файл ", поэтому здесь нет закрытия.

Лучшее решение:

Предполагая, что вам нужно сделать Cross Origin запросы (CORS), и вы можете внести изменения на сервере стороне приложения, то лучше установить Access-Control-Allow-Origin правила на сервере вы пытаетесь достичь от имени домена. Это позволит вам использовать обычные запросы XHR и иметь гораздо больше информации о кодах статуса http или отправлять пользовательские разные запросы.