スクリプトの src を使用して、クロスドメインおよび Ajax のような効果を達成する

スクリプトの src を使用して、クロスドメインおよび Ajax のような効果を達成する_javascript スキル

WBOY

リリース： 2016-05-16 16:31:53

オリジナル

1616 人が閲覧しました

シーン

異なるドメイン名を持つ 2 つのサーバー (a.com と b.com) がある場合、インターフェイス b.com/b_return_js.php でデータを取得できます。もちろん、b.com のページにある場合は、ajax を使用してこのインターフェイスを直接リクエストできますが、a.com のページにリクエストされた場合はどうなるでしょうか。

b_return_js.php のインターフェースコード:

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

$a = 配列(
array('ユーザー名'=>'トニー', '年齢'=>25),
Array('ユーザー名'=>'yimeng', '年齢'=>23),
array('username'=>'ermeng', 'age'=>22),
array('username'=>'sanmeng', 'age'=>21),
);
シャッフル($a);

echo 'var userdata = '.json_encode($a).';'; //通常、b.com からのサイト内リクエストの場合、json_encode($a) が直接返されますが、 src 属性を使用してクロスドメインを実現したい場合は、この値を js 変数に割り当てて、スクリプトタグが読み込まれた後にこのデータを取得してページ内で使用できるようにする必要があります。

簡単な実装

a.com の下のページに直接アクセスする簡単な方法があります

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

<スクリプト src="http://b.com/b_return_js.php">>

このようにして、このインターフェイスによって返されるデータは、a.com ページで直接取得できます。
ただし、ここには欠点があります。このデータは、ページがロードされたときにのみ取得できます。たとえば、ajax を使用して新しいインターフェイスデータを取得したい場合は、このデータを取得するのには適していません。部分的なデータ更新の場合、この方法はやや不適切です。

Ajax 風の実装

実際、上記の ajax 風の実装のアイデアは、ajax 条件がトリガーされたときに上記のタグを再生成して、インターフェースからデータを再度取得することですが、実際にはまだ実装するのは少し難しいです（少なくとも私にとっては多大な労力がかかりました）。

コードをアップロード:

a.com/scriptSrc.php ページの下にボタンがあるとします

クリックするたびに、ajax 実装コードと同様に、b.com/b_return_js.php インターフェイスからデータが取得されます:

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

関数 createScript()
{
//console.log(ele);
ele.src = 'http://b.com/b_return_js.php';
ele.type = 'text/javascript';
ele. language = 'javascript';
}

関数 getData()
{
console.log(ユーザーデータ);
}

$('#ajax_request_from_b').click(function(){

//このスクリプトタグは毎回再ロードする必要があるため、クロスドメインサーバーからデータを確実に取得できるようにするために、毎回新しいスクリプトタグを再生成する必要があります
If(ele && ele.parentNode)
{
//ele.parentNode.removeChild(ele); //この種の削除では、メモリから ele を完全に削除することはできませんが、dom 内の位置が削除されるだけです
for (ele の var プロパティ) { ELE [プロパティ]を削除します。 }
}
ele = document.createElement('script') //これは新しい ele
です。 CreateScript();
Document.getElementsByTagName("head")[0].appendChild(ele);
ele.onload = function(){getData()}; // スクリプト要素のロード後にユーザーデータを取得できます。毎回、ユーザー情報がランダムな順序で取得されます。 });

このように、ボタンをクリックするたびに、インターフェースからデータを再度取得します。これは、少しありがたいことですが、ajax と似ています。まだアイデアです。