Tutoriel JSONP

Jsonp (JSON with Padding) est un "mode d'utilisation" de json, qui permet aux pages Web de récupérer des informations à partir d'autres domaines (sites Web), c'est-à-dire de lire des données à travers des domaines.

Qu'est-ce que JSONP ?

JSONP représente un JSON avec des rembourrages.

En raison de la stratégie de navigation entre domaines, demander un fichier à partir d'un autre domaine peut poser des problèmes.

Demander un script externe à partir d'un autre domaine ne pose pas ce problème.

JSONP utilise cet avantage et utilise<script>Marque au lieu de l'objet XMLHttpRequest pour demander le fichier.

　　<script src="jsonp_demo.php">

Le fichier sur le serveur (jsonp_demo.php) encapsule le résultat dans une appelle de fonction :

　　<?php
　　$myJSON = '{ "name":"Seagull", "age":32, "city":"New Delhi" }';
　　echo "myFunc(".$myJSON.");";
　　?>

La fonction « myFunc » est située sur le client et peut traiter les données JSON :

function myFunc(myObj) {
　　document.getElementById("output").innerHTML = myObj.name;
}

Différences entre JSON et JSONP

JSON : JavaScript utilise JSON (JavaScript Object Notation) pour échanger des données via le réseau. Il examine soigneusement les données JSON, qui ne sont qu'un objet JavaScript sous forme de chaîne.

　　{ "nom":"Seagull", "age":22, "ville":"New Delhi" })

JSONP : JSONP est un JSON avec des garnitures. Ici, garnitures signifie envelopper la fonction dans JSON puis la renvoyer dans la requête.

　　myFunc({ "nom":"Seagull", "age":22, "ville":"New Delhi" })

Méthodes d'utilisation de JSONP

• Dans le code HTML, incluez la balise script. L'URL de la balise script doit être l'URL à partir de laquelle les données doivent être récupérées. Le service Web permet de spécifier une fonction de rappel. Dans l'URL, le paramètre callback est inclus en dernier.

• Lorsque le navigateur rencontre un élément script, il envoie une requête HTTP à l'URL source.

• Le serveur envoie la réponse en utilisant JSON encapsulé dans l'appel de fonction.

• Le navigateur analyse la réponse JSON sous forme de chaîne et la convertit en objet JavaScript. Appelle la fonction de rappel et transmet l'objet généré à celle-ci.

Création de balises de script dynamiques

L'exemple suivant exécutera la fonction "myFunc" à la charge de la page en fonction de l'emplacement de la balise script.

Mais, seuls les balises de script doivent être créées lorsque cela est nécessaire.

Les exemples suivants créeront et inséreront<script>Marque :

function createScriptDynamically() {
　　var elem = document.createElement("script");
　　elem.src = "jsonp_demo.php";
　　document.body.appendChild(elem);
}