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 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">
Filen på servern lindar resultatet inuti en funktionsanrop:
<?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.
Funktionen med namnet "myFunc" finns på klienten och redo att hanteras JSON-data:
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>
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:
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>
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
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).")";
?>
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.
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>
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:
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>