JSONPクロスドメインの原理解析とその実現紹介
JavaScriptは、Web開発においてよく使われる先端ダイナミックスクリプト技術である。JavaScriptには重要なセキュリティ制限があり、「Same-Origin Policy」と呼ばれています。このポリシーは、JavaScriptコードがアクセスできるページの内容に対して非常に重要な制限を与えています。すなわち、JavaScriptは、それを含む文書と同じ領域でしかアクセスできません。JavaScriptというセキュリティポリシーは、多iframeまたは多窓プログラミング、およびAjaxプログラミングを行う際に特に重要になります。このポリシーにより、baidu.comの下のページに含まれるJavaScriptコードは、google.comのドメイン名の下のページにアクセスできません。サブドメイン間のページもJavaScriptコードで相互にアクセスできません。Ajaxに対する影響は、XMLttpRequestによって実現されるAjax要求は、異なるドメインに要求を提出することができない、例えばabc.example.comの下のページでは、def.example.comにAjax要求を提出することができない、などである。しかし、いくつかの比較的深い先端プログラムを行う場合、クロスドメイン動作が避けられない場合、「ソースポリシー」はあまりにも過酷である。JSONPドメインをまたぐGET要求は一般的な解決策です。JSONPのドメイン横断はどのように実現されるかを見て、JSONPのドメイン横断の原理を検討します。ページ内で「script」ノードを作成する方法を用いて、異なるドメインにHTTP要求を提出する方法をJSONPといい、この技術はドメインをまたいでAjax要求を提出する問題を解決することができる。JSONPの活動原理は以下の通りです。http://example1.com/index.phpこのページでhttp://example2.com/getinfo.phpGET要求を提出して、下記のJavaScriptコードを置いてもいいです。http://example1.com/index.phpこのページで実装されます。http://example2.com/getinfo.php戻るときは、JavaScriptコードの一部を返します。このコードは自動的に実行されます。http://example1.com/index.phpページの中の一つのcalback関数です。JSONPの利点は、XMLHttpRequestオブジェクトによって実現されるAjax要求のように同源ポリシーによって制限されていないことである。その互換性がもっといいです。もっと古いブラウザで運行できます。XMLtpRequestまたはActiveXのサポートは必要ありません。また、要求が完了したら、calbackを呼び出して結果を返送することができます。JSONPの欠点は、POSTなど他のタイプのHTTP要求に対応していないGET要求のみをサポートすることです。これはドメインをまたぐHTTP要求という状況だけをサポートしていますが、異なるドメインの二つのページの間でJavaScript呼び出しをどのように行うかという問題を解決できません。もう一つの例：と一致していると言えます。JSONPはスクリプト注入（Script Injection）行為ですので、ある程度のセキュリティ上の問題があります。jqueryはなぜpost方式のクロスドメインをサポートしないですか？post+動的生成iframeを採用することはポストクロスドメインの目的を達成することができますが（jquery 1.2.5をそのままpatchを打つ人がいます）、このようにするのは比較的に極端な方法で、採用することを提案しません。get方式のクロスドメインは合法的だとも言えます。ベスト方式は安全の点から非合法的だと言われています。やむを得ず剣で偏向を歩かないようにします。client端末がドメインをまたいで訪問する需要もw 3 cの注意を引きました。資料を見て、html 5 WebSocket標準はドメインをまたぐデータ交換をサポートしています。将来オプションのクロスドメインデータ交換の解決策でもあるはずです。これは超簡単な例です。
var eleScript= document.createElement("script");
eleScript.type = "text/javascript";
eleScript.src = "http://example2.com/getinfo.php";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':
$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};
$.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 callback , json , callback
if(json.actionErrors.length!=0){
alert(json.actionErrors);
}
genDynamicContent(qsData,type,json);
},
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
},
error: function(xhr){
//jsonp . dataType jsonp , ajax
//
alert(" ( .)");
}
});
：
$.getJSON("http:// dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?",
function(json){
if(json. == ){
//
}
});
http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=
%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15