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)

L'avantage d'utiliser JSON est :

Il est beaucoup plus léger que XML et n'a pas autant de choses redondantes.

JSON est également très lisible, mais est généralement renvoyé compressé. Contrairement au XML, qui peut être affiché directement par les navigateurs, ceux-ci doivent utiliser certains plug-ins pour formater JSON.

Gérer JSON en JavaScript est simple.

D'autres langages tels que PHP ont également un bon support pour JSON.

JSON présente également certains inconvénients :

La prise en charge des langages côté serveur par JSON n'est pas aussi étendue que XML, mais JSON.org fournit des bibliothèques pour de nombreux langages.

Si vous utilisez eval() pour analyser, des problèmes de sécurité peuvent facilement survenir.

Néanmoins, les avantages de JSON restent évidents. Il s'agit d'un format de données idéal pour l'interaction des données Ajax.

Conseil :

JSONP est une technologie puissante pour créer des mashups, mais malheureusement, ce n'est pas une panacée pour tous les besoins de communication inter-domaines. Il présente certains défauts qui doivent être soigneusement examinés avant d’engager des ressources dans le développement.

Premièrement et surtout, il n'y a pas de gestion des erreurs pour les appels JSONP. Si l'insertion du script dynamique est valide, l'appel est exécuté ; s'il n'est pas valide, il échoue silencieusement. Il n’y a aucune invite à l’échec. Par exemple, les erreurs 404 ne peuvent pas être détectées sur le serveur et les demandes ne peuvent pas être annulées ou redémarrées. Cependant, s'il n'y a pas de réponse après un certain temps, ignorez-la. (Les futures versions de jQuery pourraient avoir des fonctionnalités permettant de mettre fin aux requêtes JSONP).

Un autre inconvénient majeur de JSONP est qu'il peut être dangereux lorsqu'il est utilisé par des services non fiables. Étant donné que le service JSONP renvoie une réponse JSON enveloppée dans un appel de fonction exécuté par le navigateur, il rend l'application Web hôte plus vulnérable à diverses attaques. Si vous envisagez d'utiliser un service JSONP, il est important de comprendre les menaces qu'il peut représenter.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

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!