Heim > Artikel > Web-Frontend > Domänenübergreifende Anforderungsmethode über jQuery + JSONP (ausführliches Tutorial)

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

亚连Original: 2018-06-01 10:46:101511Durchsuche

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a. Mithilfe dieser offenen Richtlinie des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-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.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
  <ul id="nameList"></ul>

  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript">
    $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) {
      for (var i = 0; i < json.length; i++) {
        $("#nameList").append("<li>" + json[i] + "</li>");
      }
    });
  </script>
</body>
</html>

　② 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);
  }
}

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.length; i++) {
      $("#nameList").append("<li>" + json[i] + "</li>");
    }
  }
});

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

Das obige ist der detaillierte Inhalt vonDomänenübergreifende Anforderungsmethode über jQuery + JSONP (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwendung der JS-Callback-Funktion (mit Code)Nächster Artikel：Verwendung der JS-Callback-Funktion (mit Code)

In Verbindung stehende Artikel

Mehr sehen