JSONP to naprawdę prosta sztuczka, aby pokonać XMLHttpRequest w tej samej polityce domenowej. (Jak wiadomo, nie można wysłać żądania AJAX (XMLHttpRequest) do innej domeny).
Tak więc - zamiast używać XMLHttpRequest, musimy użyć skryptowych znaczników HTMLl, tych, których zwykle używasz do ładowania plików JS, aby JS mógł uzyskać dane z innej domeny. Brzmi dziwnie?
Chodzi o to - okazuje się, że tagi skryptu mogą być używane w sposób podobny do XMLHttpRequest ! Sprawdź to:
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";
Otrzymasz segment skryptu, który wygląda tak po załadowaniu danych:
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
Jest to jednak nieco niewygodne, ponieważ musimy pobrać tę tablicę ze znacznika script . Dlatego twórcy JSONP zdecydowali, że będzie to działać lepiej (i tak jest):
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";
Czy zauważyłeś tam funkcję my_callback ? Tak więc - gdy serwer JSONP otrzyma twoje żądanie i znajdzie parametr wywołania zwrotnego - zamiast zwracać zwykłą tablicę JS zwróci to:
my_callback({['some string 1', 'some data', 'whatever data']});
Zobacz, gdzie jest zysk: teraz otrzymujemy automatyczne oddzwanianie ( my_callback ), które zostanie uruchomione, gdy otrzymamy dane. To wszystko, co należy wiedzieć o JSONP : jest to callback i tagi skryptowe.
UWAGA:
Są to proste przykłady użycia JSONP, nie są to skrypty gotowe do produkcji.
Demonstracja RAW JavaScript (prosty kanał Twittera przy użyciu 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>
Podstawowy przykład jQuery (prosty kanał Twittera przy użyciu 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 oznacza JSON z Padding . (bardzo źle nazwana technika, ponieważ tak naprawdę nie ma nic wspólnego z tym, co większość ludzi uważałaby za „padding”).