Verstehen Sie die Prinzipien und Anwendungen von JSONP in einem Artikel

Verstehen Sie die Prinzipien und Anwendungen von JSONP in einem Artikel

Was ist JSONP

Lassen Sie uns zunächst über das Konzept von JSON sprechen. JSON ist ein leichtes Datenübertragungsformat, das in aktuellen Webanwendungen weit verbreitet ist. Die Kodierung und Analyse von Daten im JSON-Format ist grundsätzlich in allen gängigen Sprachen implementiert, sodass die meisten getrennten Front-End- und Back-End-Architekturen Daten mittlerweile im JSON-Format übertragen.

Was ist also JSONP?

Lassen Sie uns zunächst über das Konzept der Browserhomologierichtlinie sprechen. Um die Sicherheit des Benutzerzugriffs zu gewährleisten, verwenden moderne Browser die Homologierichtlinie, was bedeutet, dass der Zugriff auf Seiten aus nicht homologen Quellen nicht zulässig ist. Sie können bei Baidu nach dem detaillierten Konzept suchen. Hier muss jeder nur wissen, dass in Ajax Anfragen für URLs, die nicht denselben Ursprung haben, nicht zulässig sind. Beispielsweise darf die Ajax-Anfrage bei einer Seite unter www.a.com nicht auf eine Seite wie www.b.com/c.php zugreifen.

JSONP wird verwendet, um das Problem domänenübergreifender Anforderungen zu lösen. Wie wird es also konkret implementiert?

JSONP-Prinzip

Ajax-Anfragen sind von der Same-Origin-Policy betroffen und Cross-Domain-Anfragen sind nicht zulässig. Der Link im src-Attribut des Skript-Tags kann jedoch auf das Cross-Domain-JS-Skript zugreifen. Mit dieser Funktion gibt der Server keine Daten mehr im JSON-Format zurück, sondern einen Abschnitt mit JS-Code, der eine Funktion aufruft, die in src aufgerufen wird, wodurch Cross-Domain erreicht wird.

JSONP-Implementierung

1. Was passiert, wenn eine domänenübergreifende Anfrage in Ajax gestellt wird?

Der Frontend-Code befindet sich unter der Domäne www.practice.com und verwendet Ajax, um eine domänenübergreifende Get-Anfrage zu senden

<!DOCTYPE html>
<html>
<Kopf>
	<Titel>GoJSONP</Titel>
</Kopf>
<Text>
<Skripttyp="text/javascript">
	Funktion jsonhandle(Daten){
		Alarm("Alter:" + Daten.Alter + "Name:" + Daten.Name);
	}
</Skript>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</Skript>
<Skripttyp="text/javascript">
	$(Dokument).bereit(Funktion(){
		$.ajax({
			Typ: "get",
			asynchron: falsch,
			URL: "http://www.practice-zhao.com/student.php?id=1",
			Typ: "json",
			Erfolg: Funktion (Daten) {
				jsonhandle(Daten);
			}

		});
	});
</Skript>
</body>
</html>

Der Backend-PHP-Code wird unter der Domäne www.practice-zhao.com platziert und gibt einfach ein Datenstück im JSON-Format aus

