suchen

Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Diskussion über den Unterschied zwischen JSON und JSONP und die Verwendung von jQuerys Ajax jsonp_jquery

Eine kurze Diskussion über den Unterschied zwischen JSON und JSONP und die Verwendung von jQuerys Ajax jsonp_jquery

WBOY
WBOYOriginal
2016-05-16 16:30:401414Durchsuche

JSON und JSONP

JSON (JavaScript Object Notation) ist ein leichtes Datenaustauschformat, das zum Austausch von Informationen zwischen Browsern und Servern verwendet wird.

JSONP (JSON With Padding) ist JSON (oder verpacktes JSON), verpackt in einem Funktionsaufruf.

JSON ist ein Datenformat und JSONP ist eine Datenaufrufmethode.

Code kopieren Der Code lautet wie folgt:

//JSON
{
„Name“: „jd“
}

Code kopieren Der Code lautet wie folgt:

//JSONP
Rückruf({
„Name“: „jd“
})

Aus Sicherheitsgründen können Skripte (AJAX) nicht auf Inhalte außerhalb dieser Domain zugreifen. Statische Ressourcen sind jedoch nicht durch Domänenrichtlinien eingeschränkt und können Skripte, Stile, Bilder und andere statische Ressourcen aus jeder Domäne laden. JSOP nutzt dieses Prinzip, um eine domänenübergreifende Datenerfassung zu erreichen.

Beispiel 1:

Code kopieren Der Code lautet wie folgt:

//ShoPrice-Funktion definieren
Funktion showPrice(data) {
Alert("Symbol: " data.symbol ", Preis: " data.price);
}

Code kopieren Der Code lautet wie folgt:

//ShowPrice-Funktion und Parameter in die Webseite einbinden


Dieses Beispiel zeigt, wie eine JavaScript-Funktion mit statischen JSON-Daten als Parameter aufgerufen wird.

Beispiel 2:

Der erste Funktionsaufruf kann in eine js-Datei geschrieben und auf dem Server abgelegt, mit einem Skript-Tag in die Seite geladen werden, und dieses Tag kann dynamisch erstellt werden.

Code kopieren Der Code lautet wie folgt:


Der Inhalt von remote.js ist derselbe wie das, was zuvor im Tag geschrieben wurde:

1 showPrice({symbol: 'IBM', Preis: 91,42});

Der dynamisch eingefügte JavaScript-Code übernimmt die zu übergebenden JSON-Daten als Parameter und den Parameter der showPrice-Funktionsaufrufanweisung.

Die Frage ist also: Sollte die Funktion showPrice jedes Mal aufgerufen werden, wenn die Daten abgerufen werden? Dies erfordert eine Vereinbarung zwischen Front-End- und Back-End-Programmierern. Dies führt natürlich zu großen Unannehmlichkeiten, insbesondere wenn die Schnittstelle für die öffentliche Entwicklung geöffnet ist. JSOP wird auf diese Weise verarbeitet: Das Front-End unterstützt die Übergabe eines Callback-Funktionsnamensparameters, das Back-End empfängt den Callback-Funktionsnamensparameter, generiert dann einen Aufruf an die Funktion, übergibt die JSON-Daten als Parameter und fügt sie ein in die Seite ein, wenn es den Client erreicht, um die Ausführung zu starten.

Beispiel 3:

Code mit Rückrufparametern dynamisch einfügen:

Code kopieren Der Code lautet wie folgt:


Codeausschnitt des in PHP im Backend implementierten JSONP-Dienstes:

Code kopieren Der Code lautet wie folgt:

$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// Drucken: showPrice({"symbol" : "IBM", "price" : "91.42"});

Es passt gut zur Definition von JSONP und packt JSON-Daten in Funktionsaufrufe.

Die obigen Beispiele stammen von:

Verwendung von JSONP für die domänenübergreifende Kommunikation, Teil 1: Erstellen Sie schnell leistungsstarke Mashups mit JSONP und jQuery

JSONP mit jQuery verwenden
Die Aufrufmethoden von AJAX und JSONP in jQuery sehen sehr ähnlich aus. Lassen Sie sich von diesem Phänomen nicht verwirren. AJAX erhält Nicht-Seiteninhalte über das XMLHttpRequest-Objekt, während JSONP dynamisch