Domanda Di cosa parla JSONP?


Capisco JSON, ma non JSONP. Il documento di Wikipedia su JSON è (era) il principale risultato di ricerca per JSONP. Dice questo:

JSONP o "JSON con padding" è un'estensione JSON in cui un prefisso viene specificato come argomento di input della chiamata stessa.

Eh? Che chiamata? Non ha alcun senso per me. JSON è un formato dati. Non c'è chiamata.

Il 2 ° risultato di ricerca viene da un tizio di nome Remy, chi scrive questo su JSONP:

JSONP è l'iniezione di tag script, passando la risposta dal server a una funzione specificata dall'utente.

Posso capirlo, ma non ha ancora senso.


Allora, qual è JSONP? Perché è stato creato (quale problema risolve)? E perché dovrei usarlo?


appendice: Ho appena creato una nuova pagina per JSONP su Wikipedia; ora ha una descrizione chiara e approfondita di JSONP, basata su jvenemaLa risposta.


1833
2018-01-14 20:53


origine


risposte:


In realtà non è troppo complicato ...

Supponiamo che tu sia nel dominio example.com e desideri effettuare una richiesta al dominio example.net. Per fare ciò, è necessario attraversare i confini del dominio, un no-no nella maggior parte dei browser.

L'unico elemento che ignora questa limitazione è i tag <script>. Quando si utilizza un tag script, la limitazione del dominio viene ignorata, ma in circostanze normali non è possibile fare qualsiasi cosa con i risultati, lo script viene appena valutato.

Inserisci JSONP. Quando si effettua la richiesta a un server abilitato per JSONP, si passa un parametro speciale che indica al server un po 'della pagina. In questo modo, il server è in grado di riassumere la propria risposta in un modo che la tua pagina può gestire.

Ad esempio, supponiamo che il server si aspetti un parametro chiamato "callback" per abilitare le sue funzionalità JSONP. Quindi la tua richiesta sarà simile a:

http://www.example.net/sample.aspx?callback=mycallback

Senza JSONP, questo potrebbe restituire alcuni oggetti JavaScript di base, in questo modo:

{ foo: 'bar' }

Tuttavia, con JSONP, quando il server riceve il parametro "callback", avvolge il risultato in modo leggermente diverso, restituendo qualcosa del genere:

mycallback({ foo: 'bar' });

Come puoi vedere, ora invocherà il metodo che hai specificato. Quindi, nella tua pagina, definisci la funzione di callback:

mycallback = function(data){
  alert(data.foo);
};

E ora, quando lo script viene caricato, verrà valutato e la tua funzione verrà eseguita. Voila, richieste cross-domain!

Vale anche la pena notare l'unico problema principale con JSONP: si perde molto controllo sulla richiesta. Ad esempio, non esiste un modo "carino" per ripristinare i codici di errore corretti. Di conseguenza, si finisce usando timer per monitorare la richiesta, ecc., Che è sempre un po 'sospetto. La proposizione per JSONRequest è un'ottima soluzione per consentire lo scripting cross-domain, mantenere la sicurezza e consentire un controllo adeguato della richiesta.

In questi giorni (2015), CORS è l'approccio raccomandato rispetto a JSONRequest. JSONP è ancora utile per il supporto del browser più vecchio, ma date le implicazioni sulla sicurezza, a meno che tu non abbia scelta, CORS è la scelta migliore.


1795
2018-01-14 21:08



JSONP è davvero un semplice trucco per superare il XMLHttpRequest stessa politica del dominio. (Come sai, non si può inviare AJAX (XMLHttpRequest) richiesta a un dominio diverso.)

Quindi - invece di usare XMLHttpRequest dobbiamo usare copione Tag HTML, quelli che di solito usi per caricare file js, in modo che js possa ottenere dati da un altro dominio. Suona strano?

La cosa è - si rivela copione i tag 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';

Finirai con a copione segmento che appare così dopo aver caricato i dati:

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

Tuttavia questo è un po 'scomodo, perché dobbiamo prendere questo array da copione etichetta. Così JSONP i creatori 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';

Notare il my_callback funzione laggiù? Cosi quando JSONP il server riceve la tua richiesta e trova il parametro di callback - invece di restituire un array js normale restituirà questo:

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

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

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

