ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_javascript スキルのクロスドメイン実装方法の概要

javascript_javascript スキルのクロスドメイン実装方法の概要

WBOYオリジナル: 2016-05-16 15:52:481186ブラウズ

同一生成元ポリシーの制限により、XMLHttpRequest は現在のソース (ドメイン名、プロトコル、ポートを含む) からのリソースのみを要求できます。

json と jsonp の違い:

JSON はデータ交換形式ですが、JSONP は開発者によって作成された非公式のクロスドメインデータ対話プロトコルです。

script タグは、さまざまなドメインからリソースを読み込むためによく使用され、同一生成元ポリシーをバイパスできます。 (src 属性を持つ人は誰でも外部ファイルを取得できます)。
要求されたリモートデータ自体が実行可能な js である場合、これらの js が実行されます (eval と同等)。

方法 1:

スクリプトタグを使用してリクエストします (95f23cdc77a3f9d7dbc227b9c2293f062cacc6d41bbb37262a98f745aa00fbf0)
script タグを使用してリクエストする前に、まずコールバック関数
を宣言します。

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

JSON を使用して JavaScript オブジェクトを転送するのが最も簡単な方法であり、このクロスドメイン通信方法は JSONP と呼ばれます。

リモートサーバーの文字列を結合したもの:
コールバック関数名 ({"name1":"data1","name2","data2"})
この種の JSON データはバックグラウンドで結合され、パラメータを渡すコールバック関数を使用してクライアントに返されます
(直接呼び出すこともできます。これは取得した文字列を eval 処理するのと同じです)
例: function databack(data){alert(data.name1) } // 「data1」を出力して表示します

方法 2:

外部ロードメソッドはjqueryで実装すると簡単です(ajaxの非同期リクエストメソッドと同じ)

  $.ajax({
    type : "get",
    dataType:"json",
    success : function(data){ alert(data.name1) };
  })

または省略形
var url = "http://....jsp?callback=?"; // ここでの jquery のコールバック値は、

であるため任意です。

jquery が処理された後、成功コールバック関数を使用してデータが受け入れられます。 $.getJSON( url, function(data){alert(data.name1) });

方法 3:

Ajax クロスドメインサーバープロキシ

同じオリジンのバックグラウンドでプロキシプログラム (proxy.jsp...) をセットアップし、サーバー側の外部ドメインでサーバーと対話します。

jqueryフロントエンドデータ送信:
例:

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

バックグラウンドデータ処理:

    String data1 = request.getParameter("name1");
    ........
    // 此处的url为另一域下的地址并带有参数
    String url = "http://.....com/.../sss.jsp&#63;" +　"name1=" + data1+　"name2=" + 

data2;
    // 跳转到另一个域进行数据的处理并返回json格式的数据
    request.getRequestDispatcher(url).forward(request,response);

方法 4:

iframe タグの src 属性を使用してクロスドメインアクセスを実行し、取得した値を現在の iframe に格納してから、

同じページの iframe の本文の値を取得します。

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

方法 5:

HTML5 の Websocket はクロスドメインアクセスを提供できます。

WebSocket オブジェクトを作成します:

var ws = new WebSocket(url);

処理される主なイベントタイプは (onopen、onclose、onmessage、onerror) です。

例:

　　　　ws.onopen = function(){

　　　　　　console.log("open")；

　　　　　　// 向后台发送数据

　　　　　　ws.send("open");

　　　　}

バックグラウンドには、Java、php、nodejs などを使用できます。データ処理には、time onmessage イベントを使用して、戻り値に対してフロントエンド処理を実行します。

　　　　ws.onmessage = function(eve){

　　　　　　console.log(eve.data);

　　　　}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery.easyui の datebox フォーマット time_jquery についての簡単な説明次の記事：jQuery.easyui の datebox フォーマット time_jquery についての簡単な説明

続きを見る

javascript_javascript スキルのクロスドメイン実装方法の概要

関連記事