Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine kurze Analyse des Unterschieds zwischen JSON und JSONP und der Formatkonvertierung nach dem Abrufen von JSON-Daten über Ajax

亚连
Freigeben: 2018-05-24 10:46:53
Original
2120 Leute haben es durchsucht

Kurz gesagt: JSON gibt eine Datenzeichenfolge zurück, während JSONP Skriptcode (einschließlich eines Funktionsaufrufs) zurückgibt. Als Nächstes stellt Ihnen dieser Artikel den Unterschied zwischen JSON und JSONP sowie das Format der über Ajax erhaltenen JSON-Daten vor. Zur Konvertierung können sich Freunde, die es benötigen, auf

beziehen. Der Unterschied zwischen JSON und JSONP (JSON ist der Zweck, JSONP ist nur das Mittel) wird wie folgt vorgestellt:

Kurz gesagt, JSON Gibt eine Datenzeichenfolge zurück. JSON gibt Skriptcode zurück (einschließlich eines Funktionsaufrufs). Kann unendlich erweitert werden. Um es einfach auszudrücken: JSON ist in JavaScript tatsächlich ein Objekt (Objekt) und ein Array (Array, eigentlich ein Objekt). Dinge. Datenstruktur.

json ist für Menschen leicht zu lesen und zu schreiben und auch für Maschinen leicht zu analysieren und zu generieren. Es hat eine relativ hohe Netzwerkübertragungsrate. Das Front-End und das Backend von funktionalen Websites müssen häufig ausgetauscht werden Datenmengen werden häufig verarbeitet, und JSON ist auf seine leistungsstarke Ausdruckskraft und sein gutes Erscheinungsbild angewiesen und wurde nach und nach zur idealen Front-End- und Back-End-Datenaustauschsprache. Was Senior XML betrifft, denke ich, dass er wie Microsofts XP in den Ruhestand gehen sollte.

Das Front-End- und Back-End-Datenaustauschformat unter demselben Ursprung (wenn Sie nicht die gleiche Ursprungsstrategie verstehen, gehen Sie bitte zu Baidu) ist entschlossen, JSON zu verwenden. Dann ist die Frage, was Wenn ich die auf den Websites anderer Personen bereitgestellten Daten erhalten möchte? Das heißt, das Problem des domänenübergreifenden Lesens von Daten (gehen Sie nicht zu weit und sagen Sie, dass Sie keine Daten von anderen Websites lesen müssen, glauben Sie mir, Sie werden es früher oder später brauchen). Ist JSON in Ordnung? Die Antwort lautet „No Way“. Weil JSON nur ein gewöhnliches Textformat ist, das es Ihnen ermöglicht, überhaupt keine Sicherheit und Vertraulichkeit zu erlangen zu diesem Thema Die Spezifizierer von Das Endergebnis ist, dass nur Tags wie img, script und iframe, die das src-Attribut angeben können, Daten auf den Websites anderer Personen über Domänen hinweg abrufen können (Bilder, Skripte und Quelldateien sind tatsächlich Daten). Zum Beispiel:

<!--京东商品图片-->
<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>
Nach dem Login kopieren

Es scheint, dass es nicht möglich ist, JSON direkt abzurufen. Gibt es eine andere Möglichkeit, die Daten abzurufen? Warum wird JSONP eher als Entdeckung denn als Erfindung bezeichnet, weil es keine neue Technologie beinhaltet, genau wie die Entdeckung von Ajax?

Das Prinzip von jsonp besteht darin, dass Website A die Daten von Website B abrufen muss. Website B sagte, ich werde Ihnen eine Methode geben: [1. Sie verwenden ruft zunächst die open.js-Datei ab (die Verantwortung liegt bei Website B), die die benötigten Daten enthält. 2. Der Name der Methode, mit der Sie die Daten nach Erhalt der Daten verarbeiten (Sie müssen die Daten verarbeiten), muss foo (Verantwortung und Verpflichtung des Datenanforderers) genannt werden. Dies entspricht dem Zustandekommen einer Vereinbarung zwischen Website B und die Person, die die Daten anfordert, muss in Übereinstimmung mit den Regeln handeln. Wenn der Antragsteller die beiden oben genannten Regeln nicht gleichzeitig einhalten kann, können die Daten nicht wie erwartet erhalten werden. Nun... das ist gleichbedeutend mit der Aufstellung einer unausgesprochenen Regel

open.js-Inhalt

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

function foo(data){
console.log(data);
//ToDo.. 
}
Nach dem Login kopieren

ah! Obwohl es eine Wendung gab, waren Website A und Website B sehr zufrieden. Dann kam das Problem erneut, dass sie auch die Daten von Website B erhalten musste Website C hat es übernommen. Der Name foo wurde in Zeile 6868 seiner eigenen Skriptdatei verwendet, und die Massenersetzung führte zu vielen potenziellen Fehlern to Fool, Website A sprang sofort hoch, weil ihre eigene Website an vielen Stellen foo als Referenz auf Daten verwendet hat.

Um die oben genannte Situation zu vermeiden, haben diese großartigen Entwickler die Methode der dynamischen Generierung von JS-Dateien verwendet. Die PHP-Version lautet wie folgt:

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格式的数据,即一行函数调用语句
?>
Nach dem Login kopieren
Ähm..., warum PHP Dateien im JS-Format zurückgeben kann, erfahren Sie bei Baidu.

Website A verwendet also , um Daten anzufordern, ohne Variablen zu ändern. Der Inhalt der an A zurückgegebenen Skriptdatei lautet:

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});
Nach dem Login kopieren

Problem gelöst. Jeder hat die erwarteten Daten erhalten und Namenskonflikte vermieden.

Der vollständige Name von JSONP ist JSON mit Auffüllung, was sehr anschaulich ist. Es verpackt das JSON-Objekt in eine Form, die der JS-Syntax entspricht, sodass andere Websites es anfordern können, dh die JSON-Daten werden gekapselt in eine js-Datei;

Json ist ein ideales Datenaustauschformat, kann jedoch nicht direkt über Domänen hinweg abgerufen werden. Daher wird JSON in eine legale js-Anweisung eingeschlossen (aufgefüllt) und als js-Datei übergeben. Dies ist der Unterschied zwischen JSON und JSONP. JSON ist eine häufig verwendete Methode, um diesen Zweck zu erreichen. Natürlich wird letztendlich JSON abgerufen und verarbeitet. JSON ist also der Zweck und JSONP nur das Mittel. JSON wird immer verwendet, JSONP wird jedoch nur verwendet, wenn Daten domänenübergreifend abgerufen werden.

Nachdem man den Unterschied zwischen JSON und JSONP verstanden hat, ist die domänenübergreifende Datenerfassung in Ajax tatsächlich einfach zu verstehen und zu implementieren. Es gibt nichts Besonderes, wenn es einfach direkt abgerufen wird Es ist domänenübergreifend, Sie müssen es umdrehen, um das Ziel zu erreichen.

Im Anhang finden Sie ein Beispiel für Ajax-Anfrage-JSON-Daten in Jquery:

(同源):

$.ajax({
url:"persons.json",
success:function(data){
    console.log(data);
     //ToDo..
  }
});
Nach dem Login kopieren

(跨域):

$.ajax({
url:"http://www.B.com/open.php?callback=?",
dataType:"jsonp",
success:function(data){
console.log(data);
//ToDo..
}
});
Nach dem Login kopieren

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快速解决参数过长无法提交成功的问题

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Unterschieds zwischen JSON und JSONP und der Formatkonvertierung nach dem Abrufen von JSON-Daten über Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!