jQuery と JSONP を使用して、クロスドメインアクセスの問題を簡単に解決する

jQuery と JSONP を使用して、クロスドメインアクセスの問題を簡単に解決する_jquery

WBOY

リリース： 2016-05-16 17:01:33

オリジナル

1183 人が閲覧しました

時間はあっという間に過ぎ、JS の戦場に引き戻されると、クロスドメイン問題の傷跡が再び痛み始めます。

幸いなことに、jquery の助けを借りて、クロスドメインの問題はそれほど難しくないようです。今回は、実際の開発プロジェクトに基づいて、クロスドメインの問題の本質に迫ることもできました。関連情報を確認し、クロスドメインの問題を最終的に解決しました。質問。メモを書き留める必要があります。

クロスドメインセキュリティ制限はすべてブラウザ側を指します。サーバー側にはクロスドメインセキュリティ制限がないため、「クロスドメインアクセス」作業は httpclient と同様の方法でローカルサーバー側で完了します。 , そして、ブラウザ側でAJAXを利用して、ローカルサーバー側で「クロスドメインアクセス」に対応するURLを取得し、間接的にクロスドメインアクセスを完了させることも可能ですが、その量は明らかです。開発は比較的大規模ですが、制限も最小限です。実際には、多くのウィジェットオープンプラットフォームサーバー (Sohu ブログオープンプラットフォームなど) は、この議論の範囲内ではありません。

私たちが議論したいのは、ブラウザ側での真のクロスドメインアクセスです。現在、jQuery $.ajax() は get メソッドでのクロスドメインアクセスをサポートすることが推奨されています。これは実際には jsonp を使用して行われます。

実際のケース:

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

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

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

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

$.getJSON(" http://cross-domain dns/ document!searchJSONResult.action?name1=" value1 "&jsoncallback= ?", function(json){ if(json.property name==value){
// コードを実行 } });

このメソッドは実際には、上記の例の $.ajax({..}) API の高度なカプセル化です。
このように、$.ajax API の基礎となるパラメーターの一部はカプセル化されています。 jquery は次の URL 取得リクエストをアセンブルします
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("リクエストパラメーターに従って生成された json 配列")";
jquery は動的にロードし、コールバックメソッドを通じてこの js タグを呼び出します: jsonp1236827957501 (json 配列);
これにより、クロスドメインデータ交換の目的が達成されます。

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

原理のサンプルコード:

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

 //クライアント JAVASCRIPT コード 
var script=document.createElement("script") 
script.src="http://www.pl4cj.com:8888/5/6/action .php ?param=123&callback=" fnName; 
document.getElementsByTagName("head")[0].appendChild(script) 

//サーバー側の PHP コードにはコールバック用のコールバックが必要です, ここに括弧を追加すると、ステートメント ブロックの形式で解析できるようになります 
echo $_GET["callback"]."(" .json_encode($_GET).");"; 
?

jquey はクロスドメイン投稿をサポートしていないことに注意してください。

なぜですか?
ポストを使用して iframe を動的に生成すると、ポストクロスドメインの目的を達成できますが、これは比較的極端な方法であり、推奨されません。また、 get のクロスドメインメソッドは合法ですが、post メソッドはセキュリティの観点から違法であると考えられています。最後の手段として間違ったアプローチを取らないことが最善です。

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