Heim > Web-Frontend > js-Tutorial > Was ist JSONP? Detaillierte Erläuterung der Verbindung und des Unterschieds zwischen JSON und JSONP

Was ist JSONP? Detaillierte Erläuterung der Verbindung und des Unterschieds zwischen JSON und JSONP

伊谢尔伦
Freigeben: 2016-11-22 13:16:03
Original
1148 Leute haben es durchsucht

Wenn es um AJAX geht, werden Sie unweigerlich mit zwei Fragen konfrontiert sein

Die erste ist, welches Format verwendet AJAX zum Datenaustausch?

Die zweite Frage ist, wie man domänenübergreifende Anforderungen löst.

Für diese beiden Probleme gibt es derzeit unterschiedliche Lösungen. Beispielsweise können Daten mit benutzerdefinierten Zeichenfolgen oder XML beschrieben werden, und domänenübergreifend können sie durch serverseitige Proxys gelöst werden.

Aber bisher besteht die am meisten empfohlene oder bevorzugte Lösung darin, JSON für die Datenübertragung zu verwenden und sich für die domänenübergreifende Übertragung auf JSONP zu verlassen. Und darum geht es in diesem Artikel.

Obwohl es nur einen Buchstabenunterschied zwischen JSON und JSONP gibt, sind sie eigentlich überhaupt nicht dasselbe: JSON ist ein Datenaustauschformat, während JSONP ein Format ist, das auf der Grundlage des Einfallsreichtums von Entwicklern erstellt wurde domänenübergreifendes Datenaustauschprotokoll. Nehmen wir als Vergleich den jüngsten populären Spionagefilm. JSON ist der „Code“, den Untergrundparteien zum Schreiben und Austauschen von Informationen verwenden, während JSONP die Verbindungsmethode ist, mit der in Code geschriebene Informationen an ihre Kameraden übermittelt werden. Hast du das gesehen? Zum einen wird das Format der Informationen beschrieben, zum anderen die von beiden Parteien vereinbarte Methode zur Übermittlung der Informationen.

Was ist JSON?

Wie bereits kurz erwähnt, handelt es sich bei JSON um eine textbasierte Datenaustauschmethode bzw. ein Datenbeschreibungsformat. Ob Sie sich dafür entscheiden sollten, müssen Sie zunächst auf seine Vorteile achten.

Vorteile von JSON:

Basierend auf Klartext ist die plattformübergreifende Übertragung äußerst einfach.

Javascript wird nativ unterstützt und fast alle Hintergrundsprachen werden unterstützt.

Leichtes Datenformat, das nur sehr wenige Zeichen einnimmt und besonders für die Internetübertragung geeignet ist.

ist gut lesbar, obwohl es nicht so klar wie XML ist, aber dennoch leicht zu identifizieren nach vernünftiger Einrückung;

Natürlich einfach zu schreiben und zu analysieren, vorausgesetzt, Sie kennen die Datenstruktur;

JSON hat sicherlich Mängel, aber nach Meinung des Autors sind sie wirklich irrelevant, also werden sie es tun nicht gesondert erläutert werden.

JSON-Format oder -Regeln:

JSON kann die Datenstruktur auf sehr einfache Weise beschreiben. Es kann alles, was XML kann, daher gibt es keinen Unterschied zwischen den beiden im Hinblick auf die Überschneidung. Plattform Gleichermaßen gleich.

JSON hat nur zwei Datentypdeskriptoren, geschweifte Klammern {} und eckige Klammern []. Die übrigen englischen Doppelpunkte sind Zuordnungszeichen, englische Kommas sind Trennzeichen und englische doppelte Anführungszeichen „“ sind definierende Zeichen.

Die geschweiften Klammern {} werden verwendet, um einen Satz „verschiedener Arten ungeordneter Schlüssel-Wert-Paarsätze“ zu beschreiben (jedes Schlüssel-Wert-Paar kann als OOP-Attributbeschreibung verstanden werden), und die eckigen Klammern [ ] werden verwendet, um eine Reihe von „geordneten Datensammlungen desselben Typs“ zu beschreiben (kann OOP-Arrays entsprechen).

Wenn es in den beiden oben genannten Sätzen mehrere Unterelemente gibt, sollten diese durch Kommas getrennt werden.

Die Schlüssel-Wert-Paare werden durch einen englischen Doppelpunkt getrennt: und es wird empfohlen, die Schlüsselnamen mit englischen doppelten Anführungszeichen „“ hinzuzufügen, um das Parsen verschiedener Sprachen zu erleichtern.

Die häufig verwendeten Datentypen in JSON sind nichts anderes als Zeichenfolgen, Zahlen, Boolesche Daten und Null. Zeichenfolgen müssen in doppelte Anführungszeichen gesetzt werden, der Rest wird nicht verwendet Allerdings schlage ich nur vor, dass, wenn der Client die Funktion zum Sortieren nach Datum nicht benötigt, das Datum und die Uhrzeit einfach direkt als Zeichenfolge übergeben werden können, was eine Menge Ärger ersparen kann.

JSON-Beispiel

// 描述一个人
var person = {
    "Name": "Bob",
    "Age": 32,
    "Company": "IBM",
    "Engineer": true
}
// 获取这个人的信息
var personAge = person.Age;
// 描述几个人
var members = [
    {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    },
    {
        "Name": "John",
        "Age": 20,
        "Company": "Oracle",
        "Engineer": false
    },
    {
        "Name": "Henry",
        "Age": 45,
        "Company": "Microsoft",
        "Engineer": false
    }
]
// 读取其中John的公司名称
var johnsCompany = members[1].Company;
// 描述一次会议
var conference = {
    "Conference": "Future Marketing",
    "Date": "2012-6-1",
    "Address": "Beijing",
    "Members": 
    [
        {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
        },
        {
            "Name": "John",
            "Age": 20,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "Henry",
            "Age": 45,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]
}
// 读取参会者Henry是否工程师
var henryIsAnEngineer = conference.Members[2].Engineer;
Nach dem Login kopieren

Das ist alles über JSON. Weitere Einzelheiten finden Sie in den Informationen für eine eingehende Untersuchung während des Entwicklungsprozesses.

Was ist JSONP?

Lassen Sie uns zunächst darüber sprechen, wie JSONP entstanden ist:

Tatsächlich gibt es im Internet viele Erklärungen zu JSONP, aber sie sind alle gleich und verwirrend, was für viele Menschen schwierig ist Für diejenigen, die neu darin sind, gibt es einige Schwierigkeiten, aber es ist nicht trivial. Versuchen Sie, das Problem auf Ihre eigene Weise zu erklären und zu sehen, ob es hilft.

Ein bekanntes Problem besteht darin, dass direkte Ajax-Anfragen für normale Dateien das Problem eines domänenübergreifenden unbefugten Zugriffs haben, unabhängig davon, ob es sich um eine statische Seite, eine dynamische Webseite, einen Webdienst oder WCF handelt Da es sich um eine domänenübergreifende Anfrage handelt, ist sie nicht zulässig.

Wir haben jedoch auch festgestellt, dass es beim Aufrufen von js-Dateien auf einer Webseite keinen Einfluss darauf hat, ob es sich um eine domänenübergreifende Anfrage handelt (nicht nur das). Wir haben auch festgestellt, dass alle Tags mit dem Attribut „src“ über domänenübergreifende Funktionen verfügen, z um die Daten in eine js-Formatdatei auf dem Remote-Server zu laden, damit sie vom Client aufgerufen und weiterverarbeitet werden können;

恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;

这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。

客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。

为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

那AJAX和JSONP有有什么联系呢?

ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage