Detaillierte Erklärung von JSON und JSONP in JS

Die einfache Verwendung von JSON kann keine domänenübergreifenden Ressourcenanforderungen unterstützen. Um dieses Problem zu lösen, muss das JSONP-Dateninteraktionsprotokoll übernommen werden. Wie wir alle wissen, ist der Aufruf von js-Dateien nicht dadurch eingeschränkt, ob sie domänenübergreifend sind oder nicht. Wenn Sie also über die reine Webseite auf Daten domänenübergreifend zugreifen möchten, können Sie nur versuchen, die JSON-Daten einzukapseln Eine Datei im JS-Format auf dem Remote-Server, die der Client aufrufen und weiterverarbeiten kann. Dies ist das Prinzip des JSONP-Protokolls.

JSON und JSONP

JSONP ist eine Möglichkeit, JSON-Daten zu senden, ohne sich über domänenübergreifende Probleme Gedanken machen zu müssen. JSONP verwendet das XMLHttpRequest-Objekt nicht. JSONP verwendet stattdessen das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag.
Aufgrund der domänenübergreifenden Richtlinie kann das Anfordern von Dateien von einer anderen Domäne zu Problemen führen. Beim Anfordern eines externen Skripts von einer anderen Domäne tritt dieses Problem nicht auf. JSONP nutzt dies aus und fordert Dateien mithilfe von Skript-Tags anstelle von XMLHttpRequest-Objekten an.

<script src="demo_jsonp.php">

Serverdatei

Die Datei auf dem Server verpackt das Ergebnis in einen Funktionsaufruf:

<?php
$myJSON = &#39;{"name":"John", "age":30, "city":"New York"}&#39;;
echo "myFunc(".$myJSON.");";
?>

Das Ergebnis gibt einen Aufruf einer Funktion namens „myFunc“ mit JSON-Daten als Parameter zurück. Stellen Sie sicher, dass die Funktionalität auf dem Client vorhanden ist.

JavaScript-Funktion

Die Funktion namens „myFunc“ befindet sich auf der Clientseite und ist bereit, JSON-Daten zu verarbeiten:

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.send("x=" + dbParam);

Erstellen Sie ein dynamisches Skript-Tag

Je nachdem, wo Sie das platzieren Skript-Tag oben Das Beispiel führt die Funktion „myFunc“ aus, wenn die Seite geladen wird, was nicht sehr zufriedenstellend ist. Das Skript-Tag sollte nur bei Bedarf erstellt werden:
Erstellen Sie das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag und fügen Sie es ein, wenn auf die Schaltfläche geklickt wird:

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

Dynamische JSONP-Ergebnisse

Das obige Beispiel ist immer noch sehr statisch. Gestalten Sie das Beispiel dynamisch, indem Sie JSON an eine PHP-Datei senden und die PHP-Datei ein JSON-Objekt basierend auf den erhaltenen Informationen zurückgeben lassen.
PHP-Datei

<?phpheader("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-Dateierklärung:
Verwenden Sie die PHP-Funktion json_decode(), um die Anfrage in ein Objekt umzuwandeln.
Greifen Sie auf die Datenbank zu und füllen Sie das Array mit den angeforderten Daten.
Fügen Sie einem Objekt ein Array hinzu.
Konvertieren Sie das Array mit der Funktion json_encode() in JSON.
Wrap „myFunc()“ um das Rückgabeobjekt

JavaScript-Beispiel:

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 + "
";
  }
  document.getElementById("demo").innerHTML = txt;
}

Callback-Funktion

Wie bringt man eine Serverdatei dazu, die richtige Funktion aufzurufen, wenn man keine Kontrolle darüber hat? Manchmal stellt die Serverdatei eine Rückruffunktion als Parameter bereit:
php-Datei ruft die Funktion auf, die Sie als Rückrufparameter übergeben:
PHP-Datei:

<?php
$callback = trim($_GET(&#39;callback&#39;));
$myJSON = &#39;{ "name":"John", "age":30, "city":"New York" }&#39;;
echo $callback."(".$myJSON.");";
?>

javascript :

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

Weitere Programmierkenntnisse finden Sie unter: Einführung in Programmieren! !

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von JSON und JSONP in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!