JSONP


Innehållsförteckning

    Visa innehållsförteckning


JSONP är en metod för att skicka JSON-data utan att oroa dig för problem över flera domäner.

JSONP använder inte objektet XMLHttpRequest.

JSONP använder taggen ><script> istället.


JSONP Intro

JSONP står för JSON with Padding.

Att begära en fil från en annan domän kan orsaka problem på grund av policy för flera domäner.

Att begära ett externt skript från en annan domän har inte detta problem.

JSONP använder denna fördel och begär filer med hjälp av skripttaggen istället för XMLHttpRequest-objektet.

 <script src="demo_jsonp.php">

Serverfilen

Filen på servern lindar resultatet inuti en funktionsanrop:

Exempel

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

Resultatet returnerar ett anrop till en funktion som heter "myFunc" med JSON-data som en parameter.

Se till att funktionen finns på klienten.

JavaScript-funktionen

Funktionen med namnet "myFunc" finns på klienten och redo att hanteras JSON-data:

Exempel

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

Prova själv →

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


Skapa en dynamisk skripttagg

Exemplet ovan kommer att köra "myFunc"-funktionen när sidan är laddning, baserat på var du placerar skripttaggen, vilket inte är särskilt tillfredsställande.

Skripttaggen ska bara skapas när det behövs:

Exempel

Skapa och infoga <script>-taggen när en knapp klickas:

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

Prova själv →

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

Dynamiskt JSONP-resultat

Exemplen ovan är fortfarande väldigt statiska.

Gör exemplet dynamiskt genom att skicka JSON till php-filen och låt php-filen returnera ett JSON-objekt baserat på informationen 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 förklaras:

  • Konvertera begäran till ett objekt med PHP-funktionen json_decode().

  • Gå till databasen och fyll en array med de begärda uppgifterna.

  • Lägg till arrayen till ett objekt.

  • Konvertera arrayen till JSON med hjälp av funktionen json_encode().

  • Linda "myFunc()" runt returobjektet.

JavaScript-exempel

Funktionen "myFunc" kommer att anropas från 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;
}

Prova själv →

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

Återuppringningsfunktion

När du inte har kontroll över serverfilen, hur får du serverfilen anropa rätt funktion?

Ibland erbjuder serverfilen en återuppringningsfunktion som en parameter:

Exempel

php-filen kommer att anropa funktionen du skickar som en callback-parameter:

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

Prova själv →

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