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>
Однак це трохи незручно, оскільки нам потрібно отримати цей масив із тегу скрипту . Тож творці 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 з Padding . (дуже погано названа техніка, оскільки вона насправді не має нічого спільного з тим, що більшість людей вважають «прокладкою»).