suchen

Heim >Web-Frontend >js-Tutorial >Allgemeine domänenübergreifende Kommunikationsmethoden für Javascript_Javascript-Kenntnisse

Allgemeine domänenübergreifende Kommunikationsmethoden für Javascript_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:22:231587Durchsuche

In diesem Artikel werden hauptsächlich einige gängige domänenübergreifende JavaScript-Kommunikationsmethoden vorgestellt. Erklären Sie zunächst JSONP.
1. JSONP
JSONP (JSON with Padding) ist ein „Nutzungsmodus“ von JSON, mit dem das Problem des domänenübergreifenden Datenzugriffs durch Mainstream-Browser 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.
Als nächstes stellen wir die spezifische Implementierung von JSONP vor.
Wir wissen, dass die Webseite bedingungslos ausgeführt werden kann, selbst wenn der Code in der domänenübergreifenden JS-Datei enthalten ist (was natürlich der Sicherheitsrichtlinie für Webskripts entspricht). Im Stammverzeichnis des Remote-Servers remoteserver.com befindet sich eine remote.js-Datei mit dem folgenden Code:
alert('Ich bin eine Remote-Datei');
Der lokale Server localserver.com hat einen jsonp.html-Seitencode wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title></title> 
 <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> 
</head> 
<body> 
 
</body> 
</html>

Es besteht kein Zweifel, dass auf der Seite ein Eingabeaufforderungsfenster angezeigt wird, das anzeigt, dass der domänenübergreifende Aufruf erfolgreich war.

Jetzt definieren wir eine Funktion auf der Seite jsonp.html und rufen sie dann auf, indem wir Daten in remote remote.js übergeben. Der jsonp.html-Seitencode lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title></title> 
 <script type="text/javascript"> 
 var localHandler = function(data){ 
  alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result); 
 }; 
 </script> 
 <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> 
</head> 
<body> 
 
</body> 
</html>

