JSONP
JSONP je metoda pro odesílání dat JSON bez obav z problémů mezi doménami.
JSONP objekt nepoužívá XMLHttpRequest.
JSONP místo toho používá <script>značku.
Úvod do JSONP
JSONP je zkratka pro JSON with Padding.
Vyžádání souboru z jiné domény může způsobit problémy kvůli zásadám mezi doménami.
Vyžádání externího skriptu z jiné domény tento problém nemá.
JSONP využívá této výhody a požaduje soubory pomocí značky skriptu namísto XMLHttpRequestobjektu.
<script src="demo_jsonp.php">
Soubor serveru
Soubor na serveru zabalí výsledek do volání funkce:
Příklad
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Výsledek vrátí volání funkce s názvem „myFunc“ s daty JSON jako parametrem.
Ujistěte se, že funkce na klientovi existuje.
Funkce JavaScript
Funkce s názvem „myFunc“ se nachází na klientovi a je připravena zpracovávat data JSON:
Příklad
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Vytvoření značky dynamického skriptu
Výše uvedený příklad spustí funkci "myFunc" při načítání stránky podle toho, kam jste umístili značku skriptu, což není příliš uspokojivé.
Značka skriptu by měla být vytvořena pouze v případě potřeby:
Příklad
Vytvořte a vložte značku <script> po kliknutí na tlačítko:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Dynamický výsledek JSONP
Výše uvedené příklady jsou stále velmi statické.
Udělejte příklad dynamickým odesláním JSON do souboru php a nechte soubor php vrátit objekt JSON na základě informací, které získá.
soubor PHP
<?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).")";
?>
Vysvětlení souboru PHP:
- Převeďte požadavek na objekt pomocí funkce PHP json_decode() .
- Vstupte do databáze a vyplňte pole požadovanými údaji.
- Přidejte pole k objektu.
- Převeďte pole na JSON pomocí funkce json_encode() .
- Obalte "myFunc()" kolem vráceného objektu.
Příklad JavaScriptu
Funkce "myFunc" bude volána ze souboru php:
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;
}
Funkce zpětného volání
Když nemáte nad souborem serveru žádnou kontrolu, jak přimějete, aby soubor serveru volal správnou funkci?
Někdy soubor serveru nabízí funkci zpětného volání jako parametr:
Příklad
Soubor php zavolá funkci, kterou předáte jako parametr zpětného volání:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);