Kann ich eine domänenübergreifende JSONP-Anfrage in JavaScript stellen, ohne jQuery oder eine andere externe Bibliothek zu verwenden? Ich möchte JavaScript selbst verwenden und dann die Daten analysieren und daraus ein Objekt machen, damit ich sie verwenden kann. Muss ich eine externe Bibliothek verwenden? Wenn nicht, wie kann ich das machen?
javascript
jsonp
Dave
quelle
quelle
Antworten:
quelle
foo(payload_of_json_data)
Die Idee ist, dass beim Laden in das Skript-Tag die Funktion foo mit der Nutzlast bereits als Javascript-Objekt aufgerufen wird und keine Analyse erforderlich ist.Leichtes Beispiel (mit Unterstützung für onSuccess und onTimeout). Sie müssen den Rückrufnamen innerhalb der URL übergeben, wenn Sie ihn benötigen.
Beispielnutzung:
Bei GitHub: https://github.com/sobstel/jsonp.js/blob/master/jsonp.js
quelle
Was ist JSONP?
Das Wichtigste bei jsonp ist, dass es sich nicht um ein Protokoll oder einen Datentyp handelt. Es ist nur eine Möglichkeit, ein Skript im laufenden Betrieb zu laden und das auf der Seite eingeführte Skript zu verarbeiten. Im Sinne von JSONP bedeutet dies, dass ein neues Javascript-Objekt vom Server in die Client-Anwendung / das Client-Skript eingefügt wird.
Wann wird JSONP benötigt?
Dies ist eine Methode, mit der eine Domäne asynchron auf Daten von einer anderen Domäne auf derselben Seite zugreifen / diese verarbeiten kann. In erster Linie wird es verwendet, um CORS-Einschränkungen (Cross Origin Resource Sharing) zu überschreiben, die bei einer XHR-Anforderung (Ajax) auftreten würden. Das Laden von Skripten unterliegt keinen CORS-Einschränkungen.
Wie wird es gemacht
Das Einführen eines neuen Javascript-Objekts vom Server kann auf viele Arten implementiert werden. Am häufigsten wird jedoch die Ausführung einer Rückruffunktion durch den Server implementiert, wobei das erforderliche Objekt übergeben wird. Die Rückruffunktion ist nur eine Funktion, die Sie bereits auf dem Client eingerichtet haben und die das geladene Skript an dem Punkt aufruft, an dem das Skript geladen wird , um die an ihn übergebenen Daten zu verarbeiten.
Beispiel:
Ich habe eine Anwendung, die alle Elemente bei jemandem zu Hause protokolliert. Meine Anwendung ist eingerichtet und ich möchte jetzt alle Elemente im Hauptschlafzimmer abrufen.
Meine Bewerbung ist eingeschaltet
app.home.com
. Die APIs, von denen ich Daten laden muss, sind aktiviertapi.home.com
.Sofern der Server nicht explizit so eingerichtet ist, dass er dies zulässt, kann ich diese Daten nicht mit Ajax laden, da selbst Seiten in separaten Subdomänen XHR CORS-Einschränkungen unterliegen.
Richten Sie im Idealfall die XHR-XHR ein
Da sich die API und die App in derselben Domain befinden, kann ich im Idealfall die Header einrichten
api.home.com
. In diesem Fall kann ich einAccess-Control-Allow-Origin:
Header-Element hinzufügen , das Zugriff gewährtapp.home.com
. Angenommen, der Header ist wie folgt eingerichtet:Access-Control-Allow-Origin: "http://app.home.com"
Dies ist weitaus sicherer als das Einrichten von JSONP. Dies liegt daran,app.home.com
dass Sie alles bekommen können, was Sie wollen,api.home.com
ohneapi.home.com
CORS Zugang zum gesamten Internet zu gewähren.Die obige XHR-Lösung ist nicht möglich. Einrichten von JSONP In meinem Client-Skript: Ich habe eine Funktion eingerichtet, um die Antwort vom Server zu verarbeiten, wenn ich den JSONP-Aufruf tätige . ::
Der Server muss so eingerichtet sein, dass er ein Mini-Skript zurückgibt, das ungefähr so aussieht.
"processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');"
Es könnte so konzipiert sein, dass es eine solche Zeichenfolge zurückgibt, wenn so etwas//api.home.com?getdata=room&room=main_bedroom
aufgerufen wird.Anschließend richtet der Client ein Skript-Tag als solches ein:
Dies lädt das Skript und ruft sofort
window.processJSONPResponse()
als vom Server geschrieben / echo / ausgedruckt auf. Die als Parameter an die Funktion übergebenen Daten werden jetzt in derdataFromServer
lokalen Variablen gespeichert und Sie können damit alles tun, was Sie brauchen.Aufräumen
Sobald der Kunde die Daten hat, dh. Unmittelbar nach dem Hinzufügen des Skripts zum DOM kann das Skriptelement aus dem DOM entfernt werden:
quelle
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
. Nach dem Hinzufügen von einfachen Anführungszeichen zu den Daten funktionierte alles einwandfrei, also:"processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');"
Mein Verständnis ist, dass Sie tatsächlich Skript-Tags mit JSONP verwenden, sooo ...
Der erste Schritt besteht darin, eine Funktion zu erstellen, die den JSON verarbeitet:
Stellen Sie sicher, dass auf diese Funktion auf globaler Ebene zugegriffen werden kann.
Fügen Sie als Nächstes dem DOM ein Skriptelement hinzu:
Das Skript lädt das vom API-Anbieter erstellte JavaScript und führt es aus.
quelle
eval
oderparse
oder nichts. Sie sollten JavaScript erhalten, das der Browser gerade ausführen kann, oder?die Art und Weise, wie ich jsonp wie folgt benutze:
Verwenden Sie dann die 'jsonp'-Methode wie folgt:
Referenz:
JavaScript XMLHttpRequest mit JsonP
http://www.w3ctech.com/topic/721 (sprechen Sie über die Art der Verwendung Versprechen)
quelle
Ich habe eine reine Javascript-Bibliothek, um das zu tun https://github.com/robertodecurnex/J50Npi/blob/master/J50Npi.js
Schauen Sie es sich an und lassen Sie mich wissen, wenn Sie Hilfe beim Verwenden oder Verstehen des Codes benötigen.
Übrigens haben Sie hier ein einfaches Anwendungsbeispiel: http://robertodecurnex.github.com/J50Npi/
quelle
Anwendungsbeispiel:
quelle
window[callback] = null
die Funktion als Müllsammler zuzulassen.Ich habe eine Bibliothek geschrieben, um so einfach wie möglich damit umzugehen. Keine Notwendigkeit, es extern zu machen, es ist nur eine Funktion. Im Gegensatz zu einigen anderen Optionen bereinigt dieses Skript nach sich selbst und ist verallgemeinert, um zur Laufzeit weitere Anforderungen zu stellen.
https://github.com/Fresheyeball/micro-jsonp
quelle
Im folgenden
JavaScript
Beispiel können Sie einenJSONP
Anruf ohne JQuery tätigen :Sie können auch mein
GitHub
Repository als Referenz referenzieren.https://github.com/shedagemayur/JavaScriptCode/tree/master/jsonp
quelle
quelle
window.document.getElementsByTagName('script')[0];
und nichtdocument.body.appendChild(…)
?logAPI
eingestellt werden,null
wenn dies erledigt ist, damit die Speicherbereinigung durchgeführt werden kann?Wenn Sie ES6 mit NPM verwenden, können Sie das Knotenmodul "fetch-jsonp" ausprobieren. Abruf-API Bietet Unterstützung für das Tätigen eines JsonP-Aufrufs als regulären XHR-Aufruf.
Voraussetzung: Sie sollten das
isomorphic-fetch
Knotenmodul in Ihrem Stapel verwenden.quelle
Fügen Sie einfach eine ES6-Version von Sobstels netter Antwort ein:
quelle