JSONP est vraiment une astuce simple pour surmonter la même politique de domaine XMLHttpRequest . (Comme vous le savez, on ne peut pas envoyer de requête AJAX (XMLHttpRequest) à un domaine différent.)
Donc, au lieu d'utiliser XMLHttpRequest, nous devons utiliser des balises HTMLl de script , celles que vous utilisez habituellement pour charger des fichiers JS, afin que JS obtienne des données d'un autre domaine. Cela semble bizarre?
La chose est - il s'avère que les balises de script peuvent être utilisées d'une manière similaire à XMLHttpRequest ! Regarde ça:
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";
Vous vous retrouverez avec un segment de script qui ressemble à ceci après avoir chargé les données:
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
Cependant, c'est un peu gênant, car nous devons récupérer ce tableau à partir de la balise de script . Alors JSONP créateurs ont décidé que cela fonctionnera mieux (et il est):
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";
Remarquez la fonction my_callback là-bas? Ainsi, lorsque le serveur JSONP reçoit votre demande et trouve le paramètre de rappel - au lieu de renvoyer un tableau JS brut, il renvoie ceci:
my_callback({['some string 1', 'some data', 'whatever data']});
Voyez où est le profit: maintenant nous obtenons un rappel automatique ( my_callback ) qui sera déclenché une fois que nous aurons obtenu les données. C'est tout ce qu'il y a à savoir sur JSONP : c'est un rappel et des balises de script.
REMARQUE:
ce sont des exemples simples d'utilisation de JSONP, ce ne sont pas des scripts prêts pour la production.
Démonstration RAW JavaScript (simple flux Twitter utilisant 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>
Exemple jQuery de base (flux Twitter simple utilisant 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 signifie JSON with Padding . (technique très mal nommée car elle n'a vraiment rien à voir avec ce que la plupart des gens pourraient considérer comme un «rembourrage».)