JSONP - это действительно простая уловка для преодоления XMLHttpRequest той же политики домена. (Как вы знаете, нельзя отправить запрос AJAX (XMLHttpRequest) в другой домен.)
Итак, вместо использования XMLHttpRequest мы должны использовать теги HTMLl скрипта , которые вы обычно используете для загрузки файлов JS, чтобы JS мог получать данные из другого домена. Звучит странно?
Дело в том, что теги сценариев можно использовать аналогично XMLHttpRequest ! Проверь это:
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";
В результате вы получите сегмент сценария, который выглядит следующим образом после загрузки данных:
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
Однако это немного неудобно, потому что мы должны извлечь этот массив из тега script . Поэтому создатели JSONP решили, что это будет работать лучше (и это так):
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";
Заметьте функцию my_callback там? Итак, когда JSONP- сервер получит ваш запрос и найдет параметр обратного вызова - вместо возврата обычного массива JS он вернет следующее:
my_callback({['some string 1', 'some data', 'whatever data']});
Посмотрите, где прибыль: теперь мы получаем автоматический обратный вызов ( my_callback ), который будет запущен, как только мы получим данные. Это все, что нужно знать о JSONP : это обратный вызов и теги сценария.
ПРИМЕЧАНИЕ.
Это простые примеры использования JSONP, это не готовые производственные сценарии.
Демонстрация RAW JavaScript (простой канал Twitter с использованием JSONP):
<html>
<head>
</head>
<body>
<div id = 'twitterFeed'></div>
<script>
function myCallback(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
}
document.getElementById('twitterFeed').innerHTML = text;
}
</script>
<script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
</body>
</html>
Базовый пример jQuery (простой канал Twitter с использованием JSONP):
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
}
$('#twitterFeed').html(text);
}
});
})
</script>
</head>
<body>
<div id = 'twitterFeed'></div>
</body>
</html>
JSONP означает JSON с отступом . (очень плохо названная техника, поскольку она на самом деле не имеет ничего общего с тем, что большинство людей считает «заполнением».)