web-dev-qa-db-fra.com

Exemple de base d'utilisation de .ajax () avec JSONP?

S'il vous plaît, quelqu'un pourrait-il m'aider à comprendre comment utiliser JSONP?

Code:

$('document').ready(function() {
    var pm_url = 'http://Twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    var photos = function (data) {
     alert(data);
    };
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: false,
    });
});

Violon: http://jsfiddle.net/R7EPt/6/

Doit produire une alerte, dans la mesure où je peux me débrouiller avec la documentation: non (mais ne produit aucune erreur non plus).

merci.

ajaxjsonjsonp
181
simon

JSONP est vraiment un truc simple à surmonter XMLHttpRequest même politique de domaine. (Comme vous le savez, on ne peut pas envoyer AJAX (XMLHttpRequest) demande à un autre domaine.)

Donc, au lieu d'utiliser XMLHttpRequest, nous devons utiliser les balises script HTMLl, celles que vous utilisez habituellement pour charger des fichiers JS, afin que JS puisse obtenir des données d'un autre domaine. Cela semble bizarre?

La chose est - se trouve script les balises peuvent être utilisées de la même manière que 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 script qui ressemble à ceci après le chargement des données:

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

Cependant, c'est un peu gênant, car nous devons aller chercher ce tableau depuis la balise script. 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 my_callback fonctionne 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 simple, il renvoie:

my_callback({['some string 1', 'some data', 'whatever data']});

Voyez où se trouve le profit: nous obtenons maintenant 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 à la production.

démonstration JavaScript RAW (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 de base 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 penseraient de "rembourrage".)

380
ThatGuy

Il existe un moyen encore plus simple de travailler avec JSONP avec jQuery

$.getJSON("http://example.com/something.json?callback=?", function(result){
   //response data are now in the result variable
   alert(result);
});

Le ? à la fin de l'URL indique à jQuery qu'il s'agit d'une requête JSONP au lieu de JSON. jQuery enregistre et appelle la fonction de rappel automatiquement.

Pour plus de détails, reportez-vous à la documentation jQuery.getJSON .

144
Petr Peller

En réponse à l'OP, votre code pose deux problèmes: vous devez définir jsonp = 'callback' et ajouter une fonction de rappel dans une variable telle que vous ne semble pas fonctionner.

Mise à jour: lorsque j'ai écrit ceci, l'API Twitter était simplement ouverte, mais ils l'ont modifiée et cela nécessite maintenant une authentification. J'ai changé le deuxième exemple pour un exemple de travail (2014Q1), mais en utilisant maintenant github.

Cela ne fonctionne plus - à titre d'exercice, voyez si vous pouvez le remplacer par l'API Github:

$('document').ready(function() {
    var pm_url = 'http://Twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: 'callback',
    });
});
function photos (data) {
    alert(data);
    console.log(data);
};

bien que alert (), un tableau comme ça ne fonctionne pas vraiment ... L'onglet "Net" de Firebug vous montrera le JSON correctement. Une autre astuce pratique est en train de faire

alert(JSON.stringify(data));

Vous pouvez également utiliser la méthode jQuery.getJSON. Voici un exemple complet en HTML qui obtient une liste de "gists" de github. De cette façon, il crée pour vous une fonction de rappel nommée de manière aléatoire, ce sera le dernier "callback =?" dans l'URL.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JQuery (cross-domain) JSONP Twitter example</title>
        <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.getJSON('https://api.github.com/gists?callback=?', function(response){
                    $.each(response.data, function(i, Gist){
                        $('#gists').append('<li>' + Gist.user.login + " (<a href='" + Gist.html_url + "'>" + 
                            (Gist.description == "" ? "undescribed" : Gist.description) + '</a>)</li>');
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul id="gists"></ul>
    </body>
</html>
27
PapaFreud
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>An JSONP example </title>
</head>
<body>
<!-- DIV FOR SHOWING IMAGES -->
<div id="images">
</div>
<!-- SCRIPT FOR GETTING IMAGES FROM FLICKER.COM USING JSONP -->
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
  format: "json"
},
//RETURNED RESPONSE DATA IS LOOPED AND ONLY IMAGE IS APPENDED TO IMAGE DIV
function(data) {
  $.each(data.items, function(i,item){
  $("<img/>").attr("src", item.media.m).appendTo("#images");

 });
});</script>
</body>
</html>

Le code ci-dessus aide à obtenir des images à partir de l'API Flicker. Ceci utilise la méthode GET pour obtenir des images à l'aide de JSONP. On peut le trouver en détail dans ici

3
Ganesh Babu