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

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 <script>-Tags hinzufügt, um Serverskripte aufzurufen. Obwohl jQuery JSONP als eine Form von AJAX kapselt, ist JSONP keine Form oder ein Sonderfall von AJAX. <br /> <br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="8779" class="copybut" id="copybut8779" onclick="doCopy('code8779')"><U>Code kopieren Der Code lautet wie folgt:<div class="codebody" id="code8779"><br /> $.ajax({<br /> URL: „<a href="http://query.yahooapis.com/v1/public/yql">http://query.yahooapis.com/v1/public/yql“,<br /> jsonpCallback: „showPrice“,<br /> ​ jsonp: „callback“,<br /> // Sag jQuery, dass wir JSONP erwarten<br /> Datentyp: „jsonp“,<br /> Daten: {<br /> ​​​​ q: „Titel, Zusammenfassung, URL aus search.news auswählen, wobei query="cat" ist“,<br /> Format: „json“<br /> },<br /> // mit der Antwort arbeiten<br /> Erfolg: Funktion(Daten) {<br />             console.log( data ); // Serverantwort<br /> }<br /> });<br /> <p>Ajax-Anfrageparameterbeschreibung: <p><strong>dataType String <p>Der Datentyp, der voraussichtlich vom Server zurückgegeben wird. Wenn nicht angegeben, trifft jQuery automatisch intelligente Entscheidungen basierend auf den MIME-Informationen des HTTP-Pakets. Beispielsweise wird der XML-MIME-Typ als XML erkannt. In 1.4 generiert JSON ein JavaScript-Objekt und das Skript führt das Skript aus. Die vom Server zurückgegebenen Daten werden dann basierend auf diesem Wert analysiert und an die Rückruffunktion übergeben. Verfügbare Werte: <p>"xml": Gibt ein XML-Dokument zurück, das mit jQuery verarbeitet werden kann. <p>„html“: Gibt reine Text-HTML-Informationen zurück; das enthaltene Skript-Tag wird ausgeführt, wenn es in den Dom eingefügt wird. <p>"script": Gibt Nur-Text-JavaScript-Code zurück. Ergebnisse werden nicht automatisch zwischengespeichert. Es sei denn, der Parameter „Cache“ ist gesetzt. '''Hinweis:''''Bei Remote-Anfragen (nicht unter derselben Domäne) werden alle POST-Anfragen in GET-Anfragen umgewandelt. (Da zum Laden das DOM-Skript-Tag verwendet wird) <p>"json": Gibt JSON-Daten zurück. <p>"jsonp": JSONP-Format. Beim Aufrufen einer Funktion im JSONP-Format, z. B. „myurl?callback=?“, ersetzt jQuery automatisch ? durch den richtigen Funktionsnamen, um die Callback-Funktion auszuführen. <p>"text": Gibt eine einfache Textzeichenfolge zurück<br /> <br /> <strong>jsonp, <br /> <br /> Schreiben Sie den Namen der Rückruffunktion in der JSONP-Anfrage neu. Der Wert wird verwendet, um den „Callback“-Teil in den URL-Parametern von GET- oder POST-Anfragen zu ersetzen, z. B. „callback=?“. Beispielsweise führt {jsonp:'onJsonPLoad'} dazu, dass „onJsonPLoad“ an den Server übergeben wird. <br /> <br /> <strong>jsonpCallback, <br /> <br /> Geben Sie einen Callback-Funktionsnamen für JSONP an. Dieser Wert wird anstelle des von jQuery automatisch generierten zufälligen Funktionsnamens verwendet. Dies wird hauptsächlich verwendet, um jQuery die Generierung eindeutiger Funktionsnamen zu ermöglichen, um die Verwaltung von Anforderungen sowie die Bereitstellung von Rückruffunktionen und Fehlerbehandlung zu erleichtern. Sie können diesen Rückruffunktionsnamen auch angeben, wenn der Browser GET-Anfragen zwischenspeichern soll. Bei der tatsächlichen Verwendung besteht jedoch keine Notwendigkeit, eine Rückruffunktion zu schreiben, wie z. B. showPrice in diesem Beispiel, und es wird kein Fehler gemeldet, wenn Sie sie nicht schreiben, da jQuery bei der Verarbeitung von JSONP und Takes automatisch eine Rückruffunktion für Sie generiert Geben Sie die Daten aus, um die Erfolgsmethode aufzurufen. Es könnte so aussehen: <p><div class="codetitle"><span><a style="CURSOR: pointer" data="75667" class="copybut" id="copybut75667" onclick="doCopy('code75667')"><U>Code kopieren Der Code lautet wie folgt:<div class="codebody" id="code75667"><br /> function success_jsonpCallback(data) { success(data); } <br /> <p>Das Obige ist der gesamte Inhalt dieses Artikels. Haben Sie ein detailliertes Verständnis von JSONP? Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und wir können es gemeinsam besprechen. </script>