JSONP
JSONP is een methode om JSON-gegevens te verzenden zonder dat u zich zorgen hoeft te maken over domeinoverschrijdende problemen.
JSONP gebruikt het XMLHttpRequest
object niet.
JSONP gebruikt <script>
in plaats daarvan de tag.
JSONP Intro
JSONP staat voor JSON met opvulling.
Het aanvragen van een bestand uit een ander domein kan vanwege domeinoverschrijdend beleid problemen veroorzaken.
Het aanvragen van een extern script van een ander domein heeft dit probleem niet.
JSONP maakt gebruik van dit voordeel en vraagt bestanden aan met behulp van de scripttag in plaats van het XMLHttpRequest
object.
<script src="demo_jsonp.php">
Het serverbestand
Het bestand op de server verpakt het resultaat in een functieaanroep:
Voorbeeld
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Het resultaat retourneert een aanroep naar een functie met de naam "myFunc" met de JSON-gegevens als parameter.
Zorg ervoor dat de functie op de client bestaat.
De JavaScript-functie
De functie met de naam "myFunc" bevindt zich op de client en is klaar om JSON-gegevens te verwerken:
Voorbeeld
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Een dynamische scripttag maken
In het bovenstaande voorbeeld wordt de functie "myFunc" uitgevoerd wanneer de pagina wordt geladen, op basis van waar u de scripttag plaatst, wat niet erg bevredigend is.
De scripttag mag alleen worden gemaakt als dat nodig is:
Voorbeeld
Maak en voeg de tag <script> in wanneer op een knop wordt geklikt:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Dynamisch JSONP-resultaat
Bovenstaande voorbeelden zijn nog erg statisch.
Maak het voorbeeld dynamisch door JSON naar het php-bestand te sturen en laat het php-bestand een JSON-object retourneren op basis van de informatie die het krijgt.
PHP-bestand
<?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-bestand uitgelegd:
- Converteer het verzoek naar een object met behulp van de PHP-functie json_decode() .
- Open de database en vul een array met de gevraagde gegevens.
- Voeg de array toe aan een object.
- Converteer de array naar JSON met behulp van de functie json_encode() .
- Wikkel "myFunc()" rond het geretourneerde object.
JavaScript-voorbeeld
De functie "myFunc" wordt aangeroepen vanuit het php-bestand:
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;
}
Terugbelfunctie
Als je geen controle hebt over het serverbestand, hoe zorg je er dan voor dat het serverbestand de juiste functie aanroept?
Soms biedt het serverbestand een callback-functie als parameter:
Voorbeeld
Het php-bestand roept de functie aan die u als callback-parameter doorgeeft:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);