JSONP est vraiment une astuce simple pour surmonter XMLHttpRequest même politique de domaine. (Comme vous le savez, on ne peut pas envoyer AJAX (XMLHttpRequest) demande vers un domaine différent).
Ainsi, au lieu d'utiliser XMLHttpRequest nous devons utiliser script Les balises HTMLl, celles que vous utilisez habituellement pour charger des fichiers JS, afin que JS obtienne des données d'un autre domaine. Cela vous paraît bizarre ?
Le fait est que - il s'avère que script peuvent être utilisées de 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 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 script étiquette. Donc JSONP Les créateurs ont décidé que cela fonctionnerait mieux (et c'est le cas) :
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";
Avis mon_callback fonction là-bas ? Alors - quand JSONP Le serveur reçoit votre demande et trouve le paramètre de rappel - au lieu de retourner un simple tableau JS, il retournera ceci :
my_callback({['some string 1', 'some data', 'whatever data']});
Voyez où est le bénéfice : maintenant nous avons un rappel automatique ( mon_callback ) qui sera déclenché dès que nous aurons les données. C'est tout ce qu'il y a à savoir sur JSONP : c'est un callback et des balises script.
NOTE :
Il s'agit d'exemples simples d'utilisation de JSONP, mais pas de scripts prêts pour la production.
Démonstration de 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 basique de jQuery (simple flux Twitter 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 avec padding . (technique très mal nommée car elle n'a vraiment rien à voir avec ce que la plupart des gens considèrent comme du "rembourrage").
0 votes
$.ajax({ url : pm_url, dataType : 'jsonp', jsonpCallback : photos, jsonp : false, }) ; Vous aviez saisi les photos sous forme de chaîne.