Maison > Article > interface Web > Une brève discussion sur la différence entre JSON et JSONP et l'utilisation de l'ajax jsonp_jquery de jQuery

Une brève discussion sur la différence entre JSON et JSONP et l'utilisation de l'ajax jsonp_jquery de jQuery

WBOYoriginal: 2016-05-16 16:30:401403parcourir

JSON et JSONP

JSON (JavaScript Object Notation) est un format d'échange de données léger utilisé pour échanger des informations entre les navigateurs et les serveurs.

JSONP (JSON With Padding) est un JSON (ou un JSON encapsulé) emballé dans un appel de fonction.

JSON est un format de données et JSONP est une méthode d'appel de données.

Copier le code Le code est le suivant :

//JSON

{

"nom": "qn"

>

Copier le code Le code est le suivant :

//JSONP

rappel({

"nom": "qn"

})

Pour des raisons de sécurité, les scripts (AJAX) ne peuvent pas accéder au contenu en dehors de ce domaine. Cependant, les ressources statiques ne sont pas limitées par les politiques de domaine et peuvent charger des scripts, des styles, des images et d'autres ressources statiques à partir de n'importe quel domaine. JSOP utilise ce principe pour réaliser une acquisition de données inter-domaines.

Exemple 1 :

Copier le code Le code est le suivant :

//Définir la fonction shoPrice

fonction showPrice(données) {

alert("Symbole : " data.symbol ", Prix : " data.price);

>

Copier le code Le code est le suivant :

//Inclure la fonction et les paramètres showPrice dans la page Web

Cet exemple montre comment appeler une fonction JavaScript avec des données JSON statiques comme paramètre.

Exemple 2 :

Le premier appel de fonction peut être écrit dans un fichier js et placé sur le serveur, chargé dans la page à l'aide d'une balise de script, et cette balise peut être créée dynamiquement.

Copier le code Le code est le suivant :

Le contenu de remote.js est le même que ce qui a été écrit dans la balise précédente :

1 showPrice({symbole : 'IBM', prix : 91,42});

Le code JavaScript inséré dynamiquement prend les données JSON à transmettre en tant que paramètre et paramètre de l'instruction d'appel de la fonction showPrice.

La question est donc la suivante : la fonction showPrice doit-elle être appelée à chaque fois que les données sont obtenues ? Cela nécessite que les programmeurs front-end et back-end concluent un accord. Bien sûr, cela causera beaucoup d'inconvénients, surtout lorsque l'interface est ouverte au développement public. JSOP est traité de cette manière : le front-end est pris en charge pour transmettre un paramètre de nom de fonction de rappel, le back-end reçoit le paramètre de nom de fonction de rappel, puis génère un appel à la fonction, transmet les données JSON en tant que paramètre et l'insère. dans la page lorsqu'il atteint le client pour démarrer l'exécution.

Exemple 3 :

Insérer dynamiquement du code avec des paramètres de rappel :

Copier le code Le code est le suivant :

Extrait de code du service JSONP implémenté en PHP sur le backend :

Copier le code Le code est le suivant :

$jsonData = getDataAsJson($_GET['symbol']);

echo $_GET['callback'] '(' . $jsonData . ');';
.
// Imprimer : showPrice({"symbol" : "IBM", "price" : "91.42"});

Il correspond bien à la définition de JSONP et regroupe les données JSON dans des appels de fonction.

Les exemples ci-dessus proviennent de :

Utilisation de JSONP pour la communication inter-domaines, Partie 1 : Créez rapidement des mashups puissants à l'aide de JSONP et jQuery

Utiliser JSONP avec jQuery
Les méthodes d'appel d'AJAX et de JSONP dans jQuery se ressemblent beaucoup. Ne vous laissez pas tromper par ce phénomène. Elles sont de nature très différente. AJAX obtient le contenu hors page via l'objet XMLHttpRequest, tandis que JSONP ajoute dynamiquement des balises