Maison >interface Web >js tutoriel >Qu'est-ce que jsonp ? Explication détaillée du principe de jsonp

Qu'est-ce que jsonp ? Explication détaillée du principe de jsonp

不言original: 2018-10-15 10:51:574436parcourir

Qu'est-ce que jsonp ? A quoi ça sert ? Cet article vous présentera jsonp et la compréhension des principes de jsonp. Les amis dans le besoin peuvent s'y référer.

Sans plus tarder, entrons directement dans le texte~

Qu'est-ce que jsonp ?

Nous pouvons trouver la définition de jsonp sur Internet : JSONP (JSON with Padding) est un "mode d'utilisation" de JSON qui peut être utilisé pour résoudre l'accès aux données inter-domaines par le grand public. question des navigateurs. En raison de la politique de même origine, généralement située dans La page Web de server1.example.com ne peut pas communiquer avec un serveur autre que server1.example.com et HTML L'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a Grâce à cette politique ouverte de l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a, les pages Web peuvent obtenir des scripts générés dynamiquement à partir d'autres sources. Données JSON, et ce modèle d'utilisation est appelé JSONP. En fait, pour faire simple, jsonp est un format de transmission de données léger utilisé pour résoudre les problèmes de requêtes inter-domaines.

Analysons le principe de jsonp

les requêtes ajax sont affectées par la politique de même origine et n'autorisent pas les requêtes inter-domaines, et la balise script Attribut src Les liens dans peuvent accéder aux scripts js inter-domaines. Grâce à cette fonctionnalité, le serveur ne renvoie plus les données au format JSON, mais renvoie un code js qui appelle une certaine fonction, qui est appelée dans src, réalisant ainsi un inter-domaine.

Regardons un exemple de jsonp :

<!DOCTYPE html>
 <html> 
 <head> 
 <title>GoJSONP</title> 
 </head> 
 <body> <
 script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script> <script type="text/javascript" src="jquery-1.8.3.min.js">
</script> <script type="text/javascript">
    $(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $(&#39;<script><\/script>&#39;);
        obj.attr("src",url);
        $("body").append(obj);
    });
</script>
 </body> 
 </html>

Une balise de script est ajoutée dynamiquement ici, src pointe vers un script php inter-domaine et le nom de la fonction js ci-dessus est utilisé comme un rappel Les paramètres sont passés, puis regardons comment le code PHP est écrit :

<?php 
$data = array( &#39;age&#39; => 20, &#39;name&#39; => &#39;张三&#39;, ); 
$callback = $_GET[&#39;callback&#39;]; 
echo $callback."(".json_encode($data).")"; 
return;

Le code PHP renvoie une instruction JS, c'est-à-dire

Lors de l'accès au À ce stade, une balise de script est ajoutée dynamiquement, src pointe vers le script PHP, exécute le code JS renvoyé et affiche avec succès la boîte de dialogue.
JSONP transforme donc l'accès aux requêtes inter-domaines en exécution de code JS distant. Le serveur ne renvoie plus les données au format JSON, mais renvoie un code d'exécution de fonction qui utilise les données JSON comme paramètre entrant.

Cet article se termine ici. Pour plus de contenu lié à jsonp, vous pouvez suivre le site Web chinois de php ! ! !

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partagez le code de compte à rebours JavaScript le plus simple (code complet ci-joint)Article suivant：Partagez le code de compte à rebours JavaScript le plus simple (code complet ci-joint)

Articles Liés

Voir plus