Ausführliche Erläuterung der Schritte zur Verwendung domänenübergreifender jQuery+JSONP-Anfragen

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte für die Verwendung von jQuery+ JSONP-Cross-Domain-Anfrage geben. Was sind die Vorsichtsmaßnahmen für die Verwendung von jQuery+JSONP-Cross-Domain-Anfrage? Domain-Anfrage? Das Folgende ist ein Blick auf praktische Fälle.

JSONP(JSON mit Padding) ist ein „Verwendungsmuster“ von JSON, mit dem das Problem des domänenübergreifenden Datenzugriffs durch gängige Browser gelöst werden kann. Aufgrund der Same-Origin-Richtlinie, im Allgemeinen in Die Webseite server1.example.com kann nicht mit einem anderen Server als server1.example.com und HTML kommunizieren Eine Ausnahme bildet das Mithilfe dieser offenen Richtlinie des -Elements können Webseiten dynamisch generierte Skripte aus anderen Quellen abrufen. JSON-Daten, und dieses Nutzungsmuster wird JSONP genannt. Bei den mit JSONP erfassten Daten handelt es sich nicht um JSON, sondern um beliebige JavaScript Der JavaScript-Interpreter wird ausgeführt, anstatt mit dem JSON-Parser zu analysieren.

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: „Wissen zu lernen ist ein Prozess von dünn nach dick und von dick nach dünn.“ 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.

① Kundenschreiben

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

I. URL: Adresse anfordern;

II. Daten: an den Server gesendete Parameter

III. Rückruf: Rückruffunktion bei Erfolg.

Die Verwendungsmethode von getJson ist im Grunde dieselbe wie die normale $.get-Methode. Der Unterschied besteht darin, dass getJson den festen Teil callback=? zum Parameterteil hinzufügen muss Wird automatisch ersetzt? ist der richtige 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] + " "); } }); ② Serverseitiges Schreiben

Die Logik des Servers besteht hauptsächlich darin, die Daten in json string zu serialisieren und sie dann in die Form von „callback(json)“ zu kapseln. Der Callback ist der von jQuery automatisch generierte und an den übergebene Funktionsname Server. 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); } } „Zu diesem Zeitpunkt wurde das Problem erfolgreich gelöst.

Überlegung: Wenn der Rückruf hart auf dem Server geschrieben wurde (zum Beispiel: return string.Format("moty({0})", json);), wie sollte der Client ihn dann schreiben?

Referenz:

$.ajax("http://localhost:3561/User/GetAllNames", { jsonpCallback: "moty", dataType: "jsonp", success: function(json) { for (var i = 0; i " + json[i] + " "); } } }); Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der Node-Prozess- und Child_Process-Module

vue2.0 durchläuft und Lädt alle Bilder Methode