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

Une brève analyse de la différence entre json et jsonp et la conversion de format après avoir obtenu les données json via ajax

亚连
Libérer: 2018-05-24 10:46:53
original
2120 Les gens l'ont consulté

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 le format des données json obtenues via ajax ; Pour la conversion, 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 C'est 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, qui est exactement le même que var obj={} en qualité, mais en quantité) ; Peut être étendu à 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 ont souvent besoin d'échanges importants. 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. Le serveur n'aura aucune sécurité ni confidentialité. 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 a été utilisé dans tous les coins du script, ce qui entraînera de nombreux bugs potentiels. Le site Web B a décidé de modifier 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 que la situation ci-dessus ne se produise, 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.

Le nom complet de jsonp est json avec remplissage, ce qui est très vivant. Il enveloppe l'objet json dans une forme conforme à la syntaxe js afin que d'autres sites Web puissent le demander, c'est-à-dire que les données json sont encapsulées. dans un fichier js ;

Json est un format d'échange de données idéal, mais il ne peut pas être obtenu directement entre les domaines, donc json est enveloppé (remplissage) dans une déclaration js légale et transmis sous forme de fichier js. C'est la différence entre json et jsonp. Json est ce que vous voulez, et jsonp est une méthode couramment utilisée pour atteindre cet objectif. Bien sûr, ce qui est finalement obtenu et traité est json. Json est donc le but et jsonp n'est que le moyen. json sera toujours utilisé, mais jsonp ne sera utilisé que lors de l'obtention de données sur plusieurs domaines.

Après avoir compris la différence entre json et jsonp, en fait, l'acquisition de données inter-domaines en ajax est facile à comprendre et à mettre en œuvre. Il n'y a rien de spécial lorsqu'il s'agit de la même source, il suffit de l'obtenir directement. c'est cross-domain, vous devez faire demi-tour pour atteindre l'objectif.

Vous trouverez ci-joint un exemple de données json de requête ajax dans jquery :

(同源):

$.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等,具体使用时务必阅读服务端提供的有关接口使用的详细文档。

下面给大家介绍下由“夜未央0906”写的通过ajax获得json数据后格式的转换

在有些情况下获取到的json数据可能是string类型的,需要把其格式化为json对象才方便解析。

a)原生js通过ajax获取到的json

  此时返回的数据默认是string型的,所以需要用eval()函数将其转化为json对象。需要注意函数内字符串的格式:eval(“(” + data+“)”),因为返回的string是在{}里面的,eval会将大括号识别为js代码块开始和结束的标志,所以必须加上(),将其强制转化为对象来处理。

b)jquery获取

  1:通过ajax()异步请求并把type设置为json,返回的就是json对象。

  2:通过用与ajax()等价的$.getJSON(url,data1,function(data2,status,xhr){//......})方法获取的也是json对象。其中data1为连同请求发送的数据,data2为服务器返回的数据即json对象。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Ajax请求和Filter配合案例解析

Ajax解决缓存的5种方法总结

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!