JSONP-Tutorial

Jsonp (JSON with Padding) ist eine "Verwendungsmuster" von json, die es Webseiten ermöglicht, Daten von anderen Domänen (Webseiten) zu erhalten, d.h. Daten über Domänen zu lesen.

Was ist JSONP?

JSONP bedeutet JSON mit Füllung.

Aufgrund der Cross-Domain-Strategie kann eine Anforderung an eine Datei von einem anderen Domäne zu Problemen führen.

Eine Anforderung an ein externes Skript von einem anderen Domäne führt nicht zu diesem Problem.

JSONP nutzt diese Stärke und verwendet<script>Anstatt eines XMLHttpRequest-Objekts wird ein Tag verwendet, um die Datei anzufordern.

　　<script src="jsonp_demo.php">

Die Datei auf dem Server (jsonp_demo.php) packt das Ergebnis in eine Funktionsaufruf ein:

　　<?php
　　$myJSON = '{ "name":"Seagull", "age":32, "city":"New Delhi" }';
　　echo "myFunc(".$myJSON.");";
　　?>

Die Funktion "myFunc" befindet sich auf dem Client und kann JSON-Daten verarbeiten:

function myFunc(myObj) {
　　document.getElementById("output").innerHTML = myObj.name;
}

Unterschied zwischen JSON und JSONP

JSON: JavaScript verwendet JSON (JavaScript Object Notation) zum Austausch von Daten über das Netzwerk. Es betrachtet die JSON-Daten sorgfältig und es ist nur ein als String formatierter JavaScript-Objekt.

　　{ "name":"Seagull", "age":22, "city":"New Delhi" })

JSONP: JSONP ist gefülltes JSON. Hier bedeutet das Füllen, dass die Funktion in JSON gewickelt wird und dann in die Anfrage zurückgegeben wird.

　　myFunc({ "name":"Seagull", "age":22, "city":"New Delhi" })

Verwendungsmethoden von JSONP

• Fügen Sie im HTML-Code das script-Symbol ein. Die Quelle des Skripts ist die URL, aus der die Daten abgerufen werden sollen. Der Webdienst ermöglicht die Angabe eines Callback-Funktion. Am Ende der URL enthält der callback-Parameter.

• Wenn der Browser auf das script-Element stößt, sendet er einen HTTP-Anfrage an die Quell-URL.

• Der Server sendet die Antwort zurück, die in einer Funktionaufrufverpackten JSON enthält.

• Der Browser analysiert die JSON-Antwort in Stringform und konvertiert sie in ein JavaScript-Objekt. Rufen Sie die Callback-Funktion auf und übergeben Sie das erstellte Objekt daran.

Dynamisches Erstellen von Skript-Tag

Das obige Beispiel führt die Funktion "myFunc" aus, wenn die Seite geladen wird, basierend auf der Position des script-Symbols.

Das Skript-Tag sollte jedoch nur bei Bedarf erstellt werden.

Der folgende Beispiel erstellt und fügt beim Klicken auf die Schaltfläche ein<script>Markierung:

function createScriptDynamically() {
　　var elem = document.createElement("script");
　　elem.src = "jsonp_demo.php";
　　document.body.appendChild(elem);
}