jsonhandle({

"Alter" : 15,

"Name": "John",

Beim Zugriff auf den Front-End-Code http://www.practice.com/gojsonp/index.html meldet Chrome den folgenden Fehler

Es wird empfohlen, den Zugriff auf URLs aus verschiedenen Quellen zu untersagen.

2. Verwenden Sie JSONP, um die Ajax-Anforderung im Front-End-Code zu entfernen

Ein Skript-Tag wurde hinzugefügt, dessen Quelle auf das Skript remote.js unter einer anderen Domäne www.practice-zhao.com verweist.

<!DOCTYPE html>
<html>
<Kopf>
	<Titel>GoJSONP</Titel>
</Kopf>
<Text>
<Skripttyp="text/javascript">
	Funktion jsonhandle(Daten){
		Alarm("Alter:" + Daten.Alter + "Name:" + Daten.Name);
	}
</Skript>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</Skript>
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>
</body>
</html>

Hier wird das domänenübergreifende Skript remote.js aufgerufen. Der remote.js-Code lautet wie folgt:

jsonhandle({
	"Alter" : 15,
	"Name": "John",
})

Das heißt, dieser Remote-JS-Code führt die oben definierte Funktion aus und öffnet ein Eingabeaufforderungsfeld

3. Ändern Sie den Front-End-Code erneut

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
	<Titel>GoJSONP</Titel>
</Kopf>
<Text>
<Skripttyp="text/javascript">
	Funktion jsonhandle(Daten){
		Alarm("Alter:" + Daten.Alter + "Name:" + Daten.Name);
	}
</Skript>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</Skript>
<Skripttyp="text/javascript">
	$(Dokument).bereit(Funktion(){
		var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
		var obj = $('<script><\/script>');
		obj.attr("Quelle",URL);
		$("body").anhängen(obj);
	});
</Skript>
</body>
</html>

Hier wird dynamisch ein Skript-Tag hinzugefügt, der src verweist auf ein domänenübergreifendes PHP-Skript und der obige JS-Funktionsname wird als Rückrufparameter übergeben. Sehen wir uns dann an, wie der PHP-Code geschrieben wird:

<?php
$Daten = Array(
	'Alter' => 20,
	'Name' => 'Zhang San',
);

$rückruf = $_GET['rückruf'];

echo $callback."(".json_encode($data).")";
zurückkehren;

Der PHP-Code gibt eine JS-Anweisung zurück, und zwar

jsonhandle({
	"Alter" : 15,
	"Name": "Zhang San",
})

Wenn Sie zu diesem Zeitpunkt auf die Seite zugreifen, wird dynamisch ein Skript-Tag hinzugefügt, src verweist auf das PHP-Skript, der zurückgegebene JS-Code wird ausgeführt und ein Eingabeaufforderungsfeld wird erfolgreich angezeigt.
Daher wandelt JSONP den Zugriff auf domänenübergreifende Anfragen in die Ausführung von Remote-JS-Code um. Der Server gibt keine Daten mehr im JSON-Format zurück, sondern gibt stattdessen einen Funktionsausführungscode zurück, der die JSON-Daten als eingehenden Parameter verwendet.

4. Schließlich bietet jQuery eine bequeme Möglichkeit, JSONP zu verwenden

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
	<Titel>GoJSONP</Titel>
</Kopf>
<Text>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</Skript>
<Skripttyp="text/javascript">
	$(Dokument).bereit(Funktion(){
		$.ajax({
			Typ: "get",
			asynchron: falsch,
			URL: "http://www.practice-zhao.com/student.php?id=1",
			Datentyp: "jsonp",
			jsonp:"callback", //Parametername der Anfrage PHP jsonpCallback: "jsonhandle", //Auszuführende Callback-Funktion Erfolg : function(data) {
				Alarm("Alter:" + Daten.Alter + "Name:" + Daten.Name);
			}

		});
	});
</Skript>
</body>
</html>

Oben finden Sie ausführliche Informationen zum Verständnis der Prinzipien und Anwendungen von JSONP in einem Artikel. Weitere Informationen zu den Prinzipien und Anwendungen von JSONP finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • JSONP-Prinzipien, Verständnis und Beispielanalyse
  • Analyse des Prinzips der JSONP-Cross-Domain-Lösung
  • Detaillierte Erklärung der JSONP-Prinzipien und Anwendungsbeispiele
  • JSONP-Prinzip und einfache Implementierung
  • Detaillierte Analyse des JSONP-Protokollprinzips
  • Detaillierte Analyse des Prinzips von JSONP Cross-Domain
  • Einführung in die domänenübergreifende Prinzipanalyse und Implementierung von JSONP
  • JSONP-Prinzip und -Verwendung
  • Verwenden eines Skripts zum Erstellen domänenübergreifender HTTP-Anforderungen: JSONP-Implementierungsprinzip und Code
  • js/ajax Cross-Access-jsonp-Prinzip und Beispiel (Javascript- und JQuery-Implementierungscode)

<<:  Docker-Container-Protokollanalyse

>>:  Detaillierte Erläuterung des Prinzips verteilter Sperren und drei Implementierungsmethoden

Artikel empfehlen

Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen einer PHP-Betriebssystemumgebung in der CentOS7-Umgebung

Verwandte Artikel: Installieren Sie Docker mit yu...

Detaillierte Einführung in das CSS-Prioritätswissen

Bevor wir über die CSS-Priorität sprechen, müssen...

Webentwicklungs-Tutorial: domänenübergreifende Lösung – detaillierte Erläuterung

Vorwort Dieser Artikel stellt hauptsächlich die d...

Klicken Sie auf die Schaltfläche, um den Text in ein Eingabefeld umzuwandeln. Klicken Sie auf „Speichern“, um ihn in Textimplementierungscode umzuwandeln.

Klicken Sie auf die Schaltfläche, um den Text in ...

Der MySQL-Server wird mit der Option --skip-grant-tables ausgeführt.

Der MySQL-Server läuft mit der Option --skip-gran...

MySQL 8.0.16 Installations- und Konfigurations-Tutorial unter Windows 10

In diesem Artikel finden Sie das grafische Tutori...

Detaillierte Erläuterung der Selbstimplementierung von Dispatch und Broadcast (Dispatch und Broadcast) durch Vue

Zu lösendes Problem Hauptsächlich für die ebenenü...

Detaillierte Erklärung zum Aktivieren des https-Dienstes in Apache unter Linux

Dieser Artikel beschreibt, wie man den https-Dien...

Detaillierte Erläuterung von vite + ts zum schnellen Erstellen von Vue3-Projekten und zur Einführung verwandter Funktionen

Inhaltsverzeichnis vite Bauen Konfiguration vite....

Zusammenfassung der vier Möglichkeiten zum Durchlaufen eines Arrays in JS

Dieser Artikel vergleicht und fasst vier Möglichk...

Zusammenfassung der Konstruktor- und Superwissenspunkte in React-Komponenten

1. Einige Tipps zu mit class in react deklarierte...

Der Unterschied zwischen absolutem und relativem Pfad bei der Webseitenerstellung

1. Absoluter Pfad Zunächst einmal bezieht sich de...

Analyse des Prozesses zur Konfiguration einer einfachen Netzwerkumgebung basierend auf der Sprache Tcl

1. Tcl-Skriptdatei circle.tcl Codekommentare #Leg...

So berechnen Sie mit Linux den von zeitgesteuerten Dateien belegten Speicherplatz

Öffnen Sie den Editor für geplante Aufgaben. Cent...

Einführung in die Verwendung des MySQL mysqladmin-Clients

Inhaltsverzeichnis 1. Überprüfen Sie den Status d...