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

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/

Dovrei produrre un avviso, per quanto posso ricavare dalla documentazione: non lo è (ma non produce neanche errori).

Grazie.

JSONP è davvero un trucco semplice per superare lo stesso criterio di dominio XMLHttpRequest . (Come sai, non è ansible inviare una richiesta AJAX (XMLHttpRequest) a un dominio diverso).

Quindi, invece di usare XMLHttpRequest, dobbiamo usare tag HTMLl di script , quelli che di solito usi per caricare file JS, in modo che JS possa ottenere dati da un altro dominio. Suona strano?

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

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

Ti ritroverai con un segmento di script che assomiglia a questo dopo aver caricato i dati:

  

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

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

Si noti 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']}); 

Scopri dove si trova il profitto: ora riceviamo il callback automatico ( my_callback ) che verrà triggersto una volta ottenuti i dati. Questo è tutto quello che c’è da sapere su JSONP : è un callback e tag di script.


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

Dimostrazione JavaScript RAW (semplice feed Twitter con JSONP):

     

Esempio di base di jQuery (semplice feed Twitter con JSONP):

       

JSONP sta per JSON con Padding . (tecnica molto poco conosciuta in quanto non ha nulla a che fare con ciò che la maggior parte delle persone potrebbe pensare come “imbottitura”.)

C’è ancora più semplice modo di lavorare con JSONP usando jQuery

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

Il ? alla fine dell’URL dice a jQuery che si tratta di una richiesta JSONP invece di JSON. jQuery registra e chiama automaticamente la funzione di callback.

Per ulteriori dettagli, fare riferimento alla documentazione di jQuery.getJSON .

In risposta all’OP, ci sono due problemi con il tuo codice: devi impostare jsonp = ‘callback’, e aggiungere una funzione di callback in una variabile come quella che hai fatto non sembra funzionare.

Aggiornamento: quando ho scritto questo l’API di Twitter era solo aperta, ma è stata modificata e ora richiede l’autenticazione. Ho modificato il secondo esempio in un esempio funzionante (2014Q1), ma ora utilizzo github.

Questo non funziona più – come esercizio, vedi se riesci a 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); }; 

anche se alert () in un array come quello non funziona davvero bene … La scheda “Net” in Firebug mostrerà correttamente il JSON. Un altro trucco pratico sta facendo

 alert(JSON.stringify(data)); 

Puoi anche utilizzare il metodo jQuery.getJSON . Ecco un esempio html completo che ottiene un elenco di “gist” da github. In questo modo crea per te una funzione di callback chiamata in modo casuale, che è l’ultimo “callback =?” nell’URL.

    JQuery (cross-domain) JSONP Twitter example     
          An JSONP example     

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