javascriptはドメインをまたいで詳しい分析を要求します.

3578 ワード

何がクロスドメイン要求ですか?
例えば、ユーザーがブラウザを使ってウェブサイト(www.AAA.com)のトップページを開く場合、ブラウザはウェブサイトwww.AAA.comからjavascriptの関数を実行します.この関数はウェブサイト(www.BBB.com)にデータを要求します.
$.getJSON('www.BBB.com/index.php', funciton(data) {
    //     
});
ウェブサイトAのシナリオはウェブサイトBのデータを要求しに行きます.処理していない場合は、ブラウザはこのような要求を制限します.
ソースポリシー
ソースポリシーは、ソースから読み込まれたドキュメントまたはスクリプトから別のソースから読み込まれたドキュメントの属性を取得または設定することを阻止します.この戦略はNetscape Navigator 2.0にまでさかのぼります.二つのページのプロトコル、ポート(指定されている場合)とホスト名が同じであれば、Mozilaはこの二つのページが同じソースを持っていると考えています.ブラウザはなぜこのような制限をしますか?
私達は知っています.JAVSCRIPTはとても強いです.例えば、お支払いの宝のホームページを開けて、またうっかり「ウイルス」のページを開けました.このページにはJavascriptがあります.このJSを実行すると、お支払いの宝ページが修正されます.したがって、ブラウザは、javascriptが同じソースではないスクリプトデータを要求するのを阻止します.
どんな状況であれ、ブラウザという制限を避けたいです.
状況1:CDNキャッシュによるドメイン外要求.CDNサーバはウェブサーバのjavascriptファイルをキャッシュしてもいいです.ブラウザがサーバにデータを要求する時、javascriptファイルを要求する必要があれば、まずブラウザはCDNサーバに行きます.その後、CDNサーバでウェブサーバに取りに行きます.CDNキャッシュを追加すると、毎回サーバにあるファイルがないようにすることができます.しかし、このようにすると、JavascriptファイルはCDNサーバから取ったものであり、このjavascriptがウェブサイトサーバにデータを要求する必要があれば、国境を越えた問題に関連します.
状況2:HTMLを使ってAPPアプリケーションを構築する場合、APPアプリケーションには多くの画像とファイルがあります.毎回要求するたびに、これらの画像とファイルをサーバに要求します.実現された効果は絶対に理想的ではなく、特に流量を消耗します.この問題を解決するために、javascriptを現地に保存してから、ファイルにアクセスするプロトコルでjsファイルにアクセスします.これらのjsファイルからサーバのデータを要求し、さらにデータの要求をダイナミックに構築します.アクセス形式は以下と類似しています.
file:///E:/BaiduYunPan/www/test.js
状況3:ウェブサイトAとウェブサイトBは全部私のものです.ウェブサイトAの中のJavascriptがウェブサイトBのデータを要求できます.
ブラウザの制限を回避するにはどうすればいいですか?
javascriptの中でsrc属性は同じソースポリシーによって制限されていないので、Googleが提供するJqueryファイルを引用することができます.また、Srcによって要求されたデータは、ブラウザーがデフォルトで実行可能なJSファイルです.ウェブサイトAの中の一つのtest.js:
<html>
<script>
function test(data)
{
    alert(data);
}
</script>
<script type="text/javascript" src="http://www.BBB.com/test.php"></script>
</html>
注意:test()関数は前に宣言しなければなりません.ウェブサイトBにはこのtest.phpファイルがあります.
<?php
echo "test('this data is from Server B')";
ブラウザがtes.jsファイルを実行すると、test(data)という関数をトリガします.つまり、ウェブサイトBのコンテンツを要求することができます.このようにして、私達はドメインをまたいでデータを要求することを実現しました.この原理は、Srcが同ソースポリシーによって制限されず、ウェブサイトBの応答データを取得し、このデータをJSファイルとして実行するため、ウェブサイトAにとっては、test関数を実行しているということです.この実現方法のポイントは、ウェブサイトBの応答データは、ウェブサイトAの中で実行可能なJSファイルであり、ウェブサイトAはウェブサイトBからのデータを処理することができる.
ajaxはjsonp属性を持っています.ドメインをまたぐ要求を実現します.
jqueryが持参したajaxはドメインをまたぐ要求を実現できますか?それともウェブサイトAの中でjavascriptはウェブサイトBにデータを要求しますか?ウェブサイトAのtest.jsのコードはこのように書くことができます.
   $.ajax({
        url:"www.BBB.com/index.php",   
        dataType:"jsonp",
        jsonpCallback:"person",
        success:function(data){
            alert(data.name + " is a a" + data.sex);
        }
   });
はウェブサイトBにindex.phpファイルがあります.
echo 'person(' . json_encode(array('name' => 'sunli', 'age' => '24')) . ')';
これでいいです.
注意したいのは:
(1)JsonpCallback属性が指定されていない場合、ランダムな関数名があり、index.phpがデータを出力する場合は、このようにするべきです.
echo $_GET['callback'] . '(' . json_encode(array('name' => 'sunli', 'age' => '24')) . ')';
 (2)jsonpを実現する時、jsonpCallbackを記入していません.index.phpにも$uを入れていません.GET['callback']という関数名は、大きなエラーに遭遇しました.ウェブサイトAは依然としてウェブサイトBのデータを要求できます.しかし、test.jsファイルでは、success応答関数が実行されていませんでした.何のためにブラウザがデータに応答しましたか?つまり私が最初に言ったのは、コールバック関数が指定されていません.データが戻ってきても、successは実行されません.
参考記事:http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
作者:a 2345789 zxcvbnm发表于2014-1-13 21:56:09原文链接
コメント:100:0