ホームページ >ウェブフロントエンド >jsチュートリアル >js_javascriptスキルにおけるクロスドメインメソッドの例の詳細な説明
js_javascriptスキルにおけるクロスドメインメソッドの例の詳細な説明
- WBOYオリジナル
- 2016-05-16 15:53:231151ブラウズ
この記事の例では、js でのクロスドメイン実装の方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
同一生成元ポリシーの制限により、XMLHttpRequest は現在のソース (ドメイン名、プロトコル、ポートを含む) からのリソースのみを要求できます。
json と jsonp の違い:
JSON はデータ交換形式ですが、JSONP は開発者によって作成された非公式のクロスドメイン データ交換プロトコルです。
script タグは、さまざまなドメインからリソースを読み込むためによく使用され、同一生成元ポリシーをバイパスできます。 (src 属性を持つ人は誰でも外部ファイルを取得できます)。
要求されたリモート データ自体が実行可能な js である場合、これらの js が実行されます (eval と同等)。
方法 1:
script タグを使用してリクエスト (2e6045403436ad6800dc699ea5edab622cacc6d41bbb37262a98f745aa00fbf0)
script タグを使用してリクエストする前に、まずコールバック関数
<script>
function 回调函数名(data数据){ 。。。。 }
</script>
<script src="http://....jsp?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中此处的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?" + "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", "路径?time=" + new Date().getTime()).load(function(){
// 获取iframe标签的值并进行获取，显示到页面
$("#show").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text()+ " ]");
});
</script>
方法 5:
HTML5 の Websocket はクロスドメイン アクセスを提供できます。
WebSocket オブジェクトを作成します:
処理される主なイベント タイプは (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 プログラミング設計に役立つことを願っています。