Confuso su come funziona una richiesta JSONP

Question

Non riesco a capire i dettagli di come funziona una richiesta jsonp. Ho letto diverse fonti tra cui il wiki su jsonp e sono ancora molto confuso su come il callback ottiene effettivamente una sospensione della funzione restituita dal server quando viene effettuata una chiamata jsonp. Per esempio, nel wiki, l'origine della richiesta è impostata come:

src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse" 

Che cosa fa esattamente jsonp = parseResponse effettivamente fare/dire ?? Quindi proseguono dicendo che il payload è:

parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7}); 

Come funziona? Sono confuso sull'intera funzionalità di callback. Il nome della funzione parseResponse viene passato al server e in qualche modo i dati restituiti diventano parametri per questa funzione? Qualcuno può spiegare chiaramente esattamente come vengono recuperati/utilizzati i dati da una richiesta jsonp?

Answer 1

Il callback è una funzione YOU 'VE definito nel tuo codice. Il server jsonp tratterà la sua risposta con una chiamata di funzione identica alla funzione di callback specificata.

Cosa succede in questo:

1) Il suo codice crea la richiesta JSONP, che si traduce in una nuova <script> blocco che assomiglia a questo:

<script src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"></script> 

2) Questo nuovo tag script viene eseguito da il tuo browser, risultante in una richiesta al server JSONP.Si risponde con

parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7}); 

3) Dal momento che la richiesta proveniva da un tag script, è più o meno esattamente lo stesso come se si sarebbe letteralmente posizionato

<script> 
    parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7}); 
</script> 

nella tua pagina.

4) Ora che questo nuovo script è stato caricato dal server remoto, verrà ora eseguito e l'unica cosa che farà è una chiamata di funzione, parseResponse(), che passa nei dati JSON come parametro della chiamata di funzione unica .

Così da qualche altra parte nel codice, dovreste:

function parseResponse(data) { 
    alert(data.Name); // outputs 'Foo' 
} 

In sostanza, JSONP è un modo per aggirare la politica di sicurezza sceneggiatura stessa origine del browser, avendo un server di terze parti iniettare una chiamata di funzione direttamente nella tua pagina. Si noti che questo è di design altamente insicuro. Dipende dal fatto che il servizio remoto è onorevole e non ha intenzioni malevole. Nulla impedisce un cattivo servizio restituendo un codice JS che ruba le tue credenziali bancarie/facebook/qualunque. ad esempio, la risposta JSONP potrebbe essere stata

internalUseOnlyFunction('deleteHarddrive'); 

anziché parseReponse (...). Se il sito remoto conosce la struttura del tuo codice, può eseguire operazioni arbitrarie con quel codice, perché hai aperto la porta principale per consentire a quel sito di fare tutto ciò che vuole.

Answer 2

Modifica: Come ha detto Jon, c'è una spiegazione migliore per questo here.

JSONP utilizza tag di script per effettuare richieste di origine incrociata. Poiché un tag script è utilizzato per includere script, il server deve restituire un codice JavaScript valido. Il modo in cui diamo il JavaScript al client avviene attraverso una chiamata di funzione. Dite al server quale funzione volete che lo script chiami e quindi la create localmente. Al termine del caricamento dello script, la funzione verrà richiamata con i dati come parametro.

Quindi, se avete fatto una richiesta JSONP all'URL lei ha citato, ed è tornato il carico utile che lei ha citato, si otterrebbe ai dati in questo modo:

function parseResponse(data) { 
    console.log("JSONP request complete", data); 
} 

Answer 3

viene passato il nome parseResponse funzione di al server e in qualche modo i dati restituiti diviene parametri a questa funzione

Sembra che hai appena spiegato da soli, jsonp=parseResponse è come questa applicazione imposta la funzione di callback, quindi restituisce un func zione con i dati JSON in essa, che sembra

parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7}); 

che viene chiamato quando è stato caricato e sarebbe stato gestito da una funzione nella vostra JS come:

function parseResponse(data){ 
    console.log(data); 
}