Heim > Artikel > Web-Frontend > Zusammenfassung der Methoden zur domänenübergreifenden Implementierung in Javascript_Javascript-Kenntnissen
Aufgrund der Einschränkungen der Same-Origin-Richtlinie darf XMLHttpRequest nur Ressourcen von der aktuellen Quelle anfordern (einschließlich Domänenname, Protokoll und Port).
Der Unterschied zwischen JSON und JSONP:
JSON ist ein Datenaustauschformat, während JSONP ein inoffizielles, von Entwicklern erstelltes domänenübergreifendes Dateninteraktionsprotokoll ist.
Dasscript-Tag wird häufig zum Laden von Ressourcen aus verschiedenen Domänen verwendet und kann die Same-Origin-Richtlinie umgehen. (Jeder mit dem src-Attribut kann fremde Dateien erhalten).
Wenn es sich bei den angeforderten Remote-Daten selbst um ausführbare JS handelt, werden diese JS ausgeführt (entspricht eval).
Methode 1:
Verwenden Sie das Skript-Tag, um anzufordern (520416d5f1b48440315aedc71c3370a22cacc6d41bbb37262a98f745aa00fbf0)
Bevor Sie das Skript-Tag zum Anfordern verwenden, deklarieren Sie zunächst die Rückruffunktion
<script> function 回调函数名(data数据){ 。。。。 } </script> <script src="http://....jsp?callback=回调函数名"></script>
Die Verwendung von JSON zur Übertragung von Javascript-Objekten ist die einfachste Möglichkeit. Diese domänenübergreifende Kommunikationsmethode wird JSONP genannt.
Zeichenfolge für den Remote-Server:
Name der Rückruffunktion ({"name1": "data1", "name2", "data2"})
Diese Art von JSON-Daten werden im Hintergrund zusammengesetzt und mithilfe der Callback-Funktion zur Übergabe von Parametern an den Client zurückgegeben
(Sie können es direkt aufrufen, was der Auswertung der erhaltenen Zeichenfolge entspricht)
Zum Beispiel: function databack(data){ alarm(data.name1) } // Gibt „data1“ aus und zeigt es an
Methode 2:
Es ist einfacher, die Fremdlademethode mit jquery zu implementieren (dasselbe wie die asynchrone Anforderungsmethode von Ajax)
$.ajax({ type : "get", dataType:"json", success : function(data){ alert(data.name1) }; })
oder Kurzform
var url = "http://.....jsp?callback=?" // Der Callback-Wert hier in jquery kann beliebig sein, weil
Nachdem die Abfrage verarbeitet wurde, wird die Erfolgsrückruffunktion verwendet, um Daten zu akzeptieren
$.getJSON( url, function(data){ alarm(data.name1) });
Methode drei:
Ajax Cross-Domain-Server-Proxy
Richten Sie im Hintergrund ein Proxy-Programm (proxy.jsp...) ein, das auf der Serverseite mit dem Server in einer fremden Domäne interagiert.
Jquery-Frontend-Datenübertragung:
Zum Beispiel:
$.get( 'http://。。。.jsp', // 代理程序地址 { name1 : "data1", name2 : "data2" }, function(data){ if(data == 1) alert('发送成功!'); } );
Hintergrunddatenverarbeitung:
String data1 = request.getParameter("name1"); ........ // 此处的url为另一域下的地址并带有参数 String url = "http://.....com/.../sss.jsp?" + "name1=" + data1+ "name2=" + data2; // 跳转到另一个域进行数据的处理并返回json格式的数据 request.getRequestDispatcher(url).forward(request,response);
Methode 4:
Verwenden Sie das src-Attribut des Iframe-Tags, um einen domänenübergreifenden Zugriff durchzuführen, speichern Sie den erhaltenen Wert im aktuellen Iframe und dann
Rufen Sie den Wert im Hauptteil des Iframes auf derselben Seite ab.
<body> <div id="show"></div> <iframe id="frame" style="display: none;"></iframe> </body> <script> $("#frame").attr("src", "路径?time=" + new Date().getTime()).load(function(){ // 获取iframe标签的值并进行获取,显示到页面 $("#show").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text() + " ]"); }); </script>
Methode 5:
Websocket in HTML5 kann domänenübergreifenden Zugriff ermöglichen;
Erstellen Sie ein Websocket-Objekt:
var ws = new WebSocket(url);
Die wichtigsten verarbeiteten Ereignistypen sind (onopen, onclose, onmessage, onerror);
Zum Beispiel:
ws.onopen = function(){ console.log("open"); // 向后台发送数据 ws.send("open"); }
ws.onmessage = function(eve){ console.log(eve.data); }