Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de la différence et de l'utilisation entre json et jsonp

php中世界最好的语言
Libérer: 2018-04-04 17:33:33
original
1395 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée de la différence et de l'utilisation entre json et jsonp Quelles sont les précautions lors de l'utilisation de json et jsonp. Voici des cas pratiques, jetons un coup d'œil.

En un mot, json renvoie une chaîne de données ; tandis que jsonp renvoie du code de script (y compris un appel de fonction), cet article vous présentera la différence entre json et jsonp et comment obtenir json via ajax ; . Pour la conversion du format de données, les amis qui en ont besoin peuvent se référer à

La différence entre json et jsonp (json est le but, jsonp n'est que le moyen) est présentée comme suit :

En un mot, json renvoie une chaîne de données ; jsonp renvoie du code de script (y compris un appel de fonction)

JSON est en fait un objet en JavaScript, avec var obj={} Qualitativement exactement ; le même, mais quantitativement extensible à l’infini. Pour faire simple, json est en fait un objet (Object) et un tableau (Array, en fait un objet) en JavaScript. Ces deux bons amis sont là, vous m'embarquez et je vous embarque dans n couches, de manière à simuler de nombreux complexes. choses.

JSON est facile à lire et à écrire pour les gens, et il est également facile à analyser et à générer pour les machines. Il a un taux de transmission réseau relativement élevé. Les front-ends et les back-ends des sites Web fonctionnels doivent souvent échanger de manière importante. de grandes quantités de données, et JSON s'appuie sur sa puissante expressivité et sa belle apparence. Value est progressivement devenu le langage idéal d'échange de données front-end et back-end. Quant au XML senior, je pense qu'il devrait prendre sa retraite comme le XP de Microsoft.

Le format d'échange de données front-end et back-end sous la même origine (si vous ne comprenez pas la même stratégie d'origine, veuillez vous rendre sur Baidu) est déterminé à utiliser json. Ensuite, la question est de savoir quoi. si je souhaite obtenir les données fournies sur les sites Web d'autres personnes ? C’est-à-dire le problème de la lecture des données entre domaines (n’allez pas trop loin et dites que vous n’avez pas besoin de lire les données d’autres sites Web, croyez-moi, vous en aurez besoin tôt ou tard. Est-ce que json va bien ?) La réponse est Pas question. Pourquoi ? Parce que json est juste un format de texte ordinaire qui vous permet de l'obtenir facilement. Dans ce cas, le monde Internet sera dans le chaos. sur cette question Les prescripteurs de Le résultat final est que seules les balises telles que img, script et iframe qui peuvent spécifier l'attribut src ont la capacité d'obtenir des données sur les sites Web d'autres personnes dans tous les domaines (les images, les scripts et les fichiers sources sont en réalité des données). Par exemple :

<!--京东商品图片-->
<img src="http://img30.360buyimg.com/jgsq-productsoa/jfs/t2407/323/1635505465/47386/f2d89d88/56615e00N7a475ee6.jpg" />
<!--百度CDN-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
Copier après la connexion

Il semble qu'il ne soit pas possible d'obtenir directement json. Existe-t-il un autre moyen d'obtenir les données ? Jsonp a donc été découvert par des développeurs intelligents. Pourquoi est-il considéré comme une découverte plutôt qu'une invention ? Parce qu'il n'implique aucune nouvelle technologie, tout comme la découverte d'ajax.

