Demande inter-domaines AJAX Étapes détaillées JSONP pour obtenir des données JSON (avec code)-js tutoriel-php.cn

Cette fois, je vais vous apporter une explication détaillée des étapes de la requête inter-domaine AJAX JSONP pour obtenir des données JSON (avec code Quelles sont les précautions pour l'obtention de la requête inter-domaine AJAX JSONP). Données JSON Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

Asynchrone JavaScript et XML (Ajax) sont des technologies clés à 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 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 méthode 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 démarre l'exécution lorsque le script est chargé. 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 rappels 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 de réaliser des requêtes inter-domaines. , les requêtes inter-domaines peuvent être implémentées via la balise de script. Ensuite, les données JSON sont sorties côté serveur et la fonction de rappel est exécutée, résolvant ainsi les requêtes 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 au serveur sur tous les domaines via la balise de script, puis le serveur renvoie les données correspondantes et s'exécute dynamiquement. la fonction 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>

Copier après la connexion

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>

Copier après la connexion

Le lien JavaScript doit être en dessous de la fonction.

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

Code PHP

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

Copier après la connexion

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

$.getJSON
$.ajax
$.get

Copier après la connexion

Comment implémenter le code JS côté 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>

Copier après la connexion

客户端JS代码在jQuery中的实现方式2：

Js代码

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

Copier après la connexion

客户端JS代码在jQuery中的实现方式3：

其中 jsonCallback 是客户端注册的，获取跨域服务器上的json数据后，回调的函数。

http://crossdomain.com/services.php?callback=jsonpCallback

这个 url 是跨域服务器取 json 数据的接口，参数为回调函数的名字，返回的格式为

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

Copier après la connexion

Jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

使用JSON的优点在于：

比XML轻了很多，没有那么多冗余的东西。

JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。

在JavaScript中处理JSON很简单。

其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势：

JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。

如果你使用eval()来解析的话，会容易出现安全问题。

尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的方式。

主要提示：

JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。

第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！