JQuery's JSONP mit Beispielen erklärt

Zusammenfassung der Schlüsselpunkte

• JSONP (JSON With Padding) erlaubt Cross-Domain-Ajax-Anrufe, wodurch homologe Richtlinien umgehen, die Skripte daran hindern, auf Daten aus verschiedenen Quellen zuzugreifen. Dies erfolgt durch die Rückgabe des Servers, der den Funktionsaufruf enthält, den der Browser interpretieren kann.
• Während JSONP für das Erhalten von Daten aus verschiedenen Quellen und den Zugriff auf Inhalte für verschiedene Dienste ist, hat es auch einige Einschränkungen. JSONP kann nur Cross-Domain-Anfragen ausführen und muss vom Server explizit unterstützt werden. Es hat auch potenzielle Sicherheitsprobleme, da es Möglichkeiten für Cross-Site-Skriptangriffe (XSS) eröffnet.
• Andere Lösungen für homologe Richtlinien umfassen die Verwendung von Proxy oder die Implementierung der CORS-Ressourcenfreigabe (Cross-Origin-Ressourcen). Mit dem Proxy können serverseitige Code Cross-Origin-Anforderungen durchführen, während CORS es Browsern ermöglicht, über Domänen hinweg zu kommunizieren, indem ein neuer HTTP-Header für Zugriffskontroll-Owl-Origin in die Antwort aufgenommen wird. Jede Methode hat jedoch ihre eigenen Mängel und Einschränkungen.

Dieser Artikel wurde am 23. Juni 2016 aktualisiert, um Qualitätsprobleme zu lösen. Kommentare zu alten Artikeln wurden gelöscht. Wenn Sie eine webbasierte Anwendung entwickeln und versuchen, Daten aus einer Domäne zu laden, die nicht unter Ihrer Kontrolle liegt .cn/link/0df0dbfc4725c2259dc0bb045e9bf6d2 ' ist daher kein Zugang zulässig. In diesem Artikel werden wir untersuchen, was diesen Fehler verursacht und wie dieses Problem mit JQuery und JSONP gelöst werden kann.

gleiche Ursprungspolitik

Allgemeine Webseiten können mit XMLHTTPrequest-Objekten Daten an Remote-Server senden und empfangen. Die gleichorientierte Richtlinie begrenzt jedoch, was sie ausführen können. Dies ist ein wichtiges Konzept im Browser -Sicherheitsmodell, das feststellt, dass Webbrowser nur Skripte auf Seite A zulassen, um auf Seite B auf Daten zuzugreifen, wenn beide Seiten dieselbe Quelle haben. Die Quelle der Seite wird durch ihre

-Protokolle

, host und Portnummer definiert. Die Quelle dieser Seite lautet beispielsweise "https", "www.sitepoint.com", "80". Die Homogenpolitik ist ein Sicherheitsmechanismus. Es verhindert, dass Skripte Daten aus Ihrer Domain lesen und an ihre Server senden. Ohne dies ist es für eine böswillige Website einfach, Ihre Sitzungsinformationen auf eine andere Website (z. B. Google Mail oder Twitter) zu kriechen und Aktionen in Ihrem Namen auszuführen. Leider verursacht es auch die oben sehen, die wir oben sehen, und verursachen den Entwicklern, die versuchen, legitime Aufgaben zu erledigen, häufig Probleme.

Beispiel für den Fehler

Mal sehen, was nicht funktioniert. Dies ist eine JSON -Datei auf einer anderen Domain, und wir möchten sie mit der GetJson -Methode von JQuery laden.

<code class="language-javascript">$.getJSON(
  "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
  function(json) { console.log(json); }
);</code>

Wenn Sie die Konsole in Ihrem Browser öffnen und sie ausprobieren, sehen Sie eine Nachricht, die der oben genannten ähnlich ist. Was können wir also tun?

mögliche Lösungen

Zum Glück wird nicht alles von homologen Politiken beeinflusst. Beispielsweise ist es durchaus möglich, ein Bild oder Skript aus einer anderen Domäne in Ihre Seite zu laden. Dies bedeutet, dass wir ein <script></script> -Tag erstellen, sein src -Merkmal in unserer JSON -Datei festlegen und es in die Seite einfügen können.

<code class="language-javascript">var script = $("<script>", {
    src: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
    type: "application/json"
  }
);

$("head").append(script);</script></code>

Während dies funktioniert, hilft es uns nicht viel, da wir nicht auf die von ihnen enthaltenen Daten zugreifen können.

