Home >Web Front-end >JS Tutorial >Common javascript cross-domain communication methods_javascript skills

Common javascript cross-domain communication methods_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 15:22:231669browse

この記事では主に、いくつかの一般的な JavaScript クロスドメイン通信方法を紹介します。まずはJSONPについて説明します。
1.JSONP
JSONP (JSON with Padding) は、主流ブラウザによるクロスドメインデータアクセスの問題を解決するために使用できる JSON の「使用モード」です。同一オリジンポリシーにより、一般に、server1.example.com にある Web ページは、HTML の <script> 要素を除き、server1.example.com 以外のサーバーと通信できません。 <script> 要素のこのオープンポリシーを使用すると、Web ページは他のソースから動的に生成された JSON データを取得できます。この使用パターンは JSONP と呼ばれます。 JSONP でキャプチャされたデータは JSON ではなく、JSON パーサーで解析されるのではなく、JavaScript インタープリターで実行される任意の JavaScript です。 <br /> 次にJSONPの具体的な実装を紹介します。 <br /> クロスドメイン js ファイル内のコード (もちろん Web スクリプトのセキュリティポリシーに準拠している) であっても、Web ページは無条件に実行される可能性があることがわかっています。リモートサーバーremoteserver.comのルートディレクトリには、次のコードを持つremote.jsファイルがあります:<br /> <span style="color: #3366ff"><strong>alert('私はリモートファイルです'); <br />ローカルサーバー localserver.com の下に次のような jsonp.html ページコードがあります: <br /> </script>

<!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>

クロスドメイン呼び出しが成功したことを示すプロンプトウィンドウがページにポップアップ表示されることは間違いありません。

ここで、jsonp.html ページで関数を定義し、リモートのremote.js にデータを渡してその関数を呼び出します。 jsonp.html ページのコードは次のとおりです:

<!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>

remote.js ファイルのコードは次のとおりです:

localHandler({"result":"私はリモート js によってもたらされたデータです"}); 正常に実行された後、クロスドメインのリモートデータ取得の目的は達成されたように見えますが、呼び出すべきローカル関数の名前をリモート JS に知らせるにはどうすればよいでしょうか?現時点では、サーバーが提供する js スクリプトを動的に生成する必要があります。呼び出し元は、パラメーターを渡すことでサーバーに必要な関数を通知できます。jsonp.html のコードは次のとおりです。

<!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>

今回はコードが大幅に変更されており、リモート js ファイルを直接記述することはなくなりましたが、これは jsonp クライアント実装の核心部分でもあります。 jsonp呼び出しのプロセス全体。

コードパラメータが呼び出し元の URL に渡されて、確認したいのは CA1998 便の情報であることをサーバーに伝え、コールバックパラメータはローカルコールバック関数の名前がflightHandlerであることをサーバーに伝えていることがわかります。そのためクエリを渡してください。その結果、この関数呼び出しが行われます。 FlightResult.aspx と呼ばれるこのページは、次のようなコードを生成し、jsonp.html に提供します (サーバー側の実装はここでは示されません。これは、選択した言語とは関係ありません。最終的には、文字列を接続するだけです):

flightHandler({ 
 "code": "CA1998", 
 "price": 1780, 
 "tickets": 5 
});

flightHandler 関数に渡されるのは、フライトの基本情報を記述した json です。ページを実行すると、プロンプトウィンドウが正常に表示され、jsonp 実行プロセス全体が正常に完了します。

ただし、JSONP には問題があり、JSON データをパッケージ化し、指定された関数を呼び出す必要があります。JSONP を使用する場合、悪意のあるスクリプトが直接提供するデータを完全に信頼する必要があります。私たちのアプリケーションを引き継ぎます。そこで次に、このセキュリティリスクを回避する別の方法を紹介します。

2. CORS
CORS (Cross OriginResource Sharing、クロスオリジンリソース共有) には、クロスオリジン XMLHttpRequest が実装されており、サーバーに HTTP リクエストのソース情報を提供します。ヘッダーはブラウザーによって保護されており、アプリケーションコードによって変更することはできません。このアプローチは、外部入力を評価するよりもはるかに安全です。
以前は、ajax は同じソースからのみリクエストを行うことができましたが、現在は XMLHttpRequests レベル 2 を通じて、クロスドメインリクエストを行うことができます。ページまたはアプリケーションがすでに http://www.test1.com にあり、http://www.test2.com からのデータ抽出をリクエストする予定だとします。通常の状況では、AJAX を直接使用してリクエストすると、リクエストは失敗し、ブラウザも「ソース不一致」エラーを返します。これが「クロスドメイン」の由来です。 CORS を使用すると、http://www.test2.com はヘッダーを追加するだけで http://www.test1.com からのリクエストを許可できます。 PHP コードは次のとおりです:

header("Access-Comtrol-Allow-Origin:*");<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

ここで * は、どのドメインでもサーバーにリクエストを送信できることを意味します。指定したドメイン名を設定することもできます。コードは次のとおりです:

设置好头信息之后，其他域就可以进行请求了。
使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。
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跨域通信方法有所帮助。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Quickly learn AngularJs HTTP response interceptor_AngularJSNext article：Quickly learn AngularJs HTTP response interceptor_AngularJS

See more

Common javascript cross-domain communication methods_javascript skills

Related articles