Der Dateicode remote.js lautet wie folgt:
localHandler({"result": "Ich bin die von remote js gebrachten Daten"}
Nach erfolgreicher Ausführung scheint der Zweck der domänenübergreifenden Remote-Datenerfassung erreicht zu sein, es stellt sich jedoch eine andere Frage: Wie teile ich dem Remote-JS den Namen der lokalen Funktion mit, die er aufrufen soll? Zu diesem Zeitpunkt müssen wir nur das vom Server bereitgestellte js-Skript dynamisch generieren. Der Aufrufer kann dem Server durch Übergabe von Parametern mitteilen, welche Funktionen er benötigt 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title></title> 
 <script type="text/javascript"> 
 // 得到航班信息查询结果后的回调函数 
 var flightHandler = function(data){ 
  alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。'); 
 }; 
 // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码） 
 var url = "http://flightQuery.com/jsonp/flightResult.aspx&#63;code=CA1998&callback=flightHandler"; 
 // 创建script标签，设置其属性 
 var script = document.createElement('script'); 
 script.setAttribute('src', url); 
 // 把script标签加入head，此时调用开始 
 document.getElementsByTagName('head')[0].appendChild(script); 
 </script> 
</head> 
<body> 
 
</body> 
</html>
Dieses Mal hat sich der Code stark geändert. Er schreibt nicht mehr direkt die Remote-JS-Datei, sondern den Kernteil der JSONP-Client-Implementierung Der gesamte Prozess des JSONP-Aufrufs.

Wir sehen, dass in der aufrufenden URL ein Codeparameter übergeben wird, der dem Server mitteilt, dass ich die Informationen des Fluges CA1998 überprüfen möchte, und der Rückrufparameter teilt dem Server mit, dass meine lokale Rückruffunktion „flightHandler“ heißt, also übergeben Sie bitte die Abfrage führt zu diesem Funktionsaufruf. Diese Seite mit dem Namen „flightResult.aspx“ generiert einen solchen Code und stellt ihn jsonp.html zur Verfügung (die serverseitige Implementierung wird hier nicht demonstriert. Sie hat nichts mit der von Ihnen gewählten Sprache zu tun. Letztendlich ist sie das nur Saiten verbinden): 

flightHandler({ 
 "code": "CA1998", 
 "price": 1780, 
 "tickets": 5 
});
Was an die Funktion „flightHandler“ übergeben wird, ist ein JSON, das die grundlegenden Informationen des Fluges beschreibt. Führen Sie die Seite aus, ein Eingabeaufforderungsfenster wird erfolgreich angezeigt und der gesamte JSONP-Ausführungsprozess ist erfolgreich abgeschlossen!

Es gibt jedoch ein Problem mit JSONP. Der Remote-Server ist für das Packen der JSON-Daten und den Aufruf der benannten Funktion verantwortlich. Bei der Verwendung von JSONP müssen Sie den vom Server bereitgestellten Daten vollständig vertrauen Übernehmen Sie die Bewerbung. Als nächstes werden wir eine weitere Möglichkeit vorstellen, dieses Sicherheitsrisiko zu vermeiden.

2. CORS
CORS (Cross OriginResource Sharing, Cross-Origin-Ressourcenfreigabe) implementiert Cross-Origin-XMLHttpRequests. Cross-Origin-HTTP-Anfragen enthalten einen Origin-Header, der dem Server die Quellinformationen der HTTP-Anfrage bereitstellt. Der Header ist durch den Browser geschützt und kann nicht durch Anwendungscode geändert werden. Dieser Ansatz ist weitaus sicherer als die Auswertung externer Eingaben. In der Vergangenheit konnte Ajax nur Anfragen von derselben Quelle stellen, aber jetzt können über XMLHttpRequests Level 2 domänenübergreifende Anfragen gestellt werden. Angenommen, unsere Seite oder Anwendung befindet sich bereits auf http://www.test1.com und wir planen, die Datenextraktion von http://www.test2.com anzufordern. Unter normalen Umständen schlägt die Anforderung fehl, wenn wir AJAX direkt zum Anfordern verwenden, und der Browser gibt auch den Fehler „Quellenkonflikt“ zurück, woher „Cross-Domain“ kommt.
Mit CORS kann http://www.test2.com einfach einen Header hinzufügen, um Anfragen von http://www.test1.com zuzulassen. Der PHP-Code lautet wie folgt: 

header("Access-Comtrol-Allow-Origin:*");<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
Wobei * bedeutet, dass jede Domain Anfragen an unseren Server senden darf. Sie können auch einen bestimmten Domänennamen festlegen. Der Code lautet wie folgt: 


header("Access-Control-Allow-Origin:http://www.test2.com");

设置好头信息之后，其他域就可以进行请求了。
        使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。
xhr.open('GET', ' http://www.test2.com '); 
 接下来介绍另外一种实时通信方式：
3、Cross-document messaging
跨文档信息通信。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同原的web网页可以互相通信，也可以实现跨域通信。要想接受从其他窗口发送来的信息，必须对窗口对象的onmessage事件进行监听，其他窗口可以通过postmessage方法来传递数据，该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何js对象，第二个参数为接收消息的对象窗口的url地址。
下面进行试验，主页面index.html代码如下：

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title></title> 
 </head> 
<script type="text/javascript"> 
 function sendIt(){ 
  document.getElementById("otherPage").contentWindow 
  .postMessage(//向子窗口发出请求 
   document.getElementById("message").value,//值 
   "http://127.0.0.1:8020"//目标域 
  ) 
 } 
</script> 
 <body> 
  <iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html" id="otherPage" width="" height=""></iframe> 
  <br /><br /> 
  <input type="text" name="message" id="message" value="" /> 
  <input type="button" name="" id="" value="发送跨域消息" onclick="sendIt();" /> 
 </body> 
</html>

 窗口所引用页面other.html代码如下：

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title></title> 
<script type="text/javascript"> 
 window.addEventListener("message",function(event){//通过onmessage监听 
  //将从父窗口传来的数据展现出来 
  document.getElementById("content").innerHTML+=event.data+"<br>"; 
 },false); 
</script> 
 </head> 
 <body> 
  信息来自于另外一个域 
  <div id="content"> 
    
  </div> 
 </body> 
</html>

试验结果如下：


可以看到在81端口服务器中的index.html和8020端口的服务器中的other.html进行的通信。
完整代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
<script type="text/javascript">
 function sendIt(){
 document.getElementById("otherPage").contentWindow
 .postMessage(//向子窗口发出请求
 document.getElementById("message").value,//值
 "http://127.0.0.1:8020"//目标域
 )
 }
</script>
 <body>
 <iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html" id="otherPage" width="" height=""></iframe>
 <br /><br />
 <input type="text" name="message" id="message" value="" />
 <input type="button" name="" id="" value="发送跨域消息" onclick="sendIt();" />
 </body>
</html>

CrossDocumentMessaging_index.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
<script type="text/javascript">
 window.addEventListener("message",function(event){//通过onmessage监听
 //将从父窗口传来的数据展现出来
 document.getElementById("content").innerHTML+=event.data+"<br>";
 },false);
</script>
 </head>
 <body>
 信息来自于另外一个域
 <div id="content">
 
 </div>
 </body>
</html>

以上就是本文的全部内容，希望对大家了解熟悉常见的javascript跨域通信方法有所帮助。

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：Lernen Sie schnell AngularJs HTTP-Antwort-Interceptor_AngularJSNächster Artikel：Lernen Sie schnell AngularJs HTTP-Antwort-Interceptor_AngularJS

In Verbindung stehende Artikel

Mehr sehen