Esempio di base dell'utilizzo di .ajax () con JSONP?

187

Per favore qualcuno potrebbe aiutarmi a capire come iniziare con JSONP?

Codice:

$('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,
    });
});

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

Dovrebbe produrre un avviso, per quanto posso capire dalla documentazione: non lo è (ma non sta producendo alcun errore).

Grazie.

ajax  json  jsonp 
— simon
fonte
$ .ajax ({url: pm_url, dataType: 'jsonp', jsonpCallback: foto, jsonp: false,}); Hai inserito le foto come una stringa.
— MONDO

Risposte:

388

JSONP è davvero un trucco per superare la stessa politica di dominio XMLHttpRequest . (Come sapete, non è possibile inviare una richiesta AJAX (XMLHttpRequest) a un dominio diverso.)

Quindi - invece di utilizzare XMLHttpRequest dobbiamo usare i tag HTMLl dello script , quelli che di solito si usano per caricare i file JS, affinché JS possa ottenere dati da un altro dominio. Suona strano?

Il fatto è che risulta che i tag di script possono essere utilizzati in modo simile a XMLHttpRequest ! Controllalo:

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";

Si finirà con un segmento di script che assomiglia a questo dopo aver caricato i dati:

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

Tuttavia, questo è un po 'scomodo, perché dobbiamo recuperare questo array dal tag script . Quindi i creatori di JSONP hanno deciso che funzionerà meglio (e lo è):

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";

Notate la funzione my_callback laggiù? Quindi - quando il server JSONP riceve la tua richiesta e trova il parametro callback - invece di restituire un semplice array JS restituirà questo:

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

Guarda dove è il profitto: ora otteniamo il callback automatico ( my_callback ) che verrà attivato una volta che avremo i dati. Questo è tutto ciò che c'è da sapere su JSONP : è un callback e tag di script.

NOTA:
questi sono semplici esempi di utilizzo di JSONP, non si tratta di script pronti per la produzione.

Dimostrazione RAW JavaScript (semplice feed Twitter con 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>


Esempio di base di jQuery (semplice feed di Twitter con 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 sta per JSON con imbottitura . (tecnica molto mal denominata in quanto non ha nulla a che fare con ciò che la maggior parte della gente potrebbe pensare come "imbottitura".)

— Quel ragazzo
fonte
3
Questa risposta ora è in qualche modo obsoleta perché i browser ora supportano le Access-Control-Allow-Originintestazioni che consentono di effettuare chiamate Ajax regolari verso alcuni domini di origine incrociata.
— jfriend00
Tieni presente che non puoi creare un modulo POST con JSONP. Maggiori informazioni qui: markhneedham.com/blog/2009/08/27/…
— thdoan
4
Cosa devi considerare se vuoi rendere questi script pronti per la produzione?
— ospite
1
Caspita, è davvero utile! Finalmente riesco a capire cos'è esattamente JSONP e come funziona!
— Jerry Liu,
146

Esiste un modo ancora più semplice per lavorare con JSONP usando jQuery

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

Alla ?fine dell'URL indica a jQuery che si tratta di una richiesta JSONP anziché di JSON. jQuery registra e chiama automaticamente la funzione di richiamata.

Per ulteriori dettagli, consultare la documentazione jQuery.getJSON .

— Petr Peller
fonte
2
@PetrPeller, sembra fantastico ma non mi sembra di farne un prodotto. Riesci a vederlo una volta? JSFiddle Non avvisa nessun dato. Forse mi sono perso qualcosa
— tika, il
@xDNP La risposta JSONP deve essere supportata dal server. Il tuo server non sembra supportarlo perché non riesco a vedere alcun richiamo aggiunto qui: mylivecanvas.com/api/… . Inoltre dovresti usare &callback=?in quanto non è il primo parametro nel tuo caso.
— Petr Peller,
1
@PetrPeller Sono molto interessato alla tua soluzione. Ma questo non funziona con me. Non voglio pubblicare una nuova domanda ma non mi aiuta. Cosa non sembra supportare dal server ? Cosa dovrei fare? E puoi darmi un URL completo che funzioni per il mio server? Ti sarei grato. Ho bisogno di una configurazione del server?
— Tika
3
Cosa significa l'ultima modifica, "Per favore, non usare più jQuery!" significare?
— ParkCheolu,
1
È ora il 2018 e non sono sicuro di cosa dovrebbe essere usato anche nel 2017!
— Vasily Hall,
28

In risposta al PO, ci sono due problemi con il tuo codice: devi impostare jsonp = 'callback', e l'aggiunta di una funzione di callback in una variabile come te non sembra funzionare.

Aggiornamento: quando ho scritto questo l'API di Twitter era appena aperta, ma l'hanno cambiata e ora richiede l'autenticazione. Ho cambiato il secondo esempio in un esempio funzionante (2014Q1), ma ora usando github.

Questo non funziona più - come esercizio, vedi se puoi sostituirlo con 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);
};

sebbene alert () ing un array del genere non funzioni davvero bene ... La scheda "Net" in Firebug mostrerà correttamente JSON. Un altro trucco utile sta facendo

alert(JSON.stringify(data));

Puoi anche usare il metodo jQuery.getJSON . Ecco un esempio html completo che ottiene un elenco di "sintesi" da Github. In questo modo crea una funzione di callback con nome casuale per te, che è l'ultimo "callback =?" nell'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>
— PapaFreud
fonte
2
Hai ragione, non funziona più. Twitter ha cambiato la sua API.
— PapaFreud,
3 
<!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>

Il codice sopra riportato aiuta a ottenere immagini dall'API Flicker. Questo utilizza il metodo GET per ottenere immagini usando JSONP. Può essere trovato in dettaglio qui

— Ganesh Babu
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.