Anfänger von JSONP

JSONP (im Namen von JSON mit Polsterung) basiert auf dieser Technik und bietet uns eine Möglichkeit, auf die zurückgegebenen Daten zuzugreifen. Es wird implementiert, indem der Server JSON -Daten mit einem Funktionsaufruf ("populär" zurückgibt, den der Browser dann interpretieren kann. Diese Funktion muss auf der Seite definiert werden, auf der die JSONP -Antwort bewertet wird.

Lassen Sie uns sehen, wie das vorherige Beispiel aussieht. Dies ist eine aktualisierte JSON -Datei, die die ursprünglichen JSON -Daten in eine jsonCallback -Funktion einbindet.

<code class="language-javascript">function jsonCallback(json){
  console.log(json);
}

$.ajax({
  url: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json",
  dataType: "jsonp"
});</code>

Dies zeichnet die erwarteten Ergebnisse an der Konsole auf. Wir haben jetzt (wenn auch ziemlich begrenzt) Cross-Domain Ajax.

API von Drittanbietern

Mit einigen APIs von Drittanbietern können Sie den Namen einer Rückruffunktion angeben, die bei der Rückgabe der Anforderung ausgeführt werden sollte. Eine solche API ist die Github -API.

Im folgenden Beispiel erhalten wir die Benutzerinformationen von John Ressig (JQuery Creator) und protokollieren die Antwort auf die Konsole mit der logResults -Rallback -Funktion.

<code class="language-javascript">function logResults(json){
  console.log(json);
}

$.ajax({
  url: "https://api.github.com/users/jeresig",
  dataType: "jsonp",
  jsonpCallback: "logResults"
});</code>

Dies kann auch geschrieben werden wie:

<code class="language-javascript">$.getJSON("https://api.github.com/users/jeresig?callback=?",function(json){
  console.log(json);
});</code>

Die ? am Ende der URL teilt JQuery mit, dass es eine JSONP -Anfrage anstelle von JSON verarbeitet. JQuery registriert dann automatisch die Rückruffunktion, die sie bei der Rückgabe der Anfrage aufruft.

Wenn Sie mehr über die GetJson -Methode von JQuery erfahren möchten, lesen Sie bitte: ajax/jQuery.getJson einfaches Beispiel

Vorsichtsmaßnahmen

Aber wie Sie vielleicht inzwischen erkannt haben, hat dieser Ansatz einige Nachteile.

Zum Beispiel kann JSONP nur Cross-Domain-Anfragen ausführen, und der Server muss diese explizit unterstützen. JSONP ist nicht ohne Sicherheitsprobleme. Lassen Sie uns also kurz einige andere Lösungen einführen.

Verwenden von Agent

Der serverseitige Code unterliegt nicht der gleichen Richtlinien und kann ohne Probleme mit dem Origin-Origin-Anfragen ausführen. So können Sie eine Art Proxy erstellen und diese verwenden, um alle von Ihnen benötigten Daten abzurufen. Siehe unser erstes Beispiel:

<code class="language-php">/* proxy.php */
$url = "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec ($ch);
curl_close ($ch);
echo $result;</code>

im Client:

<code class="language-javascript">$.getJSON("https://www.php.cn/link/28db3b5e7bfadf38b792da7192530ac1.com/proxy.php", function(json) {
  console.log(json);
})</code>

Aber diese Methode hat auch ihre Nachteile. Wenn beispielsweise eine Site von Drittanbietern Cookies zur Authentifizierung verwendet, funktioniert diese Methode nicht.

cors

Cross-Origin-Ressourcenfreigabe (CORS) ist eine W3C-Spezifikation, mit der Browser über Domänen hinweg kommunizieren können. Dies geschieht durch Einbeziehung des neuen HTTP-Headers von Access-Control-Allow-Origin-Origin-HTTP in die Antwort.

Verweist auf unser erstes Beispiel: Sie können Folgendes zur .htaccess -Datei (unter der Annahme von Apache) hinzufügen, um Anforderungen aus verschiedenen Quellen zuzulassen:

<code class="language-javascript">$.getJSON(
  "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
  function(json) { console.log(json); }
);</code>

(Wenn Sie einen Server ausführen, der nicht Apache ist, lesen Sie ihn bitte hier: https://www.php.cn/link/819e2e55be8ef0957b56ea94356bfb79 )

Sie können mehr über CORs in einem unserer letzten Tutorials erfahren: Weitere Informationen zu CORS

erfahren Schlussfolgerung

Mit

JSONP können Sie homologe Richtlinien umgehen und in gewissem Maße Cross-Domain-Ajax-Anrufe tätigen. Es ist keine magische Pille, und natürlich hat sie ihre Probleme, aber in einigen Fällen kann sie sich als von unschätzbarem Wert erweisen, wenn Daten aus verschiedenen Quellen entnommen werden.

Mit

JSONP können Sie auch eine Vielzahl von Inhalten aus verschiedenen Diensten extrahieren. Viele bekannte Websites bieten JSONP-Dienste (wie Flickr) an, mit denen Sie über vordefinierte APIs auf ihren Inhalt zugreifen können. Sie finden eine vollständige Liste von ihnen im ProgrammableWeb API -Verzeichnis.

(Folgendes ist der FAQ

FAQs über JSONP (FAQ)

• Was ist der Hauptunterschied zwischen JSON und JSONP? Sowohl JSON als auch JSONP sind Formate, mit denen Daten zwischen Servern und Webanwendungen verarbeitet werden. Der Hauptunterschied besteht darin, wie sie mit Cross-Domänen-Anfragen umgehen. JSON kann aufgrund homologen Richtlinien (in Webbrowsern implementierte Sicherheitsmaßnahmen) keine Cross-Domänen-Anfragen unterstützen. Andererseits umgeht JSONP diese Richtlinie mithilfe einer bevölkerungswidrigen Methode, sodass Daten von Servern mit unterschiedlichen Domänen als dem Client angefordert werden können.

• Wie umgeht JSONP die gleichorientierte Richtlinie? JSONP umgeht homologe Richtlinien mit der Methode Polsterung oder "Füllenanforderung". Bei dieser Methode fordert der Client Daten von Servern in verschiedenen Domänen an, indem sie die Rückruffunktion an die URL anhängen. Der Server wickelt dann die angeforderten Daten in diese Funktion und sendet sie an den Client zurück. Der Client führt diese Funktion aus, um auf die Daten zuzugreifen. Diese Methode ermöglicht es JSONP, die durch homologen Richtlinien auferlegten Cross-Domänen-Grenzen zu überwinden.

• Ist JSONP sicher? Obwohl JSONP eine Lösung für homologe Richtlinien bietet, hat es seine eigenen Sicherheitsrisiken. Da JSONP die Ausführung von Skripten umfasst, die vom Server empfangen werden, eröffnet er, wenn der Server beschädigt ist, die Möglichkeit für einen Cross-Site-Skript-Angriff (Skripting). Verwenden Sie daher nur JSONP mit vertrauenswürdigen Quellen.

• Kann JSONP -Fehlerantworten die Fehlerreaktionen handeln? Im Gegensatz zu JSON hat JSONP keine integrierte Fehlerbehandlung. Wenn die JSONP -Anforderung fehlschlägt, wirft der Browser keinen Fehler auf und die Rückruffunktion wird nicht ausgeführt. Um Fehler in JSONP zu bewältigen, können Sie einen Zeitüberschreitungsmechanismus implementieren, der einen Fehler auslöst, wenn die Rückruffunktion nicht innerhalb einer bestimmten Zeit ausgeführt wird.

• Wie erstellt man eine JSONP -Anfrage mit JQuery? jQuery bietet eine einfache Möglichkeit, JSONP -Anfragen mit der Methode $ .ajax () zu stellen. Sie müssen den Datentyp in der Einstellung $ .ajax () als "JSONP" angeben.

• Was sind die Grenzen von JSONP? JSONP hat einige Einschränkungen. Es unterstützt nur GET -Anfragen und unterstützt weder Post noch andere HTTP -Methoden. Es fehlen auch die Funktionen zur Fehlerbehandlung. Darüber hinaus stellt JSONP Sicherheitsrisiken dar, da es sich um die Umgehung der homologen Richtlinien handelt.

• Wird JSONP noch verwendet? Obwohl JSONP in der Vergangenheit eine beliebte Lösung für Cross-Domänen-Anfragen war, hat CORS jetzt eine geringe Nutzungshäufigkeit aufgrund der Entstehung von CORs (Cross-Origin-Ressourcenfreigabe). CORS bietet eine sicherere und leistungsstärkere Kreuzdomäne Anfragen.

Das obige ist der detaillierte Inhalt vonJQuery's JSONP mit Beispielen erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!