Le principe de jsonp est le suivant. Le site Web A doit obtenir les données du site Web B. Le site Web B a dit que je vais vous donner une méthode, [1. .B.com La balise /open.js"> obtient d'abord le fichier open.js (sous la responsabilité du site B), qui contient les données dont vous avez besoin. 2. Le nom de la méthode que vous utilisez pour traiter les données après avoir obtenu les données (vous devez traiter les données) doit être nommé foo (responsabilité et obligation du demandeur de données). Cela équivaut à établir un accord entre le site Web B et). la personne qui demande les données, exigeant Le demandeur doit agir conformément aux règles. Si le demandeur ne peut pas se conformer aux deux ci-dessus en même temps, les données ne peuvent pas être obtenues comme prévu. Eh bien..., cela équivaut à établir une règle tacite

contenu open.js

foo({"name":"B","age":23});  //为什么不直接写成json数据{"name":"B","age":23}呢,原因很简单,在js文件总得合乎js语法吧
//这也是为什么协议中明确规定处理数据的方法名必须命名为foo,因为B网站是在假定请求者的脚本中已经定义了数据处理方法foo的情况下返回数据;
//不然就会报foo is not defined错误
Copier après la connexion

Site Web Un script doit avoir

function foo(data){
console.log(data);
//ToDo.. 
}
Copier après la connexion

Ah ! Bien que cela ait pris un tournant, les données ont finalement été obtenues. Le site Web A et le site Web B ont été très satisfaits. Puis le site Web C a déclaré qu'il devait également obtenir les données du site Web B. Le site Web B lui a remis l'accord et. Le site Web C l'a pris. À première vue, le nom foo a été utilisé dans la ligne 6868 de son propre fichier de script, et il a été utilisé dans tous les coins du script, ce qui entraînera de nombreux bugs potentiels. foo to Fool, le site Web A a immédiatement sauté le pas, car son propre site Web a utilisé foo pour référencer des données à de nombreux endroits.

Afin d'éviter la situation ci-dessus, ces formidables développeurs ont utilisé la méthode de génération dynamique de fichiers js. La version php est la suivante :

open.php

<?php
header(&#39;Content-type: application/javascript&#39;);
$jsonCallback = htmlspecialchars($_REQUEST [&#39;callback&#39;]); //获取请求者自定义的回调函数名
$jsonData =&#39;{"name":"B","age":23}&#39;; //待返回的json数据
echo $jsonCallback . "(" . $jsonData . ")"; //输出jsonp格式的数据,即一行函数调用语句
?>
Copier après la connexion
Euh..., quant à la raison pour laquelle php peut renvoyer des fichiers au format js, Baidu.

Le site Web A utilise donc pour demander des données sans modifier aucune variable. le contenu du fichier script renvoyé à A est :

foo({"name":"B","age":23}); //所谓的jsonp,就是一句函数调用,数据都被包裹传递到参数中了,千万别穿个马甲就不认识了 
网站C就用<script src="http://www.B.com/open.php?callback=blah"></script>来请求数据,返回给C的脚本文件内容是:
blah({"name":"B","age":23}); 
网站N就用<script src="http://www.B.com/open.php?callback=what"></script>来请求数据,返回给N的脚本文件内容是:
what({"name":"B","age":23});
Copier après la connexion
Problème résolu, tout le monde a obtenu les données attendues et a évité les conflits de noms.

jsonp全名叫做json with padding,很形象,就是把json对象用符合js语法的形式包裹起来以使其它网站可以请求得到,也就是将json数据封装成js文件;

json是理想的数据交换格式,但没办法跨域直接获取,于是就将json包裹(padding)在一个合法的js语句中作为js文件传过去。这就是json和jsonp的区别,json是想要的东西,jsonp是达到这个目的而普遍采用的一种方法,当然最终获得和处理的还是json。所以说json是目的,jsonp只是手段。json总会用到,而jsonp只有在跨域获取数据才会用到。

理解了json和jsonp的区别之后,其实ajax里的跨域获取数据就很好理解和实现了,同源时候并没有什么特别的,直接取就行,跨域时候需要拐个弯来达到目的。

附上jquery中ajax请求json数据实例:

(同源):

$.ajax({
url:"persons.json",
success:function(data){
    console.log(data);
     //ToDo..
  }
});
Copier après la connexion

(跨域):

$.ajax({
url:"http://www.B.com/open.php?callback=?",
dataType:"jsonp",
success:function(data){
console.log(data);
//ToDo..
}
});
Copier après la connexion

jquery已把jsonp封装进ajax,很合理,因为毕竟绝大多数的jsonp请求都是ajax,关于jquery的ajax具体用法请自行百度,另外要注意的一点就是不同的网站提供的数据接口的$_REQUEST ['callback']中不一定绝对是callback也可能是cb,cbk等,具体使用时务必阅读服务端提供的有关接口使用的详细文档。

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

推荐阅读:

ajax怎样批量导入数据

在springmvc里发送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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal