JSONP soll dieses Problem lösen. JSONP ist die Abkürzung von JSON mit Polsterung auf Englisch und ein inoffizielles Protokoll. Er ermöglicht dem Server, Skript -Tags zu generieren, den der Wert des Wertes zurückgeben und den Site -Zugriff über die Form des JavaScript -Rückrufs erkennen. JSONP ist eine Skript -Tag -Injektion. Die vom Server zurückgegebene Antwort auf die Seite besteht darin, bestimmte Funktionen zu implementieren.
Kurz gesagt, JSONP selbst ist keine komplizierte Sache, es umgeht die homologe Richtlinie des Browsers durch das Scipt -Tag.
Heutzutage wird die Anwendung von Jushi immer weniger effektiv. Viele Internetunternehmen werden in späteren Phasen verteilte Architekturen verwenden.
Dann gibt es ein Problem damit, JSON unter verschiedenen Domainnamen auf der Seite anzurufen
(Cross-Domain: Verschiedene Domain-Namen, gleiche Domain-Namen, aber unterschiedliche Ports)
Der in der JavaScript -Spezifikation erwähnte JSON kann nicht direkt über Domänen aufgerufen werden. Für die Sicherheit kann es JS -Fragmente anrufen.
Wickeln Sie JSON in ein JS-Fragment, das heißt JSONP, dann Cross-Domain-Anfragen
Nach dem Frühjahr 4.1 werden neue Methoden als Anrufe an JSONP bereitgestellt
Beispiel:
@RequestMapping (value = "/list") @Responbody Public Object getItemcatList (String -Callback) {itemCatResult result = itemcatService.getItemcatlist (); if (stringutils.isblank (callback)) {// Ergebnis muss in ein String -Rückgabeergebnis konvertiert werden; } // Wenn die Zeichenfolge nicht leer ist, müssen Sie JSONP -Anruf Spring4.1 unterstützen. MapingjacksonValue mapPingjacksonValue = new mapingjacksonValue (Ergebnis); mapingjacksonValue.setjsonPfunction (Callback); return mapingjacksonValue; }Wie im Bild gezeigt, ist dies JSONP
Solange Sie JSONP aufrufen müssen, können Sie dann Daten über Domänen hinweg aufrufen, nachdem eine kleine Verarbeitung erforderlich ist.
Ich habe ein Beispiel gemacht, um JSONP auf der Seite anzuzeigen:
(JS ist ein bisschen hässlich. Ich wurde im Backend geboren, und die Helden im vorderen Ende werden ~ geschliffen ~)
var mseu = function () {return {getMenudata: function (json) {console.log (json); var data = json.data; var html = ""; für (var i = 0; i <data.length; i ++) {var url = data [i] .u; var name = data [i] .n; var sub = data [i] .i; html += "<li class = 'Dropdown-Submenu'>"; html += "<span class = 'c-arrow c-toggler'> </span>"; html += "</a>"; html += "<ul class = 'Dropdown-Menu c-pull-right'>"; für (var j = 0; j <sub.length; j ++) {var url = sub [j] .U; var name = sub [j] .n; var node = sub [j] .i; html += "<li class = 'Dropdown-Submenu'>"; html + = "<a href = '" + url + "'>" + name; html += "<span class = 'c-arrow c-toggler'> </span>"; html += "</a>"; html += "<ul class = 'Dropdown-Menu c-pull-right'>"; für (var k = 0; k <node.length; k ++) {// Debugger var name = node [k]; var last = name.split ("|"); html += "<li>"; html + = "<a href = '" + last [0] + "'>" + last [1] + "</a>"; html += "</li>"; } html += "</ul>"; html += "</li>"; } html += "</ul>"; html += "</li>"; } $ ("#itemCatMenu"). HTML (HTML); }, getJsonp: function (Serverurl, Callbackfun) {$ .ajax ({Typ: "get", url: serverurl, DataType: "JSONP", JSONP: "CALLBACK", JSONPCallback: CallbackFun, Erfolg: Funktion (JSON) {// console.log (JSON); {console.log (e);}}}); }}; } (); $ (Dokument) .Ready (function () {var serverurl = "http: // localhost: 8088/rest/mseu/list"; mseu.getJsonp (Serverurl, "mseu.getMenudata");});Gezeigte Effekte: