JSONP ist eine Methode zum Senden von JSON-Daten, ohne sich um domänenübergreifende Probleme kümmern zu müssen.
JSONP verwendet nicht das XMLHttpRequest
-Objekt.
JSONP verwendet stattdessen das Tag <script>
.
JSONP steht für JSON mit Polsterung.
Das Anfordern einer Datei von einer anderen Domäne kann aufgrund domänenübergreifender Richtlinien zu Problemen führen.
Beim Anfordern eines externen Skripts von einer anderen Domäne tritt dieses Problem nicht auf.
JSONP nutzt diesen Vorteil und fordert Dateien mithilfe des Skript-Tags an anstelle des XMLHttpRequest
-Objekts.
<script src="demo_jsonp.php">
Die Datei auf dem Server verpackt das Ergebnis in eine Funktionsaufruf:
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Das Ergebnis gibt einen Aufruf einer Funktion namens „myFunc“ mit den JSON-Daten zurück ein Parameter.
Stellen Sie sicher, dass die Funktion auf dem Client vorhanden ist.
Die Funktion „myFunc“ befindet sich auf dem Client und ist betriebsbereit JSON-Daten:
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>Request JSON using the script tag</h2>
<p>The PHP file returns a call to a function that will handle the JSON data.</p>
<p id="demo"></p>
<script>
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
<script src="demo_jsonp.php"></script>
</body>
</html>
Das obige Beispiel führt die Funktion „myFunc“ aus, wenn die Seite geöffnet ist Laden, basierend darauf, wo Sie das Skript-Tag platziert haben, was nicht sehr zufriedenstellend ist.
Das Skript-Tag sollte nur bei Bedarf erstellt werden:
Erstellen Sie das <script>-Tag und fügen Sie es ein, wenn auf eine Schaltfläche geklickt wird:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>Click the Button.</h2>
<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with the JSON object as a parameter.</p>
<button onclick="clickButton()">Click me!</button>
<p id="demo"></p>
<script>
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
</body>
</html>
Die obigen Beispiele sind noch sehr statisch.
Machen Sie das Beispiel dynamisch, indem Sie JSON an die PHP-Datei senden und die PHP-Datei ein darauf basierendes JSON-Objekt zurückgeben lassen die Informationen, die es erhält.
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =
json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM
".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>
Konvertieren Sie die Anfrage mithilfe der PHP-Funktion in ein Objekt json_decode().
Greifen Sie auf die Datenbank zu und füllen Sie ein Array mit den angeforderten Daten.
Fügen Sie das Array einem Objekt hinzu.
Konvertieren Sie das Array mit in JSON die Funktion json_encode().
Wickeln Sie „myFunc()“ um das Rückgabeobjekt.
Die Funktion „myFunc“ wird aus der PHP-Datei aufgerufen:
const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
function myFunc(myObj) {
let txt = "";
for (let x in myObj)
{
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with an object as a parameter.</p>
<p id="demo"></p>
<p>Try changing the table property from "customers" to "products".</p>
<script>
const obj = { table: "customers", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
function myFunc(myObj) {
let txt = "";
for (let x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Wenn Sie keine Kontrolle über die Serverdatei haben, wie erhalten Sie die Serverdatei? die richtige Funktion aufrufen?
Manchmal bietet die Serverdatei eine Rückruffunktion als ein Parameter:
Die PHP-Datei ruft die Funktion auf, die Sie als Callback-Parameter übergeben:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>Request With a Callback Function</h2>
<p>The PHP file returns a call to the function you send as a callback.</p>
<p id="demo"></p>
<script>
let s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction";
document.body.appendChild(s);
function myDisplayFunction(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
</body>
</html>