Explication détaillée de JSON et JSONP dans JS

L'utilisation simple de json ne peut pas prendre en charge les demandes de ressources inter-domaines. Afin de résoudre ce problème, le protocole d'interaction de données jsonp doit être utilisé. Comme nous le savons tous, l'appel de fichiers js n'est pas limité selon qu'il s'agit d'un inter-domaine ou non. Par conséquent, si vous souhaitez accéder à des données inter-domaines via le côté Web pur, vous pouvez uniquement essayer d'encapsuler les données json dans. un fichier au format js sur le serveur distant pour que le client puisse l'appeler et poursuivre le traitement, c'est le principe du protocole jsonp.

JSON et JSONP

JSONP est un moyen 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 3f1c4e4b6b16bbbd69b2ee476dc4f83a
En raison des politiques inter-domaines, demander des fichiers à un autre domaine peut entraîner des problèmes. Demander un script externe à un autre domaine ne pose pas ce problème. JSONP en profite et demande des fichiers à l'aide de balises de script au lieu d'objets XMLHttpRequest.

<script src="demo_jsonp.php">

Fichier du serveur

Un fichier sur le serveur qui enveloppe le résultat dans un appel de fonction :

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

Le résultat renvoie le nom de la paire Un appel à la fonction "myFunc" avec les données JSON en paramètre. Assurez-vous que la fonctionnalité existe sur le client.

Fonction JavaScript

La fonction nommée "myFunc" est située côté client et est prête à traiter les données JSON :

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.send("x=" + dbParam);

Créer une balise de script dynamique

Selon l'endroit où vous placez la balise de script, l'exemple ci-dessus exécutera la fonction "myFunc" au chargement de la page, 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 3f1c4e4b6b16bbbd69b2ee476dc4f83a lorsque vous cliquez sur le bouton :

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

Résultats JSONP dynamiques

L'exemple ci-dessus est encore très statique. Rendez l'exemple dynamique en envoyant JSON à un fichier php et demandez au fichier php de renvoyer un objet JSON basé sur les informations obtenues.
Fichier PHP

<?phpheader("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).")";
?>

Explication du fichier PHP :
Utilisez la fonction PHP json_decode() pour convertir la requête en objet.
Accédez à la base de données et remplissez le tableau avec les données demandées.
Ajouter un 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 :

function clickButton() {
  var obj, s
  obj = { table: "products", limit: 10 };
  s = document.createElement("script");
  s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
  document.body.appendChild(s);
}
function myFunc(myObj) {  var x, txt = "";  for (x in myObj) {
    txt += myObj[x].name + "
";
  }
  document.getElementById("demo").innerHTML = txt;
}

Fonction de rappel

Comment faire en sorte que le fichier du serveur appelle la bonne fonction lorsque vous n'avez aucun contrôle sur celui-ci ? Parfois, les fichiers du serveur fournissent des fonctions de rappel comme paramètres :
les fichiers php appelleront la fonction que vous transmettez comme paramètres de rappel :
Fichiers PHP :

<?php
$callback = trim($_GET(&#39;callback&#39;));
$myJSON = &#39;{ "name":"John", "age":30, "city":"New York" }&#39;;
echo $callback."(".$myJSON.");";
?>

javascript:

function clickButton() {
  var s = document.createElement("script");
  s.src = "jsonp_demo_db.php?callback=myDisplayFunction";  
  document.body.appendChild(s);
}

Plus de programmation liée à connaissances, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!