Domänenübergreifende Anforderungsmethode über jQuery + JSONP (ausführliches Tutorial)-js-Tutorial-php.cn

Nachdem Sie JSONP verstanden haben, sollte jeder auch verstehen, dass JSONP hauptsächlich zum Abrufen domänenübergreifender Daten verwendet wird. Heute werden wir ausführlich besprechen, wie JSONP in der Praxis angewendet werden kann, um domänenübergreifendes

JSONP (JSON mit) zu erreichen Padding) ist ein „Nutzungsmodus“ von JSON, mit dem das Problem des domänenübergreifenden Datenzugriffs in Mainstream-Browsern gelöst werden kann. Aufgrund der Same-Origin-Richtlinie können Webseiten, die sich auf server1.example.com befinden, im Allgemeinen nicht mit anderen Servern als server1.example.com kommunizieren, mit Ausnahme des HTML-Elements . Mithilfe dieser offenen Richtlinie des -Elements können Webseiten dynamisch aus anderen Quellen generierte JSON-Daten abrufen. Dieses Verwendungsmuster wird als JSONP bezeichnet. Bei den mit JSONP erfassten Daten handelt es sich nicht um JSON, sondern um beliebiges JavaScript, das mit einem JavaScript-Interpreter ausgeführt wird, anstatt mit einem JSON-Parser analysiert zu werden.

Der obige Absatz stammt aus der Baidu-Enzyklopädie. Konzepte sind immer so abstrakt und schwer zu verstehen. Der intuitivste Ausdruck ist, sich Beispiele anzusehen. Nachdem Sie zu viele Beispiele gesehen und diesen Punkt verstanden haben, werden Sie natürlich lernen, ihn abstrakt zu beschreiben. Aus diesem Grund wird oft gesagt, dass „das Erlernen von Wissen ein Prozess von dünn nach dick und von dick nach dünn“ ist. Okay, lass uns zu weit gehen. Schauen wir uns direkt ein Beispiel an.

Problem: Es gibt eine lokale Seite demo.html, die Daten von http://localhost:3561/User/GetAllNames abrufen und anzeigen muss.

Antwort: Da sich die beiden Parteien in der Frage nicht auf demselben Server befinden, muss JSONP für den domänenübergreifenden Zugriff verwendet werden.

① Client-Schreiben

Der Client verwendet die in jQuery bereitgestellte Methode $.getJson für den domänenübergreifenden Zugriff. getJson hat 3 Parameter:

I. URL: Anforderungsadresse;

III.

Die Verwendungsmethode von getJson ist im Grunde die gleiche wie bei der gewöhnlichen $.get-Methode. Der Unterschied besteht darin, dass getJson dem Parameterteil automatisch „?“ hinzufügen muss eins. Funktionsname zum Ausführen der Callback-Funktion. Betreiben Sie dann das von der Fremddomäne zurückgegebene JSON-Objekt in der Rückruffunktion, und der Parameter des Rückruffunktionsrückrufs ist das JSON-Objekt.

$.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) { for (var i = 0; i " + json[i] + " "); } }); Nach dem Login kopieren ② Serverseitiges Schreiben

Die Logik der Serverseite besteht hauptsächlich darin, die Daten in eine JSON-Zeichenfolge zu serialisieren und sie dann in die Form von „callback(json)“ zu kapseln. . Der Rückruf wird automatisch vom jQuery-Funktionsnamen generiert und an den Server übermittelt. Folgendes wird mit C# implementiert:

public class UserController : Controller { public string GetAllNames(string callback) { string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" }; JavaScriptSerializer jss = new JavaScriptSerializer(); string json = jss.Serialize(names); return string.Format("{0}({1})", callback, json); } } Nach dem Login kopieren Zu diesem Zeitpunkt wurde das Problem erfolgreich gelöst.

Überlegung: Wenn der Server einen hartcodierten Rückruf hat (zum Beispiel: return string.Format("moty({0})", json);), dann ist der Kunde Wie schreibe ich es?

Referenz:

$.ajax("http://localhost:3561/User/GetAllNames", { jsonpCallback: "moty", dataType: "jsonp", success: function(json) { for (var i = 0; i " + json[i] + " "); } } }); Nach dem Login kopieren Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwendung von ES6 zur Lösung des Speicherverlustproblems durch WeakMap (ausführliches Tutorial)

Node.JS Schleifenlöschung Alle Dateien in nicht leeren Ordnern und Unterverzeichnissen

Detaillierte Erläuterung der Beziehung zwischen Prototyp und __proto__ in Javascript

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Domänenübergreifende Anforderungsmethode über jQuery + JSONP (ausführliches Tutorial)