Come si imposta JSONP?

Question

Che cosa è necessario sul lato server per consentire a qualcuno di ottenere dati da quel server utilizzando JSONP. E cosa devo fare anche dal lato utente? Voglio usare JSONP come alternativa a XMLHttpRequest.

Non funzionerà con la mia estensione per Firefox, a causa della politica della stessa origine. Quindi, le persone consigliavano JSON, ma sono piuttosto perso dopo aver cercato tutorial e guide su Internet.

Grazie per l'aiuto!

Answer 1

Supponendo che sul server sia in esecuzione PHP, è sufficiente aggiungere la richiesta GET di "richiamata".

<?php header('content-type: application/json; charset=utf-8'); 
$data = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); 
echo $_GET['callback'] . '('.json_encode($data).')'; 

E sul lato client (utilizzando jQuery):

$.ajax({url: 'http://site.com/data.php', dataType:'jsonp'}); 

Il codice PHP sopra è solo per la demo, non dimenticate di sanitise $ _GET [ 'richiamata']

Quello Detto questo, se il tuo problema riguarda la stessa politica di origine, probabilmente dovrai semplicemente aggiungere dal lato server e tutto dovrebbe funzionare.

Answer 2

Sul lato server, tutto ciò che dovete installare è una risorsa web (ad esempio, pagina) che accetta una richiesta di GET e restituisce i dati utilizzando la convenzione JSON-P, che è:

callback({"data": "here"}); 

... dove il nome della funzione ("callback" in quell'esempio) viene solitamente preso da uno dei parametri della stringa di query (per convenzione, il parametro "callback"), e il dato è JSON text (anche se tecnicamente potrebbe essere tutto ciò che è valido in un oggetto JavaScript letterale, la convenzione con JSON-P è di limitarsi a ciò che è valido in JSON). Così, per esempio, diciamo che la richiesta si presentava così:

http://example.com/foo.php?callback=bar

che chiama la pagina foo.php (non deve essere PHP, può essere qualsiasi sistema lato server dinamico), dicendogli che la la funzione che vogliamo chiamare è "bar". La nostra risposta sarebbe:

bar({"data": "here"}); 

Sul lato client, è necessario aggiungere un elemento di script alla pagina in modo dinamico, e anche aggiungere la funzione di callback che andranno innescata dalla risposta JSON-P. Di solito vuoi assegnare a quella funzione un nome casuale e rimuoverlo quando hai finito.

Here's a complete example come risposta a un'altra domanda qui su Stack Overflow. Potrebbe essere necessario adattarlo leggermente per l'utilizzo in un componente aggiuntivo di Firefox, ma i concetti sono gli stessi.

Answer 3

jsonp è json con un wrapper, quindi è possibile simulare le richieste Ajax su un altro server inserendo dinamicamente nuovi tag <script>, con l'indirizzamento di src sull'altro server. Il wrapper essenzialmente fa sì che le informazioni di ritorno di jsonp siano chiamate di funzioni javascript valide che possono essere eseguite per estrarre i dati standard di JSON all'interno.

In generale, in un insicuro 'solo per demo' versione, avresti qualcosa di simile:

function unwrap_jsonp(data) { 
    eval(data); 
} 

Il server remoto potrebbe restituire il seguente testo letterale:

unwrap_json("{'this':'is','sparta':'!'}"); 

Si noti che questo è letterale codice JavaScript letterale, che viene eseguito e "annega" la stringa JSON incorporata a una struttura dati javascript nativa.

La maggior parte dei servizi JSONP consente di specificare un parametro aggiuntivo tramite la stringa di query per denominare la funzione di gestione in cui si desidera racchiudere la risposta, ad es.

http://example.com/getjsonp.php?callback=unwrap_json