jQueryドメイン間アクセス
4497 ワード
ブラウザ側のドメイン間アクセスはずっと問題であり、多くの研究開発者はjsに対する態度がよくなったので、痛みを忘れてしまったので、病気が発生したとき、時々痛みを覚えなければならない.昔、iframeとscript domain声明を使って、yahoo js utilの方式で2級ドメイン名のドメイン間アクセスの問題を解決したことを覚えています.
時間が経つのが速くて、またjs戦場に引き返されたとき、ドメインを越えた問題という傷跡がまた痛くなった.
幸いなことに、jqueryが手伝ってくれて、ドメイン間の問題はそんなに難しくないようです.今回もこの机会に跨域问题について根掘り葉掘り闻いて、実际の开発プロジェクトと结び付けて、関连资料を调べて、跨域问题を解决しました.メモをとる必要がある.
ドメイン間のセキュリティ制限は、ブラウザ側を指す.サーバ側にはドメイン間セキュリティの制限はありません.
したがって、ローカルサーバ側ではhttpclientのように「ドメイン間アクセス」の作業を完了する、ブラウザ側でAJAXでローカルサーバ側の「ドメイン間アクセス」に対応するurlを取得する.間接的にドメイン間アクセスを完了することも可能である.しかし、開発量が大きいのは明らかだが、制限も最も少なく、多くのwidgetオープンプラットフォームserver端(sohuブログオープンプラットフォームなど)は実際にはそうしている.今回の議論の範囲外です.
議論するのはブラウザ側の真のドメイン間アクセスであり、現在のjQuery$が推奨されている.ajax()はget方式のドメイン間をサポートし、これは実はjsonp方式で完成した.
実例:
注意:$.getJSON(「http://ドメイン間dns/document!searchJSOnResult.action?name 1=」+value 1+「&jsoncallback=?」
function(json){
if(json.属性名==値){
//実行コード
}
});
この方式は実は前例の$.ajax({..}) apiの高級パッケージで、$があります.ajax apiの下層のパラメータはカプセル化されて見えなくなった.
これにより、jqueryは次のurl getリクエストにスペルされます.
http://ドメイン間dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15
応答側(http://ドメイン間dns/document!searchJSOnResult.action)で、
jsoncallback=request.getParameter(「jsoncallback」)は、jquery側がコールバックするjs function nameを得る:jsonp 123682795501
そしてresponseの内容はScript Tagsである:“jsonp 13682795501(”+要求パラメータによって生成されたjson配列+");
jqueryは、このjs tag:jsonp 123682795501(json配列)をコールバックメソッドによって動的にロードして呼び出す.
これにより、ドメイン間データ交換の目的が達成する.
jsonpの最も基本的な原理は、ラベルを動的に追加することであり、scriptラベルのsrc属性にはドメイン間の制限はありません.このように、このようなドメイン間方式は、ajax XmlHttpRequestプロトコルとは無関係である.
これで実は「jQuery AJAXドメイン間問題」が偽命題になった、jquery$.ajaxメソッド名には人を誤導する疑いがある.
dataType:'jsonp',この$.ajaxメソッドはajax XmlHttpRequestとは関係ないが、代わりにJSONPプロトコルである.
JSONPは、サーバ側でScript tagsを統合してクライアントに戻り、javascript callback形式でドメイン間アクセスを実現する非公式プロトコルです.
JSONPはJSON with Paddingです.XmlHttpRequestは、ソースポリシーの制限により、現在のソース(ドメイン名、プロトコル、ポート)のリソースのみを要求できます.ドメイン間リクエストを行う場合は、
htmlのscriptタグを使用してドメイン間リクエストを行い、javascriptオブジェクトをJSONで直接渡すことができる応答で実行するscriptコードを返すことができます.
このようなドメイン間通信方式をJSONPと呼ぶ.
jsonCallback関数jsonp 123682795501(...):ブラウザクライアントが登録し、ドメイン間サーバ上のjsonデータを取得した後、コールバックする関数です.
Jsonp原理:
まず、クライアントにcallback(例えば、「jsoncallback」)を登録し、callbackの名前(例えば、jsonp 13682795501)をサーバに送信します.
このとき、サーバさんはjsonデータになります.
次にjavascript構文でfunctionを生成する、function名は伝達されたパラメータ「jsoncallback」の値jsonp 13682795501である.
最後にjsonデータを直接パラメータとしてfunctionに配置すると、js構文のドキュメントが生成され、クライアントに返されます.
クライアントブラウザは、scriptラベルを解析し、返されるjavascriptドキュメントを実行します.このときjavascriptドキュメントデータは、パラメータとして、
クライアントが予め定義callback関数(前例のjquery$.ajax()メソッドでカプセル化されたsuccess:function(json))に転送する.(動的実行コールバック関数)
jsonpの方式は原理的に
なお、jqueyはpost方式のドメイン間ではサポートする.
どうしてですか.
post+動的生成iframeを用いることはpostのドメイン間目的を達成できる(js牛人はこのようにjquery 1.2.5をpatchした)が、これは比較的極端な方法であり、採用は推奨されない.
get方式の跨域は合法的だとも言えるが、post方式は安全の観点から、合法的ではないと考えられている.
Client側のドメイン間アクセスの需要もw 3 cの注意を引き起こしているようで、資料を見てhtml 5 WebSocket標準はドメイン間データ交換をサポートし、将来オプションのドメイン間データ交換の解決策でもあるはずだ.
時間が経つのが速くて、またjs戦場に引き返されたとき、ドメインを越えた問題という傷跡がまた痛くなった.
幸いなことに、jqueryが手伝ってくれて、ドメイン間の問題はそんなに難しくないようです.今回もこの机会に跨域问题について根掘り葉掘り闻いて、実际の开発プロジェクトと结び付けて、関连资料を调べて、跨域问题を解决しました.メモをとる必要がある.
ドメイン間のセキュリティ制限は、ブラウザ側を指す.サーバ側にはドメイン間セキュリティの制限はありません.
したがって、ローカルサーバ側ではhttpclientのように「ドメイン間アクセス」の作業を完了する、ブラウザ側でAJAXでローカルサーバ側の「ドメイン間アクセス」に対応するurlを取得する.間接的にドメイン間アクセスを完了することも可能である.しかし、開発量が大きいのは明らかだが、制限も最も少なく、多くのwidgetオープンプラットフォームserver端(sohuブログオープンプラットフォームなど)は実際にはそうしている.今回の議論の範囲外です.
議論するのはブラウザ側の真のドメイン間アクセスであり、現在のjQuery$が推奨されている.ajax()はget方式のドメイン間をサポートし、これは実はjsonp方式で完成した.
実例:
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?name 1=」+value 1+「&jsoncallback=?」
function(json){
if(json.属性名==値){
//実行コード
}
});
この方式は実は前例の$.ajax({..}) apiの高級パッケージで、$があります.ajax apiの下層のパラメータはカプセル化されて見えなくなった.
これにより、jqueryは次のurl getリクエストにスペルされます.
http://ドメイン間dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15
応答側(http://ドメイン間dns/document!searchJSOnResult.action)で、
jsoncallback=request.getParameter(「jsoncallback」)は、jquery側がコールバックするjs function nameを得る:jsonp 123682795501
そしてresponseの内容はScript Tagsである:“jsonp 13682795501(”+要求パラメータによって生成されたjson配列+");
jqueryは、このjs tag:jsonp 123682795501(json配列)をコールバックメソッドによって動的にロードして呼び出す.
これにより、ドメイン間データ交換の目的が達成する.
jsonpの最も基本的な原理は、
これで実は「jQuery AJAXドメイン間問題」が偽命題になった、jquery$.ajaxメソッド名には人を誤導する疑いがある.
dataType:'jsonp',この$.ajaxメソッドはajax XmlHttpRequestとは関係ないが、代わりにJSONPプロトコルである.
JSONPは、サーバ側でScript tagsを統合してクライアントに戻り、javascript callback形式でドメイン間アクセスを実現する非公式プロトコルです.
JSONPはJSON with Paddingです.XmlHttpRequestは、ソースポリシーの制限により、現在のソース(ドメイン名、プロトコル、ポート)のリソースのみを要求できます.ドメイン間リクエストを行う場合は、
htmlのscriptタグを使用してドメイン間リクエストを行い、javascriptオブジェクトをJSONで直接渡すことができる応答で実行するscriptコードを返すことができます.
このようなドメイン間通信方式をJSONPと呼ぶ.
jsonCallback関数jsonp 123682795501(...):ブラウザクライアントが登録し、ドメイン間サーバ上のjsonデータを取得した後、コールバックする関数です.
Jsonp原理:
まず、クライアントにcallback(例えば、「jsoncallback」)を登録し、callbackの名前(例えば、jsonp 13682795501)をサーバに送信します.
このとき、サーバさんはjsonデータになります.
次にjavascript構文でfunctionを生成する、function名は伝達されたパラメータ「jsoncallback」の値jsonp 13682795501である.
最後にjsonデータを直接パラメータとしてfunctionに配置すると、js構文のドキュメントが生成され、クライアントに返されます.
クライアントブラウザは、scriptラベルを解析し、返されるjavascriptドキュメントを実行します.このときjavascriptドキュメントデータは、パラメータとして、
クライアントが予め定義callback関数(前例のjquery$.ajax()メソッドでカプセル化されたsuccess:function(json))に転送する.(動的実行コールバック関数)
jsonpの方式は原理的に
なお、jqueyはpost方式のドメイン間ではサポートする.
どうしてですか.
post+動的生成iframeを用いることはpostのドメイン間目的を達成できる(js牛人はこのようにjquery 1.2.5をpatchした)が、これは比較的極端な方法であり、採用は推奨されない.
get方式の跨域は合法的だとも言えるが、post方式は安全の観点から、合法的ではないと考えられている.
Client側のドメイン間アクセスの需要もw 3 cの注意を引き起こしているようで、資料を見てhtml 5 WebSocket標準はドメイン間データ交換をサポートし、将来オプションのドメイン間データ交換の解決策でもあるはずだ.