js_javascriptスキルにおけるクロスドメインメソッドの例の詳細な説明-jsチュートリアル-php.cn

js_javascriptスキルにおけるクロスドメインメソッドの例の詳細な説明

WBOY

リリース： 2016-05-16 15:53:23

オリジナル

1151 人が閲覧しました

この記事の例では、js でのクロスドメイン実装の方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

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

json と jsonp の違い:

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

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

方法 1:

script タグを使用してリクエスト ()
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&#63;callback=&#63;";
// 在jquery中此处的callback值可以为任意，
// 因为jquery进行处理后都是利用success回调函数进行数据的接受；
$.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);
}

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。