So implementieren Sie jQuery+JSONP domänenübergreifend

Dieses Mal zeige ich Ihnen, wie Sie jQuery+JSONP domänenübergreifend implementieren und welche Vorsichtsmaßnahmen für die domänenübergreifende Implementierung von jQuery+JSONP gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 zu erreichen (JSON mit Padding) ist ein „Nutzungsmodus“ von JSON, mit dem das Problem des domänenübergreifenden Datenzugriffs durch Mainstream-Browser 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.

② Serverseitiges Schreiben $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) { for (var i = 0; i " + json[i] + " "); } }); 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 von jQuery generiert und der Funktionsname an den Server übergeben. Folgendes wird mit C# implementiert:

Zu diesem Zeitpunkt wurde das Problem erfolgreich gelöst. 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); } }

Ü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:

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! $.ajax("http://localhost:3561/User/GetAllNames", { jsonpCallback: "moty", dataType: "jsonp", success: function(json) { for (var i = 0; i " + json[i] + " "); } } }); Empfohlene Lektüre:

So verwenden Sie die Select-Komponente in JQuery

So erzielen Sie den JQuery-Carriage-Return-Anmeldeeffekt

Fall und detaillierte Erklärung des Mouse-Out-Ereignisses

Anwendung und Analyse benutzerdefinierter jQuery-Funktionen