JSONP
JSONP ist eine Methode zum Senden von JSON-Daten, ohne sich Gedanken über domänenübergreifende Probleme machen zu müssen.
JSONP verwendet das XMLHttpRequestObjekt nicht.
JSONP verwendet <script>stattdessen das Tag.
JSONP-Einführung
JSONP steht für JSON mit Padding.
Das Anfordern einer Datei von einer anderen Domäne kann aufgrund von domänenübergreifenden Richtlinien zu Problemen führen.
Das Anfordern eines externen Skripts von einer anderen Domäne hat dieses Problem nicht.
JSONP nutzt diesen Vorteil und fordert Dateien mit dem script-Tag anstelle des XMLHttpRequestObjekts an.
<script src="demo_jsonp.php">
Die Serverdatei
Die Datei auf dem Server verpackt das Ergebnis in einen Funktionsaufruf:
Beispiel
<?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 als Parameter zurück.
Stellen Sie sicher, dass die Funktion auf dem Client vorhanden ist.
Die JavaScript-Funktion
Die Funktion mit dem Namen "myFunc" befindet sich auf dem Client und ist bereit, JSON-Daten zu verarbeiten:
Beispiel
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Erstellen eines dynamischen Skript-Tags
Das obige Beispiel führt die „myFunc“-Funktion aus, wenn die Seite geladen wird, basierend darauf, wo Sie das script-Tag platzieren, was nicht sehr zufriedenstellend ist.
Das script-Tag sollte nur bei Bedarf erstellt werden:
Beispiel
Erstellen Sie das Tag <script> 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);
}
Dynamisches JSONP-Ergebnis
Die obigen Beispiele sind noch sehr statisch.
Machen Sie das Beispiel dynamisch, indem Sie JSON an die PHP-Datei senden, und lassen Sie die PHP-Datei basierend auf den erhaltenen Informationen ein JSON-Objekt zurückgeben.
PHP-Datei
<?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).")";
?>
PHP-Datei erklärt:
- Wandeln Sie die Anfrage mithilfe der PHP-Funktion json_decode() in ein Objekt um .
- 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 der Funktion json_encode() in JSON .
- Wickeln Sie "myFunc()" um das Rückgabeobjekt.
JavaScript-Beispiel
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;
}
Callback-Funktion
Wenn Sie keine Kontrolle über die Serverdatei haben, wie bringen Sie die Serverdatei dazu, die richtige Funktion aufzurufen?
Manchmal bietet die Serverdatei eine Callback-Funktion als Parameter an:
Beispiel
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);