JSONP est une méthode permettant d'envoyer des données JSON sans se soucier des problèmes inter-domaines.
JSONP n'utilise pas l'objet XMLHttpRequest
.
JSONP utilise à la place la balise <script>
.
JSONP signifie JSON avec rembourrage.
Demander un fichier à un autre domaine peut entraîner des problèmes, en raison de la politique inter-domaines.
Demander un script externe à partir d'un autre domaine ne pose pas ce problème.
JSONP utilise cet avantage et demande des fichiers à l'aide de la balise script au lieu de l'objet XMLHttpRequest
.
<script src="demo_jsonp.php">
Le fichier sur le serveur enveloppe le résultat dans un appel de fonction :
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Le résultat renvoie un appel à une fonction nommée "myFunc" avec les données JSON comme un paramètre.
Assurez-vous que la fonction existe sur le client.
La fonction nommée "myFunc" est située sur le client, et prête à être gérée Données JSON :
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Essayez-le vous-même →
<!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>
L'exemple ci-dessus exécutera la fonction "myFunc" lorsque la page est chargement, en fonction de l'endroit où vous placez la balise script, ce qui n'est pas très satisfaisant.
La balise de script ne doit être créée qu'en cas de besoin :
Créez et insérez la balise <script> lorsqu'un bouton est cliqué :
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Essayez-le vous-même →
<!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>
Les exemples ci-dessus sont encore très statiques.
Rendez l'exemple dynamique en envoyant JSON au fichier php et laissez le fichier php renvoyer un objet JSON basé sur les informations qu'il obtient.
<?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).")";
?>
Convertir la requête en objet, à l'aide de la fonction PHP json_decode().
Accédez à la base de données et remplissez un tableau avec les données demandées.
Ajoutez le tableau à un objet.
Convertissez le tableau en JSON en utilisant la fonction json_encode().
Enroulez "myFunc()" autour de l'objet de retour.
La fonction "myFunc" sera appelée depuis le fichier 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;
}
Essayez-le vous-même →
<!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>
Lorsque vous n'avez aucun contrôle sur le fichier serveur, comment obtenir le fichier serveur appeler la bonne fonction ?
Parfois, le fichier du serveur propose une fonction de rappel comme un paramètre :
Le fichier php appellera la fonction que vous passez en paramètre de rappel :
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
Essayez-le vous-même →
<!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>