Esempio di JavaScript di base (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 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 poco conosciuta in quanto non ha nulla a che fare con ciò che la maggior parte delle persone potrebbe pensare come "imbottitura".)


640
2017-07-29 21:40



JSONP funziona costruendo un elemento "script" (nel markup HTML o inserito nel DOM tramite JavaScript), che richiede una posizione del servizio dati remoto. La risposta è una javascript caricata sul browser con il nome della funzione predefinita insieme al parametro passato che è richiesto i dati JSON. Quando viene eseguito lo script, la funzione viene richiamata insieme ai dati JSON, consentendo alla pagina richiedente di ricevere ed elaborare i dati.

Per ulteriori letture Visita:  https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

snippet di codice lato client

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

Lato server di codice PHP

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>

38
2018-03-17 13:32



Perché è possibile chiedere al server di aggiungere un prefisso all'oggetto JSON restituito. Per esempio

function_prefix(json_object);

in ordine per il browser eval "inline" la stringa JSON come espressione. Questo trucco rende possibile per il server "iniettare" il codice javascript direttamente nel browser Client e questo con l'esclusione delle restrizioni sulla "stessa origine".

In altre parole, puoi avere scambio di dati interdominio.


Normalmente, XMLHttpRequest non consente lo scambio di dati tra domini direttamente (è necessario passare attraverso un server nello stesso dominio) mentre:

<script src="some_other_domain/some_data.js&prefix=function_prefix> `si può accedere a dati da un dominio diverso dall'origine.


Vale anche la pena notare: anche se il server deve essere considerato "affidabile" prima di tentare quel tipo di "trucco", è possibile contenere gli effetti collaterali del possibile cambiamento nel formato dell'oggetto ecc. Se un function_prefix(cioè una funzione js propria) viene utilizzata per ricevere l'oggetto JSON, la funzione suddetta può eseguire controlli prima di accettare / elaborare ulteriormente i dati restituiti.


37
2018-01-14 20:58



JSONP è un ottimo modo per aggirare gli errori di scripting tra domini. È possibile utilizzare un servizio JSONP esclusivamente con JS senza dover implementare un proxy AJAX sul lato server.

Puoi usare il b1t.co servizio per vedere come funziona. Questo è un servizio JSONP gratuito che ti consente di minimizzare i tuoi URL. Ecco l'URL da utilizzare per il servizio:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

Ad esempio la chiamata, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

sarebbe tornato

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

E così quando quel get viene caricato nel tuo js come src, eseguirà automaticamente qualunque javascriptName che dovresti implementare come funzione di callback:

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

Per effettuare effettivamente la chiamata JSONP, puoi farlo in diversi modi (incluso l'utilizzo di jQuery) ma qui c'è un puro esempio JS:

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

Un esempio graduale e un servizio web jsonp per esercitarsi è disponibile su: questo post


17
2018-03-28 15:59



Un semplice esempio per l'utilizzo di JSONP.

client.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

server.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>    

10
2018-06-06 06:45



Prima di comprendere JSONP, devi conoscere il formato JSON e XML. Attualmente il formato dei dati più utilizzato sul web è XML, ma XML è molto complicato. Rende gli utenti scomodi da elaborare incorporati nelle pagine Web.

Per fare in modo che JavaScript possa facilmente scambiare dati, anche come programma di elaborazione dati, usiamo il testo in base agli oggetti JavaScript e abbiamo sviluppato un semplice formato di scambio di dati, che è JSON. JSON può essere utilizzato come dati o come programma JavaScript.

JSON può essere incorporato direttamente in JavaScript, usandoli è possibile eseguire direttamente determinati programmi JSON, ma a causa di vincoli di sicurezza, il meccanismo Sandbox del browser disabilita l'esecuzione di codice JSON tra domini.

Per fare passare JSON dopo l'esecuzione, abbiamo sviluppato un JSONP. JSONP ignora i limiti di sicurezza del browser con la funzionalità di callback JavaScript e il tag <script>.

Quindi in breve spiega cos'è JSONP, quale problema risolve (quando usarlo).


9
2017-12-08 04:02