■前置き
XMLHttpRequestを使って、他ドメインのサーバーと通信は出来ない。
どのようにすれば他サーバーからデーターを取得できるのか?
- XMLHttpRequestで同ドメイン内の(PHPなどの)プロキシを使用し、プロキシが他のサーバーと通信する
- scriptタグを書き換えて通信する
- 隠しフレームを使う
今回は2番を使う。
■簡単な流れ
headタグ内にと空のスクリプトタグを記述
(スクリプト書き換え用)
<script type="text/javascript" charset="utf-8" id="import"></script>
データが戻ってきた場合の処理を定義
(下記はテスト用でアラート)
function callBackFunction(JSON){ alert('test'); }
スクリプト要素の書き換え関数と書き換えるタイミングを定義
(下記はロード時に実行)
window.onload = function(){ var originalScriptNode = document.getElementById('import'); var newScriptNode = document.createElement('script'); newScriptNode.src = '/*ここにスクリプトのsrc属性値を記入(他ドメイン)*/'; newScriptNode.charset = 'utf-8'; newScriptNode.id = 'import'; originalScriptNode.parentNode.replaceChild(newScriptNode, originalScriptNode); }
上記スクリプトで入れ替えるJavaScriptにというように記述
(→このデータを受け取った瞬間にcallBackFunctionが実行される)
callBackFunction(/*引数*/);
つまり、scriptタグのsrc属性には他ドメインも可能という特性を利用している