JSONP

JSONP ist eine Methode, um JSON-Daten zu übertragen, ohne sich um das Cross-Domain-Problem kümmern zu müssen.

JSONP verwendet kein XMLHttpRequest-Objekt.

Verwendung von JSONP <script> Der Tag ersetzt.

Einführung in JSONP

JSONP steht für JSON with Padding.

Die Anfrage einer Datei aus einem anderen Dom verursacht ein Problem, aufgrund der Cross-Domain-Politik.

Die Anfrage eines externen Skripts aus einem anderen Dom hat dieses Problem nicht.

JSONP nutzt diese Vorteile und ersetzt den XMLHttpRequest-Objekt durch den script-Tag.

<script src="demo_jsonp.php">

Server-Datei

Die Datei auf dem Server verpackt das Ergebnis im Funktionsaufruf:

Beispiel

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>

Zeige die PHP-Datei an

Die Ergebnisse sind der Aufruf der Funktion "myFunc" mit dem JSON-Daten als Parameter.

Stellen Sie sicher, dass die Funktion auf dem Client existiert.

JavaScript-Funktion

Die Funktion "myFunc" befindet sich auf dem Client und wird zur Verarbeitung von JSON-Daten verwendet:

Beispiel

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

Versuchen Sie es selbst

Erstellen Sie dynamische Skript-Tags

Das obige Beispiel führt die Funktion "myFunc" beim Laden der Seite aus, was je nach Position des Skript-Tags nicht sehr zufriedenstellend ist.

Das Skript sollte nur dann erstellt werden, wenn es erforderlich ist:

Beispiel

Erstellen und einfügen Sie das <script>-Tag, wenn der Button geklickt wird:

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php";
    document.body.appendChild(s);
}

Versuchen Sie es selbst

Dynamische JSONP-Ergebnisse

Das obige Beispiel ist statisch.

Dynamische Beispiele können erstellt werden, indem JSON an die PHP-Datei gesendet wird, und dann wird ein JSON-Objekt basierend auf dieser Information zurückgegeben.

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).")";
?>

Erklärung der PHP-Datei:

  • Konvertieren Sie die Anfrage in ein Objekt und verwenden Sie die PHP-Funktion json_decode().
  • Datenbank abrufen und die geforderten Daten in das Array einfügen.
  • Fügen Sie das Array dem Objekt hinzu.
  • Verwenden json_decode() Die Funktion konvertiert das Array in JSON.
  • Das Rückgabeobjekt wird durch "myFunc()" verpackt.

JavaScript-Beispiel

Die Funktion "myFunc" wird aus einer php-Datei aufgerufen:

function clickButton() {
    var obj, s
    obj = { "table":"products", "limit":10 };
    s = document.createElement("script");
    s.src = "jsonp_demo_db.php?x="  + JSON.stringify(obj);
    document.body.appendChild(s);
 }
function myFunc(myObj)  {
    var x, txt = "";
    for (x in myObj)  {
        txt += myObj[x].name + "<br>";
     }
    document.getElementById("demo").innerHTML = txt;
}

Versuchen Sie es selbst

Callback-Funktion

Wenn Sie die Serverdatei nicht steuern können, wie machen Sie die Serverdatei, dass sie die richtige Funktion aufruft?

Manchmal bietet die Serverdatei eine Callback-Funktion als Parameter an:

Beispiel

Die PHP-Datei ruft die Funktion auf, die Sie als Callback-Parameter übergeben:

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}

Versuchen Sie es selbst