JSONP

Indholdsfortegnelse

Vis indholdsfortegnelse

JSONP er en metode til at sende JSON-data uden at bekymre dig om problemer på tværs af domæner.

JSONP bruger ikke XMLHttpRequest-objektet.

JSONP bruger </script>-tagget i stedet.

JSONP Intro

JSONP står for JSON med polstring.

Anmodning om en fil fra et andet domæne kan forårsage problemer på grund af politikken på tværs af domæner.

Det har ikke dette problem at anmode om et eksternt script fra et andet domæne.

JSONP bruger denne fordel og anmoder om filer ved hjælp af script-tagget i stedet for XMLHttpRequest-objektet.

 <script src="demo_jsonp.php">

Serverfilen

Filen på serveren pakker resultatet ind i en funktionskald:

Eksempel

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

Resultatet returnerer et kald til en funktion ved navn "myFunc" med JSON-dataene som en parameter.

Sørg for, at funktionen findes på klienten.

JavaScript-funktionen

Funktionen med navnet "myFunc" er placeret på klienten og klar til at håndtere JSON data:

Eksempel

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

Prøv det selv →

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

Oprettelse af et dynamisk script-tag

Eksemplet ovenfor vil udføre "myFunc"-funktionen, når siden er loading, baseret på hvor du har sat script-tagget, hvilket ikke er særlig tilfredsstillende.

Script-tagget bør kun oprettes, når det er nødvendigt:

Eksempel

Opret og indsæt <script>-tagget, når der klikkes på en knap:

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

Prøv det selv →

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

Dynamisk JSONP-resultat

Eksemplerne ovenfor er stadig meget statiske.

Gør eksemplet dynamisk ved at sende JSON til php-filen, og lad php-filen returnere et JSON-objekt baseret på den information, den får.

PHP fil

 <?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-fil forklaret:

Konverter anmodningen til et objekt ved hjælp af PHP-funktionen json_decode().
Få adgang til databasen, og fyld et array med de ønskede data.
Tilføj arrayet til et objekt.
Konverter arrayet til JSON vha funktionen json_encode().
Pak "myFunc()" rundt om returobjektet.

JavaScript eksempel

Funktionen "myFunc" kaldes fra php-filen:

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

Prøv det selv →

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

Tilbagekaldsfunktion

Når du ikke har kontrol over serverfilen, hvordan får du serverfilen at kalde den rigtige funktion?

Nogle gange tilbyder serverfilen en tilbagekaldsfunktion som en parameter:

Eksempel

php-filen kalder den funktion, du sender som en tilbagekaldsparameter:

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

Prøv det selv →

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