suchen

Heim >Web-Frontend >js-Tutorial >Zusammenfassung der Methoden zur domänenübergreifenden Implementierung in Javascript_Javascript-Kenntnissen

Zusammenfassung der Methoden zur domänenübergreifenden Implementierung in Javascript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:52:481221Durchsuche

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.

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 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&#63;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&#63;" +　"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", "路径&#63;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");

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

　　　　}

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：Eine kurze Diskussion über die Datebox-Formatierung time_jquery von jQuery.easyuiNächster Artikel：Eine kurze Diskussion über die Datebox-Formatierung time_jquery von jQuery.easyui

In Verbindung stehende Artikel

Mehr sehen