JSONP
JSONP est une méthode pour envoyer des données JSON sans se soucier des problèmes inter-domaines.
JSONP n'utilise pas l' XMLHttpRequestobjet.
JSONP utilise la <script>balise à la place.
Présentation de JSONP
JSONP signifie JSON avec rembourrage.
La demande d'un fichier à partir d'un autre domaine peut entraîner des problèmes, en raison de la politique inter-domaines.
La demande d'un script externe à partir d'un autre domaine n'a pas ce problème.
JSONP utilise cet avantage et demande des fichiers en utilisant la balise de script au lieu de l' XMLHttpRequestobjet.
<script src="demo_jsonp.php">
Le fichier serveur
Le fichier sur le serveur encapsule le résultat dans un appel de fonction :
Exemple
<?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 paramètre.
Assurez-vous que la fonction existe sur le client.
La fonction JavaScript
La fonction nommée "myFunc" est située sur le client et prête à gérer les données JSON :
Exemple
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Création d'une balise de script dynamique
L'exemple ci-dessus exécutera la fonction "myFunc" lors du chargement de la page, en fonction de l'endroit où vous placez la balise de script, ce qui n'est pas très satisfaisant.
La balise de script ne doit être créée qu'en cas de besoin :
Exemple
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);
}
Résultat JSONP dynamique
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 en fonction des informations qu'il obtient.
Fichier PHP
<?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).")";
?>
Fichier PHP expliqué :
- Convertissez 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 à l'aide de la fonction json_encode() .
- Enroulez "myFunc()" autour de l'objet de retour.
Exemple JavaScript
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;
}
Fonction de rappel
Lorsque vous n'avez aucun contrôle sur le fichier serveur, comment faites-vous pour que le fichier serveur appelle la fonction correcte ?
Parfois le fichier serveur propose une fonction callback en paramètre :
Exemple
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);