JSONP

Sisällysluettelo

Näytä sisällysluettelo

JSONP on menetelmä JSON-tietojen lähettämiseen verkkotunnusten välisistä ongelmista huolehtimatta.

JSONP ei käytä XMLHttpRequest-objektia.

JSONP käyttää sen sijaan <script>-tunnistetta.

JSONP Intro

JSONP tulee sanoista JSON with Padding.

Tiedoston pyytäminen toisesta toimialueesta voi aiheuttaa ongelmia verkkotunnusten välisen käytännön vuoksi.

Ulkoisen komentosarjan pyytäminen toisesta verkkotunnuksesta ei aiheuta tätä ongelmaa.

JSONP käyttää tätä etua ja pyytää tiedostoja komentosarjatunnisteen avulla XMLHttpRequest-objektin sijaan.

 <script src="demo_jsonp.php">

Palvelintiedosto

Palvelimella oleva tiedosto käärii tuloksen a:n sisään funktiokutsu:

Esimerkki

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

Tulos palauttaa kutsun "myFunc"-nimiselle funktiolle JSON-tietojen kanssa parametri.

Varmista, että toiminto on olemassa asiakaskoneessa.

JavaScript-toiminto

Funktio nimeltä "myFunc" sijaitsee asiakkaassa ja on valmis käsiteltäväksi JSON-tiedot:

Esimerkki

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

Kokeile itse →

<!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>

Dynaamisen komentosarjatunnisteen luominen

Yllä oleva esimerkki suorittaa "myFunc"-toiminnon, kun sivu on lataaminen sen mukaan, mihin skriptitunnisteen asetit, mikä ei ole kovin tyydyttävää.

Komentosarjatunniste tulee luoda vain tarvittaessa:

Esimerkki

Luo ja lisää <script>-tunniste, kun painiketta napsautetaan:

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

Kokeile itse →

<!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>

Dynaaminen JSONP-tulos

Yllä olevat esimerkit ovat edelleen hyvin staattisia.

Tee esimerkistä dynaaminen lähettämällä JSON php-tiedostoon ja anna php-tiedoston palauttaa JSON-objektin saamansa tiedot.

PHP-tiedosto

 <?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-tiedosto selitetty:

Muunna pyyntö objektiksi PHP-funktion avulla json_decode().
Siirry tietokantaan ja täytä matriisi pyydetyillä tiedoilla.
Lisää taulukko objektiin.
Muunna taulukko JSON-muotoon käyttämällä json_encode()-funktio.
Kääri "myFunc()" palautusobjektin ympärille.

JavaScript esimerkki

Funktio "myFunc" kutsutaan php-tiedostosta:

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

Kokeile itse →

<!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>

Takaisinsoittotoiminto

Kun et voi hallita palvelintiedostoa, miten saat palvelintiedoston kutsua oikeaa toimintoa?

Joskus palvelintiedosto tarjoaa takaisinsoittotoiminnon kuten parametri:

Esimerkki

Php-tiedosto kutsuu takaisinkutsun parametrina välittämääsi funktiota:

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

Kokeile itse →

<!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>