JSONP


Table des matières

    Afficher la table des matières


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


Introduction à JSONP

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 serveur

Le fichier sur le serveur enveloppe 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 un 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 à être gérée Données JSON :

Exemple

 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>


Création d'une balise de script dynamique

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 :

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

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>

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 basé sur les 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é :

  • 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.

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

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>

Fonction de rappel

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 :

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

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>