ドメイン間データインタラクティブソリューションについても説明します
6477 ワード
まず余談ですが、最初はAjaxはXMLHttpRequestでデータを転送する技術を指すべきでしたが、最近ではすべてのweb新技術をhtml 5名の下にまとめたように、現在ではすべての非同期でデータを取得する手段をAjaxと呼んでいます.
JavaScript同源ポリシーの存在により,ドメイン間データインタラクションは日常茶飯事である.ネット上の関連記事は多いが、時間が経つにつれてブラウザの更新に伴い、一部のソリューションは適用されなくなり、より良い方法も現れた.純粋なサーバProxyというフロントエンドとは関係のないシナリオはともかく、ここでは一般的な他のいくつかの方法を簡単にまとめます.
JSONP
JSONPは最も一般的なドメイン間データインタラクション方式であり、htmlのscriptタグが他のドメインJSファイルをロードして実行できることが原理である.サイトBは提供するデータをパラメータとして1つのサイトAが定義したグローバル関数に渡し、サイトAはこのファイルを参照するとドメインをまたいでデータを取得することができ、A局はscriptラベルのsrcに少量のパラメータを置いてB局に提出することもできる.外部チェーンJSこの方式はGETのみをサポートし、IEのurl長が2083バイトを超えてはならないという制限と、セキュリティ上の理由から、データの送信には一般的に使用されない.
バックエンドProxy経由人は、この方法で任意のページコンテンツを取得することができ、POSTのサポートも追加された.
<
script
type
=
"text/javascript"
src
=
"http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri= ( http://www.google.com )"
>script
>
<
script
type
=
"text/javascript"
>
alert(ACD.responseText);
script
>
<
script
type
=
"text/javascript"
src
=
"http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri= ( http://216.92.131.147/dotserv/ACD/runit/post.cgi )&method=post&postdata=(name=fred&[email protected])"
>script
>
<
script
type
=
"text/javascript"
>
alert(ACD.responseText);
script
>
実際,このスキームはバックエンドハンドル任意ページ出力はJS変数を用い,バックエンドはurlに関連する識別に基づいて要求方式とパラメータを決定し,ビッグデータコミットの問題を解決することはできない.
オリジナルフォーム+Redirect+Callback
オリジナルのformフォームは他のドメインへのデータのコミットをサポートしており、formのtargetをページ上の非表示iframeに向けるだけで、リフレッシュなしのコミットが実現し、残りの問題はコミット後の結果をどのように取得するかです.たとえば、サイトAフォームがサイトBにデータを送信すると、通常、サイトBで要求を処理し、サイトAの下のProxyページにリダイレクトし、urlバンドにパラメータを付けて処理結果を識別します.次に,A局下のProxyページでurlパラメータを解析し,親ページに渡すCallback関数で処理する.
Flash
FlashのURLLoaderを利用することで、ドメイン間のデータインタラクションも簡単に実現できます.サイトBのドメイン間ポリシーファイル(crossdomain.xml)にサイトAが含まれている限り、A局はB局のデータを取得し、B局にデータをコミットすることができる.JSとflashのインタラクションをカプセル化して、より便利に使用することができます.ここには他の人がカプセル化されていますのバージョンでは、オリジナルのXMLHttpRequestとほぼ同じように使用されています.
var
req;
function
callback() {
if
(req.readyState == 4) {
try
{
if
(req.status != 200) {
alert(
'error detected 1'
);
}
else
{
alert(
"got data: "
+req.responseText);
}
}
catch
(e) {
alert(
'error detected 2'
);
}
}
}
function
test_get() {
req =
new
CrossXHR();
req.onreadystatechange = callback;
req.open(
'GET'
,
' http://www.pliantdev.com/support/test.xml '
);
req.send();
}
Iframe+XMLHttpRequest
サイトBにproxyページがあり、オリジナルAjax(XMLHttpRequest)でB局の他のページを様々なデータインタラクションする場合は、A局でiFrameでこのproxyページを導入し、iFrameドメイン間の問題を解決するだけでよい.実際、AとBが同じ大ドメインに属する場合、両側のdocumentが設定.domainはルートドメイン名でOKです.まったく異なる2つのドメインであれば、クラシックwindownameのような既存のソリューションもたくさんあります.さらに、IE 6、IE 7を除いて、ほとんどの現代ブラウザはwindow.postMessageで異なるiFrameのデータ通信をサポートしています.pmxdrは、postMessageを使用して非表示の局外iFrameにデータを転送し、ドメイン間Ajaxを実現するライブラリであり、libxdrはさらにパッケージ化され、より使いやすくなっています.
var
req =
new
XDR();
req.open(
"POST"
,
"http://code.eligrey.com/pmxdr/libxdr/demo.php "
);
req.setRequestHeader(
"Content-Type"
,
"application/x-www-form-urlencoded"
);
req.onload =
function
() {
alert(
this
.responseText);
//alerts "foo is bar"
};
request.send(
"foo=bar"
);
なお、このスキームは、サイトBにproxyページを1つ配置するだけで、他の任意のサイトがこのページを介して対話することができ、安全ではないことを考慮すると、pmxdr-host.jsには変数alwaysTrustedOriginsがあり、正規定義でインタラクティブを許可するサイトをサポートする配列です.
究極のソリューション:Cross-Origin Resource Sharing
実際、IE 6、IE 7を除いて、ほとんどの現代ブラウザはドメイン間リソース共有(Cross-Origin Resource Sharing)規格をサポートしており、これはドメイン間Ajaxの究極のソリューションと言える.この基準があれば、Response Headerにこれを加えるだけで、簡単にドメインをまたぐことができます.
Access-Control-Allow-Origin: http:
//hello-world
.example
このヘッダ定義は、どのドメインが自分と対話できるかを定義し、*と定義すれば、どのドメインが許可されるかを表すので、もちろんお勧めしません.IE以外の標準ブラウザでは、ドメインAjaxにまたがることができます.IEの場合、要求は、追加のXDomainRequestオブジェクトと交換して送信される必要があり、その他は同様である.また、許可されたコミット方式などの情報を設定するためにヘッダがいくつかあり、認証やxmlなどのフォーマットのデータをサーバにコミットする場合は、事前に要求する必要があります.ここには、より多くの説明があります.
まとめ
シナリオによってそれぞれ異なる使用シーンがあり、誰が良いか悪いかは一概には言えない.一般的に、ドメイン間でデータを取得する個人的な習慣はJSONP、ドメイン間でデータを提出する個人的な習慣はフォーム+Callbackです.現代のブラウザの普及に伴い、オリジナルxhrも試してみることができ、flashは代替降格用として使用することができる.最後に、複数のドメイン間実装をカプセル化したライブラリを選択する場合は、次のYui 3のioコンポーネントを考慮することができる.
JavaScript同源ポリシーの存在により,ドメイン間データインタラクションは日常茶飯事である.ネット上の関連記事は多いが、時間が経つにつれてブラウザの更新に伴い、一部のソリューションは適用されなくなり、より良い方法も現れた.純粋なサーバProxyというフロントエンドとは関係のないシナリオはともかく、ここでは一般的な他のいくつかの方法を簡単にまとめます.
JSONP
JSONPは最も一般的なドメイン間データインタラクション方式であり、htmlのscriptタグが他のドメインJSファイルをロードして実行できることが原理である.サイトBは提供するデータをパラメータとして1つのサイトAが定義したグローバル関数に渡し、サイトAはこのファイルを参照するとドメインをまたいでデータを取得することができ、A局はscriptラベルのsrcに少量のパラメータを置いてB局に提出することもできる.外部チェーンJSこの方式はGETのみをサポートし、IEのurl長が2083バイトを超えてはならないという制限と、セキュリティ上の理由から、データの送信には一般的に使用されない.
バックエンドProxy経由人は、この方法で任意のページコンテンツを取得することができ、POSTのサポートも追加された.
<
script
type
=
"text/javascript"
src
=
"http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri= ( http://www.google.com )"
>script
>
<
script
type
=
"text/javascript"
>
alert(ACD.responseText);
script
>
<
script
type
=
"text/javascript"
src
=
"http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri= ( http://216.92.131.147/dotserv/ACD/runit/post.cgi )&method=post&postdata=(name=fred&[email protected])"
>script
>
<
script
type
=
"text/javascript"
>
alert(ACD.responseText);
script
>
実際,このスキームはバックエンドハンドル任意ページ出力はJS変数を用い,バックエンドはurlに関連する識別に基づいて要求方式とパラメータを決定し,ビッグデータコミットの問題を解決することはできない.
オリジナルフォーム+Redirect+Callback
オリジナルのformフォームは他のドメインへのデータのコミットをサポートしており、formのtargetをページ上の非表示iframeに向けるだけで、リフレッシュなしのコミットが実現し、残りの問題はコミット後の結果をどのように取得するかです.たとえば、サイトAフォームがサイトBにデータを送信すると、通常、サイトBで要求を処理し、サイトAの下のProxyページにリダイレクトし、urlバンドにパラメータを付けて処理結果を識別します.次に,A局下のProxyページでurlパラメータを解析し,親ページに渡すCallback関数で処理する.
Flash
FlashのURLLoaderを利用することで、ドメイン間のデータインタラクションも簡単に実現できます.サイトBのドメイン間ポリシーファイル(crossdomain.xml)にサイトAが含まれている限り、A局はB局のデータを取得し、B局にデータをコミットすることができる.JSとflashのインタラクションをカプセル化して、より便利に使用することができます.ここには他の人がカプセル化されていますのバージョンでは、オリジナルのXMLHttpRequestとほぼ同じように使用されています.
var
req;
function
callback() {
if
(req.readyState == 4) {
try
{
if
(req.status != 200) {
alert(
'error detected 1'
);
}
else
{
alert(
"got data: "
+req.responseText);
}
}
catch
(e) {
alert(
'error detected 2'
);
}
}
}
function
test_get() {
req =
new
CrossXHR();
req.onreadystatechange = callback;
req.open(
'GET'
,
' http://www.pliantdev.com/support/test.xml '
);
req.send();
}
Iframe+XMLHttpRequest
サイトBにproxyページがあり、オリジナルAjax(XMLHttpRequest)でB局の他のページを様々なデータインタラクションする場合は、A局でiFrameでこのproxyページを導入し、iFrameドメイン間の問題を解決するだけでよい.実際、AとBが同じ大ドメインに属する場合、両側のdocumentが設定.domainはルートドメイン名でOKです.まったく異なる2つのドメインであれば、クラシックwindownameのような既存のソリューションもたくさんあります.さらに、IE 6、IE 7を除いて、ほとんどの現代ブラウザはwindow.postMessageで異なるiFrameのデータ通信をサポートしています.pmxdrは、postMessageを使用して非表示の局外iFrameにデータを転送し、ドメイン間Ajaxを実現するライブラリであり、libxdrはさらにパッケージ化され、より使いやすくなっています.
var
req =
new
XDR();
req.open(
"POST"
,
"http://code.eligrey.com/pmxdr/libxdr/demo.php "
);
req.setRequestHeader(
"Content-Type"
,
"application/x-www-form-urlencoded"
);
req.onload =
function
() {
alert(
this
.responseText);
//alerts "foo is bar"
};
request.send(
"foo=bar"
);
なお、このスキームは、サイトBにproxyページを1つ配置するだけで、他の任意のサイトがこのページを介して対話することができ、安全ではないことを考慮すると、pmxdr-host.jsには変数alwaysTrustedOriginsがあり、正規定義でインタラクティブを許可するサイトをサポートする配列です.
究極のソリューション:Cross-Origin Resource Sharing
実際、IE 6、IE 7を除いて、ほとんどの現代ブラウザはドメイン間リソース共有(Cross-Origin Resource Sharing)規格をサポートしており、これはドメイン間Ajaxの究極のソリューションと言える.この基準があれば、Response Headerにこれを加えるだけで、簡単にドメインをまたぐことができます.
Access-Control-Allow-Origin: http:
//hello-world
.example
このヘッダ定義は、どのドメインが自分と対話できるかを定義し、*と定義すれば、どのドメインが許可されるかを表すので、もちろんお勧めしません.IE以外の標準ブラウザでは、ドメインAjaxにまたがることができます.IEの場合、要求は、追加のXDomainRequestオブジェクトと交換して送信される必要があり、その他は同様である.また、許可されたコミット方式などの情報を設定するためにヘッダがいくつかあり、認証やxmlなどのフォーマットのデータをサーバにコミットする場合は、事前に要求する必要があります.ここには、より多くの説明があります.
まとめ
シナリオによってそれぞれ異なる使用シーンがあり、誰が良いか悪いかは一概には言えない.一般的に、ドメイン間でデータを取得する個人的な習慣はJSONP、ドメイン間でデータを提出する個人的な習慣はフォーム+Callbackです.現代のブラウザの普及に伴い、オリジナルxhrも試してみることができ、flashは代替降格用として使用することができる.最後に、複数のドメイン間実装をカプセル化したライブラリを選択する場合は、次のYui 3のioコンポーネントを考慮することができる.