Requête inter-domaines AJAX JSONP pour obtenir des données JSON

JSONP (JSON with Padding) est un protocole non officiel qui permet d'intégrer des balises Script côté serveur et de les renvoyer au client, permettant un accès inter-domaines sous forme de rappel javascript (il s'agit simplement d'une simple implémentation de JSONP) .

JavaScript et XML asynchrones (Ajax) sont une technologie clé à l'origine d'une nouvelle génération de sites Web (communément appelés sites Web 2.0). Ajax permet la récupération de données en arrière-plan sans interférer avec l'affichage et le comportement de l'application Web. Obtenez des données à l'aide de la fonction XMLHttpRequest, une API qui permet à JavaScript côté client de se connecter à un serveur distant via HTTP. Ajax est également la force motrice derrière de nombreux mashups, qui intègrent du contenu provenant de plusieurs endroits dans une seule application Web.

Cependant, en raison des limitations du navigateur, cette méthode ne permet pas la communication entre domaines. Si vous essayez de demander des données à un autre domaine, une erreur de sécurité se produira. Ces erreurs de sécurité peuvent être évitées si vous pouvez contrôler le serveur distant sur lequel résident les données et si chaque requête est adressée au même domaine. Mais à quoi sert une application Web si elle reste simplement sur son propre serveur ? Que se passe-t-il si vous devez collecter des données à partir de plusieurs serveurs tiers ?

Comprendre les restrictions de la politique de même origine

La politique de même origine empêche les scripts chargés sur un domaine d'obtenir ou de manipuler les propriétés du document sur un autre domaine. Autrement dit, le domaine de l'URL demandée doit être le même que le domaine de la page Web actuelle. Cela signifie que le navigateur isole le contenu de différentes sources pour empêcher les opérations entre elles. Cette politique de navigateur est ancienne et existe depuis la version 2.0 de Netscape Navigator.

Un moyen relativement simple de surmonter cette limitation consiste à demander à la page Web de demander des données au serveur Web d'où elle provient, et à ce que le serveur Web agisse comme un proxy et transmette la demande au serveur tiers réel. . Bien que cette technologie soit largement utilisée, elle n’est pas évolutive. Une autre façon consiste à utiliser des éléments de cadre pour créer une nouvelle zone dans la page Web actuelle et à utiliser les requêtes GET pour obtenir des ressources tierces. Cependant, après avoir obtenu les ressources, le contenu du cadre sera restreint par la politique de même origine.

Un moyen plus idéal de surmonter cette limitation consiste à insérer un élément de script dynamique dans une page Web dont la source pointe vers une URL de service dans un autre domaine et récupère les données dans son propre script. Il commence à s'exécuter lors du chargement du script. Cette approche fonctionne car la stratégie de même origine n'empêche pas l'insertion de script dynamique et le script est traité comme s'il avait été chargé à partir du domaine qui dessert la page Web. Mais si le script tente de charger le document depuis un autre domaine, il n'y parviendra pas. Heureusement, cette technique peut être améliorée en ajoutant la notation d'objet JavaScript (JSON).

1. Qu'est-ce que JSONP ?

Pour comprendre JSONP, il faut mentionner JSON Alors, qu'est-ce que JSON ?

JSON est un sous-ensemble de la notation littérale d'objet de JavaScript. Puisque JSON est un sous-ensemble de JavaScript, il peut être utilisé dans le langage sans problème.

JSONP (JSON avec rembourrage). ) est un protocole non officiel qui permet d'intégrer des balises Script côté serveur et de les renvoyer au client, permettant un accès inter-domaines sous forme de rappel javascript (il s'agit simplement d'une simple implémentation de JSONP).

2. A quoi sert JSONP ?

