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

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 <script> Bien que jQuery encapsule JSONP comme une forme d'AJAX, JSONP n'est pas une forme ni un cas particulier d'AJAX. <br /> <br /> <br /><div class="codetitle"><span><a style="CURSOR: pointer" data="8779" class="copybut" id="copybut8779" onclick="doCopy('code8779')">Copier le code<U> Le code est le suivant :</script>

$.ajax({
URL : "
http://query.yahooapis.com/v1/public/yql", jsonpCallback : "showPrice",
​ jsonp : "rappel",
// dit à jQuery que nous attendons JSONP
Type de données : "jsonp",
Données : {
​​​​ q : "sélectionnez le titre, le résumé, l'url depuis search.news où query="cat"",
format : "json"
},
// travailler avec la réponse
Succès : fonction (données) {
            console.log( data ); // réponse du serveur
>
});

Description du paramètre de requête Ajax :

chaîne de type de données

Le type de données qui devrait être renvoyé par le serveur. S'il n'est pas spécifié, jQuery effectuera automatiquement des jugements intelligents basés sur les informations MIME du package HTTP. Par exemple, le type XML MIME est reconnu comme XML. Dans la version 1.4, JSON générera un objet JavaScript et le script exécutera le script. Les données renvoyées par le serveur seront ensuite analysées en fonction de cette valeur et transmises à la fonction de rappel. Valeurs disponibles :

"xml" : renvoie un document XML pouvant être traité avec jQuery.

"html" : renvoie les informations HTML en texte brut ; la balise de script incluse sera exécutée une fois insérée dans le dom.

"script" : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache. Sauf si le paramètre "cache" est défini. '''Remarque :''''Lorsque vous effectuez des requêtes à distance (pas sous le même domaine), toutes les requêtes POST seront converties en requêtes GET. (Car la balise du script DOM sera utilisée pour le chargement)

"json" : renvoie les données JSON.

"jsonp" : format JSONP. Lors de l'appel d'une fonction au format JSONP, telle que "myurl?callback=?", jQuery remplacera automatiquement ? par le nom de fonction correct pour exécuter la fonction de rappel.

"text": Renvoie une chaîne de texte brut

jsonp,

Réécrivez le nom de la fonction de rappel dans la requête jsonp. La valeur est utilisée pour remplacer la partie "callback" dans les paramètres d'URL des requêtes GET ou POST telles que "callback=?" Par exemple, {jsonp:'onJsonPLoad'} entraînera la transmission de "onJsonPLoad" au serveur.

jsonpCallback,

Spécifiez un nom de fonction de rappel pour jsonp. Cette valeur sera utilisée à la place du nom de fonction aléatoire généré automatiquement par jQuery. Ceci est principalement utilisé pour permettre à jQuery de générer des noms de fonctions uniques afin de faciliter la gestion des requêtes et de fournir des fonctions de rappel et de gestion des erreurs. Vous pouvez également spécifier ce nom de fonction de rappel lorsque vous souhaitez que le navigateur mette en cache les requêtes GET. Cependant, en utilisation réelle, il n'est pas nécessaire d'écrire une fonction de rappel, telle que showPrice dans cet exemple, et aucune erreur ne sera signalée si vous ne l'écrivez pas, car jQuery génère automatiquement une fonction de rappel pour vous lors du traitement de JSONP et prend extraire les données pour appeler la méthode de réussite. Cela pourrait ressembler à ceci :

Copier le code Le code est le suivant :

function success_jsonpCallback(data) { success(data);

Ce qui précède représente l'intégralité du contenu de cet article. Avez-vous une compréhension détaillée de jsonp ? Si vous avez des questions, laissez-moi un message et nous pourrons en discuter ensemble.