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

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