Verwirrt, wie eine JSONP-Anfrage funktioniert

Ich habe Schwierigkeiten zu verstehen, die details, wie eine jsonp-Anfrage funktioniert. Ich habe gelesen, mehrere Quellen, darunter das wiki auf jsonp und bin immer noch sehr verwirrt darüber, wie der Rückruf kommt tatsächlich ein halten Sie die Funktion, die vom server zurückgegeben, wenn ein jsonp-Aufruf gemacht wird. Zum Beispiel, in der wiki, die Quelle der Anforderung ist festgelegt als:

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

Was genau macht jsonp = parseResponse eigentlich tun/bedeuten?? Dann Sie gehen zu sagen, dass die Nutzlast ist:

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

Wie funktioniert das? Ich bin verwirrt über das ganze callback-Funktionalität. Der name der Funktion parseResponse an den server übergeben wird und irgendwie die Daten, die zurückgegeben wird der Parameter zu dieser Funktion? Kann mir bitte jemand klar erklären, genau, wie die Daten abgerufen/genutzt von eine jsonp-Anfrage?

InformationsquelleAutor John Baum | 2012-04-17
  1. 45

    Den callback ist eine Funktion, die SIE definiert HABEN, in Ihren eigenen code. Die jsonp-server wird wickeln Sie Ihre Antwort mit einem Funktionsaufruf den gleichen Namen wie Ihre angegebene callback-Funktion.

    Was passiert, es sind dies:

    1.) Dein code erstellt die JSONP-Anfrage, die Ergebnisse in einem neuen <script> block, der wie folgt aussieht:

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

    2) neue script-tag ausgeführt wird, die von Ihrem browser, wodurch ein JSONP-request an den server. Es reagiert mit 

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

    3), Da diese Anfrage kam von einem script-tag, es ist so ziemlich GENAU das gleiche, als hätten Sie buchstäblich

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

    in Ihre Seite.

    4) Jetzt, da das neue Skript geladen wurde vom remote-server, es werden jetzt ausgeführt, und das einzige, was Sie tun werden, ist ein Funktionsaufruf, parseResponse() vorbei in den JSON-Daten die Funktion anrufen ist nur der parameter.

    Also irgendwo in Ihrem code, Sie würde haben:

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

    Grundsätzlich JSONP ist eine Möglichkeit, unter Umgehung der browser die same-origin-Skript Sicherheitspolitik, durch eine 3rd-party-server injizieren einen Aufruf der Funktion direkt in Ihre Seite. Beachten Sie, dass dieser Entwurf sehr unsicher. Du bist abhängig, dass der remote-Dienst ist ehrenhaft und nicht mit böswilligen Absichten. Nichts Stoppt einen schlechten service von der Rückkehr einige JS-code, der Stiehlt banking/facebook/whatever-Anmeldeinformationen. e.g.... die JSONP-Antwort könnte habe

     internalUseOnlyFunction('deleteHarddrive');

    eher als parseReponse(...). Wenn der remote-site kennt die Struktur Ihres Codes, den Sie ausführen kann beliebige Operationen mit diesem code, weil Sie geöffnet habe, die Haustür weit offen, um zu ermöglichen, dass die Website etwas zu tun haben möchte.

    • Ich würde nicht so weit gehen, ein Beispiel, wie deleteHardDrive (javascript kann das nicht aus dem browser) aber es ist definitiv erwähnenswert, dass dies gefährlich sein kann.
    • Tolle Erklärung!
    InformationsquelleAutor Marc B
  2. 1

    Edit: Wie Jon schon sagte, es ist ein Weg, bessere Erklärung für es hier.

    JSONP verwendet script-tags, um cross-origin-requests. Da ein script-tag wird verwendet, um Skripte, die den server zurückgeben muss Gültiger JavaScript. Die Art, wie wir uns das JavaScript an den client durch einen Aufruf der Funktion. Sie sagen dem server, was Funktion, die Sie wollen das Skript zu nennen, und dann erstellen Sie die Funktion lokal. Wenn das Skript fertig ist laden, Ihre Funktion wird aufgerufen werden, mit den Daten als parameter.

    Also, wenn Sie haben einen JSONP-request an die URL, die Sie erwähnt, und es kehrte die Nutzlast, die Sie erwähnt, Sie würden Ihre Daten durch, dies zu tun:

    function parseResponse(data) {
    console.log("JSONP request complete", data);
}
    • Wie funktioniert die Daten zurückgegeben, die auf Magische Weise werden die parameter für die parseRepsonse Funktion?
    • da der server erzeugt das JS-code, der aufgerufen wird?
    InformationsquelleAutor Alex Turpin
  3. 0

    Den Namen der Funktion parseResponse an den server übergeben wird, und irgendwie
    die Daten, die zurückgegeben wird der Parameter dieser Funktion

    Sieht aus wie Sie eben erklärt es sich, jsonp=parseResponse ist, wie diese app setzt die callback-Funktion, so gibt es eine Funktion, mit der Sie Ihre json-Daten, das sieht aus wie

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

    die aufgerufen wird, wenn es geladen und würde behandelt werden, indem eine Funktion in der JS wie:

    function parseResponse(data){
    console.log(data);
}
    InformationsquelleAutor JKirchartz
Schreibe einen Kommentar