JSONP é realmente um truque simples para superar a mesma política de domínio XMLHttpRequest . (Como você sabe, não é possível enviar uma solicitação AJAX (XMLHttpRequest) para um domínio diferente.)
Portanto, em vez de usar XMLHttpRequest , precisamos usar tags HTMLl de script , aquelas que você costuma usar para carregar arquivos JS, para que JS obtenha dados de outro domínio. Soa estranho?
A coisa é - as tags de script podem ser usadas de maneira semelhante ao XMLHttpRequest ! Veja isso:
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";
Você terminará com um segmento de script que se parece com este após carregar os dados:
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
No entanto, isso é um pouco inconveniente, porque precisamos buscar esse array na tag de script . Então, os criadores do JSONP decidiram que isso funcionaria melhor (e é):
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";
Aviso my_callback função ali? Então - quando o servidor JSONP recebe sua solicitação e encontra o parâmetro de retorno de chamada - em vez de retornar uma matriz JS simples, ele retornará isso:
my_callback({['some string 1', 'some data', 'whatever data']});
Veja onde está o lucro: agora temos o retorno de chamada automático ( my_callback ) que será acionado assim que recebermos os dados. É tudo o que há para saber sobre JSONP : são tags de retorno de chamada e script.
NOTA:
Estes são exemplos simples de uso de JSONP, não são scripts prontos para produção.
Demonstração de RAW JavaScript (feed simples do Twitter usando 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>
Exemplo básico de jQuery (feed simples do Twitter usando 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 significa JSON com preenchimento . (técnica muito mal nomeada, pois realmente não tem nada a ver com o que a maioria das pessoas pensaria como "preenchimento".)