En raison des restrictions de la politique de même origine, XmlHttpRequest autorise uniquement les requêtes de ressources à partir de la source actuelle (nom de domaine, protocole, port afin d'implémenter des requêtes inter-domaines, cross-). les demandes de domaine peuvent être implémentées via la balise de script, puis dans le service. La fin génère des données JSON et exécute la fonction de rappel, résolvant ainsi les demandes de données inter-domaines.

3. Comment utiliser JSONP ?

La DÉMO ci-dessous est en fait une simple représentation de JSONP Une fois que le client a déclaré la fonction de rappel, le client demande des données inter-domaines au serveur via la balise de script, puis le serveur renvoie le correspondant. données et exécuter dynamiquement des fonctions de rappel.

Code HTML (soit) :

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script type="text/javascript"> 
  function jsonpCallback(result) { 
    //alert(result); 
    for(var i in result) { 
      alert(i+":"+result[i]);//循环输出a:1,b:2,etc. 
    } 
  } 
  var JSONP=document.createElement("script"); 
  JSONP.type="text/javascript"; 
  JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback"; 
  document.getElementsByTagName("head")[0].appendChild(JSONP); 
</script>

ou

Code HTML

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script type="text/javascript"> 
  function jsonpCallback(result) { 
    alert(result.a); 
    alert(result.b); 
    alert(result.c); 
    for(var i in result) { 
      alert(i+":"+result[i]);//循环输出a:1,b:2,etc. 
    } 
  } 
</script> 

<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

Le lien JavaScript doit être sous la fonction.

Code PHP côté serveur (services.php) :

<?php 
//服务端返回JSON数据 
$arr=array(&#39;a&#39;=>1,&#39;b&#39;=>2,&#39;c&#39;=>3,&#39;d&#39;=>4,&#39;e&#39;=>5); 
$result=json_encode($arr); 
//echo $_GET[&#39;callback&#39;].&#39;("Hello,World!")&#39;; 
//echo $_GET[&#39;callback&#39;]."($result)"; 
//动态执行回调函数 
$callback=$_GET[&#39;callback&#39;]; 
echo $callback."($result)";

Si le code client JS ci-dessus est implémenté à l'aide de jQuery, c'est également très simple.

$.getJSON
$.ajax
$.get

Méthode d'implémentation du code JS client dans jQuery 1 :

Code Js

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
  $.getJSON("http://crossdomain.com/services.php?callback=?", 
  function(result) { 
    for(var i in result) { 
      alert(i+":"+result[i]);//循环输出a:1,b:2,etc. 
    } 
  }); 
</script>

Méthode d'implémentation 2 du code client JS dans jQuery :

Code Js

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
  $.ajax({ 
    url:"http://crossdomain.com/services.php", 
    dataType:&#39;jsonp&#39;, 
    data:&#39;&#39;, 
    jsonp:&#39;callback&#39;, 
    success:function(result) { 
      for(var i in result) { 
        alert(i+":"+result[i]);//循环输出a:1,b:2,etc. 
      } 
    }, 
    timeout:3000 
  }); 
</script>

Client JS Comment le code est implémenté dans jQuery 3 :

Code Js

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
  $.get(&#39;http://crossdomain.com/services.php?callback=?&#39;, {name: encodeURIComponent(&#39;tester&#39;)}, function (json) { for(var i in json) alert(i+":"+json[i]); }, &#39;jsonp&#39;); 
</script>

Parmi eux, jsonCallback est enregistré par le client Après avoir obtenu les données json sur le serveur cross-domain, rappel. fonction.
http://crossdomain.com/services.php?callback=jsonpCallback
Cette URL est l'interface permettant au serveur inter-domaines d'obtenir les données json. Le paramètre est le nom de la fonction de rappel et le retour. le format est

Code Js

jsonpCallback({msg:'this is json data'})

Principe Jsonp :

Enregistrez d'abord un rappel sur le client, puis transmettre le nom de rappel au serveur.

A ce moment, le serveur génère d'abord des données json.

Utilisez ensuite la syntaxe javascript pour générer une fonction. Le nom de la fonction est le paramètre passé jsonp.

Enfin, les données json sont placées directement dans la fonction en tant que paramètre, générant ainsi un document de syntaxe js et le renvoyant au client.

Le navigateur client analyse la balise de script et exécute le document javascript renvoyé. A ce moment, les données sont transmises en paramètre à la fonction de rappel prédéfinie par le client (Exécution dynamique de la fonction de rappel)

Réalisation du positionnement du téléphone mobile basé sur h5 ajax

Utilisation de la fonctionnalité H5 FormData pour télécharger des fichiers sans rafraîchissant

Une explication détaillée de l'utilisation de diverses méthodes AJAX

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!