JSONP

Obsah

Zobrazit obsah

JSONP je metoda pro odesílání dat JSON bez obav z problémů mezi doménami.

JSONP nepoužívá objekt XMLHttpRequest.

JSONP místo toho používá značku <script>.

Ú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 scriptu z jiné domény tento problém nemá.

JSONP využívá této výhody a požaduje soubory pomocí značky skriptu místo objektu XMLHttpRequest.

 <script src="demo_jsonp.php">

Soubor serveru

Soubor na serveru zabalí výsledek do a 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 as parametr.

Ujistěte se, že funkce na klientovi existuje.

Funkce JavaScript

Funkce s názvem "myFunc" je umístěna na klientovi a je připravena ke zpracování Data JSON:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Request JSON using the script tag</h2>
<p>The PHP file returns a call to a function that will handle the JSON data.</p>
<p id="demo"></p>

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

<script src="demo_jsonp.php"></script>

</body>
</html>

Vytvoření značky dynamického skriptu

Výše uvedený příklad spustí funkci "myFunc", když je stránka načítání, 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

Po kliknutí na tlačítko vytvořte a vložte značku <script>:

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

Zkuste to sami →

<!DOCTYPE html>
<html>

<body>

<h2>Click the Button.</h2>
<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with the JSON object as a parameter.</p>

<button onclick="clickButton()">Click me!</button>

<p id="demo"></p>

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

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

</body>
</html>

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 založený na informace, které dostane.

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 do 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with an object as a parameter.</p>
<p id="demo"></p>

<p>Try changing the table property from "customers" to "products".</p>

<script>
const obj = { table: "customers", 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;
}
</script>

</body>
</html>

Funkce zpětného volání

Když nemáte kontrolu nad souborem serveru, jak získáte soubor serveru zavolat 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);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Request With a Callback Function</h2>
<p>The PHP file returns a call to the function you send as a callback.</p>
<p id="demo"></p>

<script>
let s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction";
document.body.appendChild(s);

function myDisplayFunction(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

</body>
</html>