Verstehen Sie die Prinzipien und Anwendungen von JSONP in einem Artikel

Inhaltsverzeichnis

Was ist JSONP
JSONP-Prinzip
JSONP-Implementierung

1. Was passiert, wenn eine domänenübergreifende Anfrage in Ajax gestellt wird?
2. Verwenden Sie JSONP, um die Ajax-Anforderung im Front-End-Code zu entfernen
3. Ändern Sie den Front-End-Code erneut
4. Schließlich bietet jQuery eine bequeme Möglichkeit, JSONP zu verwenden

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

So mounten Sie eine Datenfestplatte auf Tencent Cloud Server Centos

Detaillierte Erläuterung von MySQL zum Abrufen statistischer Daten für jeden Tag und jede Stunde eines bestimmten Zeitraums

Artikel

Verstehen Sie die Prinzipien und Anwendungen von JSONP in einem Artikel

Inhaltsverzeichnis

Was ist JSONP

JSONP-Prinzip

JSONP-Implementierung

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

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

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

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

So mounten Sie eine Datenfestplatte auf Tencent Cloud Server Centos

CSS-Rahmen fügt Implementierungscode für vier Ecken hinzu

Detaillierte Erklärung der Befehle zum Anzeigen von Linux-Dateien

Linux-Befehlszeilenoperation Hochladen und Herunterladen von Dateien in der Baidu-Cloud

web.config (IIS) und .htaccess (Apache) Konfiguration

So importieren Sie Tomcat-Quellcode in Idea

Detaillierte Erläuterung der gleichzeitigen Parameteranpassung von MySQL

CSS3 realisiert den leuchtenden Randeffekt

So stellen Sie über Navicat eine Remoteverbindung zu MySQL her

Detaillierte Erläuterung von MySQL zum Abrufen statistischer Daten für jeden Tag und jede Stunde eines bestimmten Zeitraums

Artikel empfehlen

Lernen Sie, mit Eclipse eine Verbindung zur MySQL-Datenbank herzustellen

Vorgang zur Zeitzonenanpassung im Docker-Container

Neunundvierzig JavaScript-Tipps und Tricks

Detaillierte Erklärung verschiedener horizontaler und vertikaler Zentrierungsmethoden in HTML (Grundlagen)

Probleme mit der Rancher-Bereitstellung und dem Importieren von K8S-Clustern

25 Tipps und Tricks zur Div+CSS-Programmierung

JavaScript implementiert einfache Rechnerfunktion

So erstellen Sie https mit Nginx und dem kostenlosen Tencent Cloud-Zertifikat

JavaScript-Plugin-Kapselung für Tabellenwechsel

Uniapp WeChat-Applet: Lösung bei Schlüsselfehler

Detaillierte Erklärung der Unterschiede zwischen var, let und const in JavaScript es6

CentOS7-Konfiguration Alibaba Cloud Yum-Quellmethodencode

Verwenden Sie den Befehl ip netns in Linux, um den Netzwerkport zu isolieren und die IP-Adresse zu konfigurieren

Detaillierte Erklärung zur Installation von MySQL in der Alibaba Cloud

Implementierung eines Nginx-Load-Balancing-Clusters