jQuery のクロスドメイン アクセスの問題 solution_jquery

時間が経つのは本当に早く、js の戦場に引き戻されたとき、クロスドメインの問題の傷が再び痛み始めました。

幸いなことに、jquery の助けにより、クロスドメインの問題はそれほど難しくないようでした。今回もこの機会にクロスドメイン問題の真相に迫り、実際の開発プロジェクトと合わせて関連情報を確認し、最終的にクロスドメイン問題を解決したのでメモしておきます。

クロスドメイン セキュリティ制限はブラウザ側を指します。サーバー側にはクロスドメイン セキュリティ制限はありません。
したがって、「クロスドメイン アクセス」作業はローカル サーバーを通じて完了します。ただし、ブラウザ側で AJAX を使用してこれを取得することもできます。ただし、マシン サーバー上の「クロスドメイン アクセス」に対応する URL を使用して、間接的にクロスドメイン アクセスを完了することもできます。開発量が比較的大きいことは明らかですが、多くのウィジェット オープン プラットフォーム サーバー側 (Sohu Blog Open Platform など) は、実際にはこの議論の範囲内ではありません。私たちが議論したいのは、ブラウザ側での実際のクロスドメイン アクセスです。jQuery $.ajax() は現在、実際には jsonp

を使用する get メソッドでクロスドメイン アクセスをサポートしていることが推奨されます。 :

コードをコピー コードは次のとおりです:

var qsData = {'searchWord': $("#searchWord").attr("値"),'currentUserId':$("#currentUserId").attr("値"),'conditionBean.pageSize' :$("#pageSize").attr( "値")};

$.ajax({
async:false,
url: http://クロスドメイン dns/document !searchJSONResult.action,
type: " GET",
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
beforeSend : function(){
//jsonpこのメソッドがトリガーされないのは、dataType が jsonp として指定されている場合、ajax イベントではなくなっているためである可能性があります。
},
success: function (json) {//jquery によって事前定義されたコールバック関数です。クライアント側は、クロスドメインサーバーで json データを正常に取得した後に動的に実行されます。
if(json.actionErrors.length!=0){
alert(json.actionErrors)
; genDynamicContent(qsData,type,json);
},
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 }); function(xhr){
//このメソッドは jsonp モードではトリガーされません。その理由は、dataType が jsonp として指定されている場合、ajax イベントではなくなるためである可能性があります。
//リクエスト エラー処理
("リクエストエラー (関連性のあるネットワークステータスを確認してください。)");
}

注: $.getJSON(" http://cross-domain dns/document!searchJSONResult.action?name1=" value1 "&jsoncallback=?",
function(json){
if(json.属性名==値){
//実行コード
}
});
このメソッドは実際には、上記の例の $.ajax({..}) API の高度なカプセル化です。 $.ajax API の基礎となるパラメーターの一部はカプセル化されており、表示されません。
この方法で、jquery は次の URL get リクエストに組み立てられます。
http://cross-domain dns/document!searchJSONResult.action ?&jsoncallback =jsonp1236827957501&_=1236828192549&searchWord=use case¤tUserId=5351&conditionBean.pageSize=15

応答側 (http://cross-domain dns/document!searchJSONResult.action) では、
jsoncallback = request を通じて。 getParameter(" jsoncallback") jquery 側で後でコールバックされる js 関数名を取得します: jsonp1236827957501
応答の内容はスクリプト タグ: "jsonp1236827957501("リクエスト パラメーターに従って生成された json 配列" )";
jquery はコールバックを渡します。メソッドはこの js タグを動的にロードして呼び出します:jsonp1236827957501 (json array);
これにより、クロスドメイン データ交換の目的が達成されます。

最も基本的なものjsonp の原則は、<script> タグを動的に追加することであり、script タグの src 属性にはクロスドメイン制限がありません。このように、このクロスドメイン メソッドは ajax XmlHttpRequest プロトコルとは何の関係もありません。<br>このように、「jQuery AJAX クロスドメインの問題」は誤った命題となり、jquery $.ajax メソッド名は次のようになります。 <br>dataType: 'jsonp' に設定すると、この $.ajax メソッドは ajax XmlHttpRequest とは何の関係もなく、<br>JSONP は Script タグの統合を可能にする非公式のプロトコルに置き換えられます。サーバー側でクライアントに戻り、JavaScript コールバックを通じてクロスドメイン アクセスを実現します。<br>JSONP はパディング付きの JSON です。同一オリジン ポリシーの制限により、XmlHttpRequest は現在のソース (ドメイン名、プロトコル、ポート) からのリソースのみを要求できます。クロスドメイン リクエストを作成したい場合は、<br> html の script タグを使用してクロスドメイン リクエストを作成し、応答で実行されるスクリプト コードを返すことができます。この場合、javascript オブジェクトは次のメソッドを使用して直接渡すことができます。 JSON。 <br>このクロスドメイン通信方式は JSONP と呼ばれます。 <br><br>jsonCallback 関数 jsonp1236827957501(....): クロスドメイン サーバー上の json データを取得した後、コールバック関数 <br><br>Jsonp 原則: <br><br>まずクライアントでコールバック (例: 'jsoncallback') を登録し、次にコールバック名 (例: jsonp1236827957501) をサーバーに渡します。 <br><br>このとき、サーバーはまず json データを生成します。 <br><br>次に、JavaScript 構文を使用して関数を生成します。関数名は、渡されたパラメーター「jsoncallback」の値 jsonp1236827957501 です。<br><br>最後に、json データをパラメーターとして直接配置します。 js 構文ドキュメントを生成し、クライアントに返します。 <br><br>クライアントのブラウザは、スクリプト タグを解析し、返された JavaScript ドキュメントを実行します。このとき、JavaScript ドキュメント データは、クライアントによって事前に定義されたコールバック関数 (例: jquery) として渡されます。上記の例) $.ajax() メソッドによってカプセル化された success: 関数 (json) (コールバック関数の動的実行) <br><br>jsonp メソッドは原理的には < と同じであると言えます。 script src="http://cross-domain /...xx.js"></script> は一貫しています (QQ スペースはこのメソッドを使用してクロスドメイン データ交換を実現します)。

jquey はクロスドメイン投稿をサポートしていないことに注意してください。
post を使用して iframe を動的に生成することで、post の目的を達成できます。クロスドメイン (一部の js を使用して jquery 1.2.5 にパッチを適用する優れた方法) ですが、これは比較的極端な方法であるため、推奨されません
get のクロスドメイン メソッドは合法であるとも言えます。 post メソッドはセキュリティの観点から安全であると考えられていますが、最後の手段としては、やりすぎないようにしてください。

クライアント側でのクロスドメイン アクセスの需要が注目を集めているようです。 w3c の情報によると、html5 WebSocket 標準はクロスドメイン データ交換をサポートしており、これはクロスドメイン データ交換のオプションの将来のソリューションになるはずです。