javascript_javascript スキルのクロスドメイン実装方法の概要-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:52:48

オリジナル

1191 人が閲覧しました

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

json と jsonp の違い:

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

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

方法 1:

スクリプトタグを使用してリクエストします ()
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);

　　　　}

ログイン後にコピー