Ausführliche Erläuterung von Beispielen für domänenübergreifende Methoden in js_javascript-Kenntnissen-js-Tutorial-php.cn

Ausführliche Erläuterung von Beispielen für domänenübergreifende Methoden in js_javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:53:23

Original

1150 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben die Methode der domänenübergreifenden Implementierung in js. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

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 domänenübergreifendes Datenaustauschprotokoll ist, das von Entwicklern erstellt wurde.

Das

script-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 zum Anfordern das Skript-Tag ()
Bevor Sie das Skript-Tag zum Anfordern verwenden, deklarieren Sie zunächst die Rückruffunktion

<script>
function 回调函数名(data数据){ 。。。。 }
</script>
<script src="http://....jsp&#63;callback=回调函数名"></script>

Nach dem Login kopieren

Die Verwendung von JSON zur Übertragung von Javascript-Objekten ist die einfachste Möglichkeit. Diese domänenübergreifende Kommunikationsmethode wird JSONP genannt.

Remote-Server-Patchwork-Zeichenfolge:

Callback-Funktionsname ({"name1": "data1", "name2", "data2"})

Diese Art von JSON-Daten werden im Hintergrund zusammengesetzt und in Form von übergebenen Parametern über die Rückruffunktion an den Client zurückgegeben
(Sie können es direkt aufrufen, was der Auswertung der erhaltenen Zeichenfolge entspricht)

Zum Beispiel:

function databack(data){ alert(data.name1) }
// 会输出显示"data1"

Nach dem Login kopieren

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

Nach dem Login kopieren

oder Kurzform

var url = "http://.....jsp&#63;callback=&#63;";
// 在jquery中此处的callback值可以为任意，
// 因为jquery进行处理后都是利用success回调函数进行数据的接受；
$.getJSON( url, function(data){ alert(data.name1) });

Nach dem Login kopieren

Methode 3:

Ajax Cross-Domain-Server-Proxy

Richten Sie ein Proxy-Programm (proxy.jsp...) im Hintergrund derselben Quelle ein;
Interagieren Sie serverseitig mit Servern in fremden Domänen.

JQuery-Frontend-Datenübertragung:

Zum Beispiel:

$.get(
　　 'http://。。。.jsp', // 代理程序地址
　　 {
　　  name1 : "data1",
　　  name2 : "data2"
　　 },
　　 function(data){
　　 if(data == 1) alert('发送成功！');
　　 }
);

Nach dem Login kopieren

Hintergrunddatenverarbeitung:

String data1 = request.getParameter("name1");
........
// 此处的url为另一域下的地址并带有参数
String url = "http://.....com/.../sss.jsp&#63;" +　"name1=" + data1+　"name2=" + data2;
// 跳转到另一个域进行数据的处理并返回json格式的数据
request.getRequestDispatcher(url).forward(request,response);

Nach dem Login kopieren

Methode 4:

Verwenden Sie das src-Attribut des Iframe-Tags, um einen domänenübergreifenden Zugriff durchzuführen, den erhaltenen Wert im aktuellen Iframe zu speichern und dann den Wert im Hauptteil des Iframes auf derselben Seite abzurufen.

<body>
  <div id="show"></div>
  <iframe id="frame" style="display: none;"></iframe>
</body>
<script>
$("#frame").attr("src", "路径&#63;time=" + new Date().getTime()).load(function(){
 // 获取iframe标签的值并进行获取，显示到页面
 $("#show").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text()+ " ]");
});
</script>

Nach dem Login kopieren

Methode 5:

Websocket in HTML5 kann domänenübergreifenden Zugriff ermöglichen;

Erstellen Sie ein Websocket-Objekt:

Code kopieren Der Code lautet wie folgt:

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

Nach dem Login kopieren

Der Hintergrund kann Java, PHP, NodeJS usw. sein. Verwenden Sie für die Datenverarbeitung das Ereignis „time onmessage“, um eine Front-End-Verarbeitung für den zurückgegebenen Wert durchzuführen.

ws.onmessage = function(eve){
console.log(eve.data);
}

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.