Как настроить JSONP? - PullRequest
Новая
       8

Как настроить JSONP?

12 голосов
/ 01 марта 2012

Что мне нужно на стороне сервера, чтобы позволить кому-то получать данные с этого сервера, используя JSONP.И что мне нужно делать на стороне пользователя?Я хочу использовать JSONP в качестве альтернативы XMLHttpRequest.

Это не сработает из моего расширения Firefox из-за политики того же происхождения.Итак, люди рекомендовали JSON, но я довольно растерялся после поиска учебников и руководств в Интернете.

Спасибо за помощь!

Ответы [ 3 ]

12 голосов
/ 01 марта 2012

Предполагая, что на вашем сервере запущен PHP, вам просто нужно добавить GET-запрос 'callback'. 

<?php header('content-type: application/json; charset=utf-8');
$data = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); 
echo $_GET['callback'] . '('.json_encode($data).')';

И на стороне клиента (используя jQuery): 

$.ajax({url: 'http://site.com/data.php', dataType:'jsonp'});

PHPприведенный выше код только для демонстрации, не забудьте sanitize $ _GET ['callback']

Тем не менее, если ваша проблема - та же политика происхождения, вам, вероятно, просто понадобится разрешить перекрестное происхождение со стороны сервера, и все должно работать.

7 голосов
/ 01 марта 2012

На стороне сервера все, что вам нужно настроить, - это веб-ресурс (например, страница), который принимает запрос GET и возвращает данные, используя соглашение JSON-P, а именно: 

callback({"data": "here"});

... где имя функции (в этом примере «обратный вызов») обычно берется из одного из параметров строки запроса (условно, параметр «обратный вызов»), а данные JSON текст (хотя технически это может быть все, что допустимо в объекте JavaScript в буквальном смысле слова, соглашение с JSON-P заключается в том, чтобы ограничивать себя тем, что действительно в JSON).Например, предположим, что запрос выглядел следующим образом: 

http://example.com/foo.php?callback=bar

, который вызывает страницу foo.php (не обязательно должен быть PHP, может быть любой динамический сервер-сторона системы), сообщая, что функция, которую мы хотим вызвать, называется «bar».Наш ответ будет следующим: 

bar({"data": "here"});

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

Вот полный пример в качестве ответа на другой вопрос здесь о переполнении стека.Возможно, вам придется немного адаптировать его для использования в дополнении Firefox, но концепции те же.

1 голос
/ 01 марта 2012

jsonp - это json с оболочкой, так что вы можете подделывать запросы ajax на другой сервер, динамически вставляя новые теги <script> с указанием src на другой сервер. Обертка по существу делает возвращаемое содержимое jsonp допустимым вызовом функции javascript, который может быть выполнен для извлечения стандартных данных json.

Как правило, в небезопасной «просто для демо» версии у вас будет что-то вроде этого: 

function unwrap_jsonp(data) {
    eval(data);
}

Удаленный сервер вернет следующий текст: 

unwrap_json("{'this':'is','sparta':'!'}");

Обратите внимание, что это буквальный код открытого текста Javascript, который выполняется и «разворачивает» встроенную строку JSON обратно в собственную структуру данных javascript.

Большинство служб JSONP позволяют указывать дополнительный параметр через строку запроса для именования функции-обработчика, в которую вы хотите обернуть ответ, например, 

http://example.com/getjsonp.php?callback=unwrap_json
...