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

Implementierung der Elementzeitleiste

Inhaltsverzeichnis Komponenten - Zeitleiste Benut...

Redo-Dateiwartungsmethode der InnoDB-Engine

Wenn Sie die Größe und Anzahl der InnoDB-Redo-Log...

Implementierung der Formatierung von Partitionen und der Einbindung in Centos7

Unter Linux treten häufig Situationen auf, in den...

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie die vue3.0-Projektarchitektur erstellen

Inhaltsverzeichnis Vorwort: 1. Erstellen Sie ein ...

Detaillierte Erläuterung des Funktionsprinzips der Ausführungsanforderung von Nginx + PHP

So funktioniert PHP Lassen Sie uns zunächst die B...

Grundlegendes zur JavaScript-Prototypenkette

Inhaltsverzeichnis 1. Verständnis der Gleichheits...

Vue implementiert Dialogkapselung

Inhaltsverzeichnis Vue2-Schreiben Schreiben der V...

Hinweise zum Proc-Dateisystem des Linux-Kernel-Gerätetreibers

/***************** * proc-Dateisystem************...

Beispielanalyse für MySQL-Jointabelle und automatische ID-Inkrementierung

Wie schreibt man „join“? Wenn Sie „Left Join“ ver...

Methode zur Verhinderung von SSH-Cracking auf Linux-Servern (empfohlen)

1. Der Linux-Server konfiguriert /etc/hosts.deny ...

jQuery realisiert die volle Funktion des Einkaufswagens

In diesem Artikel wird der spezifische Code von j...

Eine kurze Diskussion über die Optimierung von MySQL-Paging für Milliarden von Daten

Inhaltsverzeichnis Hintergrund analysieren Datens...

Beheben Sie das Problem, dass beim Herunterfahren von Tomcat mit shutdown.bat auch andere Tomcats heruntergefahren werden.

Die Datei shutdown.bat enthält einen Satz wenn ni...

Verwendung der MySQL-Anweisung „truncate table“

Mit der Anweisung „Truncate table“ werden alle Da...

Implementierung eines Tomcat-Images, das mit Dockerfile basierend auf Alpine erstellt wurde

1. Laden Sie das Alpenbild herunter [root@docker4...